Handle header visability

digma-ai · Sep 6, 2024 · 6338d2e · 6338d2e
1 parent a9b91f4
commit 6338d2e
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 41 deletions.
diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx
@@ -4,6 +4,7 @@ import { DigmaMessageError } from "../../../api/types";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
+import { useStore } from "../../../store/useStore";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
@@ -147,6 +148,7 @@ export const AssetList = ({
   const previousEnvironment = usePrevious(environment);
   const previousViewScope = usePrevious(scopeViewOptions);
   const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
+  const { setShowAssetsHeader } = useStore.getState();
 
   const refreshData = useCallback(() => {
     getData(
@@ -204,6 +206,7 @@ export const AssetList = ({
     };
 
     dispatcher.addActionListener(actions.SET_DATA, handleAssetsData);
+    setShowAssetsHeader(true);
 
     return () => {
       dispatcher.removeActionListener(actions.SET_DATA, handleAssetsData);

diff --git a/src/components/Assets/AssetTypeList/index.tsx b/src/components/Assets/AssetTypeList/index.tsx
@@ -3,6 +3,7 @@ import { DigmaMessageError } from "../../../api/types";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
+import { useStore } from "../../../store/useStore";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { isNull } from "../../../typeGuards/isNull";
 import { isString } from "../../../typeGuards/isString";
@@ -81,6 +82,8 @@ export const AssetTypeList = ({
   const previousSearchQuery = usePrevious(searchQuery);
   const previousViewScope = usePrevious(scopeViewOptions);
   const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
+  const { setShowAssetsHeader } = useStore.getState();
+  const [showNoDataWithParents, setShowNoDataWithParents] = useState(false);
 
   const isInitialLoading = !data;
 
@@ -143,8 +146,14 @@ export const AssetTypeList = ({
   useEffect(() => {
     if (data && previousData !== data) {
       onAssetCountChange(getAssetCount(data));
+      const showNoDataWithParents =
+        data &&
+        data.parents.length > 0 &&
+        data?.assetCategories.every((x) => x.count === 0);
+      setShowAssetsHeader(!showNoDataWithParents);
+      setShowNoDataWithParents(showNoDataWithParents);
     }
-  }, [previousData, data, onAssetCountChange]);
+  }, [previousData, data, onAssetCountChange, setShowAssetsHeader]);
 
   useEffect(() => {
     if (
@@ -197,11 +206,11 @@ export const AssetTypeList = ({
       return <NoDataMessage type={"noSearchResults"} />;
     }
 
-    if (scope !== null) {
-      return <NoDataMessage type={"noDataForAsset"} />;
+    if (!scope) {
+      return <NoDataMessage type={"noDataYet"} />;
     }
 
-    if (data.parents.length > 0) {
+    if (showNoDataWithParents) {
       return (
         <s.EmptyStateContainer>
           <s.StyledEmptyState
@@ -232,7 +241,7 @@ export const AssetTypeList = ({
       );
     }
 
-    return <NoDataMessage type={"noDataYet"} />;
+    return <NoDataMessage type={"noDataForAsset"} />;
   }
 
   const assetTypeListItems = ASSET_TYPE_IDS.map((assetTypeId) => {

diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import { getFeatureFlagValue } from "../../featureFlags";
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
+import { useAssetsSelector } from "../../store/assetsSlice/useAssetsSelector";
 import { useConfigSelector } from "../../store/config/useConfigSelector";
 import { FeatureFlag } from "../../types";
 import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent";
@@ -45,6 +46,7 @@ export const Assets = () => {
     backendInfo,
     FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED
   );
+  const { showAssetsHeader } = useAssetsSelector();
 
   useEffect(() => {
     if (!scope?.span) {
@@ -131,7 +133,7 @@ export const Assets = () => {
       return <NoDataMessage type={"noDataYet"} />;
     }
 
-    if (!selectedFilters) {
+    if (!selectedFilters && showAssetsHeader) {
       return <NoDataMessage type={"loading"} />;
     }
 
@@ -163,43 +165,45 @@ export const Assets = () => {
 
   return (
     <s.Container>
-      <s.Header>
-        {scope?.span && (
+      {showAssetsHeader && (
+        <s.Header>
+          {scope?.span && (
+            <s.HeaderItem>
+              <AssetsViewScopeConfiguration
+                assetsCount={assetsCount}
+                currentScope={scope}
+                onAssetViewChange={handleAssetViewModeChange}
+              />
+            </s.HeaderItem>
+          )}
           <s.HeaderItem>
-            <AssetsViewScopeConfiguration
-              assetsCount={assetsCount}
-              currentScope={scope}
-              onAssetViewChange={handleAssetViewModeChange}
+            <SearchInput
+              onChange={handleSearchInputChange}
+              value={searchInputValue}
             />
-          </s.HeaderItem>
-        )}
-        <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}
+            <AssetsFilter
+              onApply={handleApplyFilters}
+              filters={selectedFilters}
+              assetScopeOption={
+                areExtendedAssetsFiltersEnabled ? assetScopeOption : null
+              }
+              searchQuery={
+                areExtendedAssetsFiltersEnabled ? debouncedSearchInputValue : ""
+              }
             />
-          </Tooltip>
-        </s.HeaderItem>
-        {scope?.span && (
-          <s.HeaderItem>Assets filtered to current scope</s.HeaderItem>
-        )}
-      </s.Header>
+            <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
@@ -0,0 +1,23 @@
+import { createSlice } from "zustand-slices";
+
+interface AssetsState {
+  showAssetsHeader: boolean;
+}
+
+const initialState: AssetsState = {
+  showAssetsHeader: true
+};
+
+const set = (update: Partial<AssetsState>) => (state: AssetsState) => ({
+  ...state,
+  ...update
+});
+
+export const assetsSlice = createSlice({
+  name: "assets",
+  value: initialState,
+  actions: {
+    setShowAssetsHeader: (showAssetsHeader: boolean) =>
+      set({ showAssetsHeader })
+  }
+});
diff --git a/src/store/assetsSlice/useAssetsSelector.ts b/src/store/assetsSlice/useAssetsSelector.ts
@@ -0,0 +1,3 @@
+import { useStore } from "../useStore";
+
+export const useAssetsSelector = () => useStore((state) => state.assets);
diff --git a/src/store/useStore.ts b/src/store/useStore.ts
@@ -1,12 +1,13 @@
 import { create } from "zustand";
 import { withSlices } from "zustand-slices";
 import { Scope } from "../components/common/App/types";
+import { assetsSlice } from "./assetsSlice/assetsSlice";
 import { configSlice } from "./config/configSlice";
 import { insightsSlice } from "./insights/insightsSlice";
 import { withMutableActions } from "./withMutableActions";
 
 export const useStore = create(
-  withMutableActions(withSlices(configSlice, insightsSlice), {
+  withMutableActions(withSlices(configSlice, insightsSlice, assetsSlice), {
     setScope: (scope: Scope) => (_, set) => {
       set((state) =>
         state.config.scope?.span?.spanCodeObjectId !==