change view box view

digma-ai · Sep 6, 2024 · 99bc534 · 99bc534
1 parent 278087b
commit 99bc534
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 47 deletions.
diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx
@@ -148,7 +148,7 @@ export const AssetList = ({
   const previousEnvironment = usePrevious(environment);
   const previousViewScope = usePrevious(scopeViewOptions);
   const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
-  const { setShowAssetsHeader } = useStore.getState();
+  const { setShowAssetsHeaderToolBox } = useStore.getState();
 
   const refreshData = useCallback(() => {
     getData(
@@ -206,7 +206,7 @@ export const AssetList = ({
     };
 
     dispatcher.addActionListener(actions.SET_DATA, handleAssetsData);
-    setShowAssetsHeader(true);
+    setShowAssetsHeaderToolBox(true);
 
     return () => {
       dispatcher.removeActionListener(actions.SET_DATA, handleAssetsData);

diff --git a/src/components/Assets/AssetTypeList/index.tsx b/src/components/Assets/AssetTypeList/index.tsx
@@ -81,7 +81,7 @@ export const AssetTypeList = ({
   const previousSearchQuery = usePrevious(searchQuery);
   const previousViewScope = usePrevious(scopeViewOptions);
   const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
-  const { setShowAssetsHeader } = useStore.getState();
+  const { setShowAssetsHeaderToolBox } = useStore.getState();
   const [showNoDataWithParents, setShowNoDataWithParents] = useState(false);
 
   const isInitialLoading = !data;
@@ -149,10 +149,10 @@ export const AssetTypeList = ({
         data &&
         data.parents.length > 0 &&
         data?.assetCategories.every((x) => x.count === 0);
-      setShowAssetsHeader(!showNoDataWithParents);
+      setShowAssetsHeaderToolBox(!showNoDataWithParents);
       setShowNoDataWithParents(showNoDataWithParents);
     }
-  }, [previousData, data, onAssetCountChange, setShowAssetsHeader]);
+  }, [previousData, data, onAssetCountChange, setShowAssetsHeaderToolBox]);
 
   useEffect(() => {
     if (

diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
@@ -46,7 +46,7 @@ export const Assets = () => {
     backendInfo,
     FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED
   );
-  const { showAssetsHeader } = useAssetsSelector();
+  const { showAssetsHeaderToolBox } = useAssetsSelector();
 
   useEffect(() => {
     if (!scope?.span) {
@@ -133,7 +133,7 @@ export const Assets = () => {
       return <NoDataMessage type={"noDataYet"} />;
     }
 
-    if (!selectedFilters && showAssetsHeader) {
+    if (!selectedFilters && showAssetsHeaderToolBox) {
       return <NoDataMessage type={"loading"} />;
     }
 
@@ -165,45 +165,50 @@ export const Assets = () => {
 
   return (
     <s.Container>
-      {showAssetsHeader && (
-        <s.Header>
-          {scope?.span && (
-            <s.HeaderItem>
-              <AssetsViewScopeConfiguration
-                assetsCount={assetsCount}
-                currentScope={scope}
-                onAssetViewChange={handleAssetViewModeChange}
-              />
-            </s.HeaderItem>
-          )}
+      <s.Header>
+        {scope?.span && (
           <s.HeaderItem>
-            <SearchInput
-              onChange={handleSearchInputChange}
-              value={searchInputValue}
+            <AssetsViewScopeConfiguration
+              assetsCount={assetsCount}
+              currentScope={scope}
+              onAssetViewChange={handleAssetViewModeChange}
             />
-            <AssetsFilter
-              onApply={handleApplyFilters}
-              filters={selectedFilters}
-              assetScopeOption={
-                areExtendedAssetsFiltersEnabled ? assetScopeOption : null
-              }
-              searchQuery={
-                areExtendedAssetsFiltersEnabled ? debouncedSearchInputValue : ""
-              }
-            />
-            <Tooltip title={"Refresh"}>
-              <s.RefreshButton
-                buttonType={"tertiary"}
-                icon={RefreshIcon}
-                onClick={handleRefresh}
-              />
-            </Tooltip>
           </s.HeaderItem>
-          {scope?.span && (
-            <s.HeaderItem>Assets filtered to current scope</s.HeaderItem>
-          )}
-        </s.Header>
-      )}
+        )}
+        {showAssetsHeaderToolBox && (
+          <>
+            <s.HeaderItem>
+              <SearchInput
+                onChange={handleSearchInputChange}
+                value={searchInputValue}
+              />
+              <AssetsFilter
+                onApply={handleApplyFilters}
+                filters={selectedFilters}
+                assetScopeOption={
+                  areExtendedAssetsFiltersEnabled ? assetScopeOption : null
+                }
+                searchQuery={
+                  areExtendedAssetsFiltersEnabled
+                    ? debouncedSearchInputValue
+                    : ""
+                }
+              />
+              <Tooltip title={"Refresh"}>
+                <s.RefreshButton
+                  buttonType={"tertiary"}
+                  icon={RefreshIcon}
+                  onClick={handleRefresh}
+                />
+              </Tooltip>
+            </s.HeaderItem>
+            {scope?.span && (
+              <s.HeaderItem>Assets filtered to current scope</s.HeaderItem>
+            )}
+          </>
+        )}
+      </s.Header>
+
       {renderContent()}
     </s.Container>
   );

diff --git a/src/store/assetsSlice/assetsSlice.ts b/src/store/assetsSlice/assetsSlice.ts
@@ -1,11 +1,11 @@
 import { createSlice } from "zustand-slices";
 
 interface AssetsState {
-  showAssetsHeader: boolean;
+  showAssetsHeaderToolBox: boolean;
 }
 
 const initialState: AssetsState = {
-  showAssetsHeader: true
+  showAssetsHeaderToolBox: true
 };
 
 const set = (update: Partial<AssetsState>) => (state: AssetsState) => ({
@@ -17,7 +17,7 @@ export const assetsSlice = createSlice({
   name: "assets",
   value: initialState,
   actions: {
-    setShowAssetsHeader: (showAssetsHeader: boolean) =>
-      set({ showAssetsHeader })
+    setShowAssetsHeaderToolBox: (showAssetsHeaderToolBox: boolean) =>
+      set({ showAssetsHeaderToolBox })
   }
 });