Fix Assets initial screen

src/components/Assets/AssetTypeList/AssetTypeList.stories.tsx

@@ -51,3 +51,13 @@ export const Default: Story = {
     }
   }
 };
+
+export const Empty: Story = {
+  args: {
+    searchQuery: "",
+    services: [],
+    data: {
+      assetCategories: []
+    }
+  }
+};

src/components/Assets/AssetTypeList/index.tsx

@@ -1,18 +1,13 @@
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { actions as globalActions } from "../../../actions";
 import { dispatcher } from "../../../dispatcher";
 import { getFeatureFlagValue } from "../../../featureFlags";
 import { usePrevious } from "../../../hooks/usePrevious";
-import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents";
 import { isNumber } from "../../../typeGuards/isNumber";
 import { isString } from "../../../typeGuards/isString";
 import { FeatureFlag } from "../../../types";
-import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
 import { ConfigContext } from "../../common/App/ConfigContext";
-import { EmptyState } from "../../common/EmptyState";
-import { NewCircleLoader } from "../../common/NewCircleLoader";
-import { CardsIcon } from "../../common/icons/CardsIcon";
 import { AssetFilterQuery } from "../AssetsFilter/types";
+import { NoDataMessage } from "../NoDataMessage";
 import { actions } from "../actions";
 import { checkIfAnyFiltersApplied, getAssetTypeInfo } from "../utils";
 import { AssetTypeListItem } from "./AssetTypeListItem";
@@ -176,53 +171,16 @@ export const AssetTypeList = (props: AssetTypeListProps) => {
     props.onAssetTypeSelect(assetTypeId);
   };
 
-  const handleTroubleshootingLinkClick = () => {
-    sendTrackingEvent(globalTrackingEvents.TROUBLESHOOTING_LINK_CLICKED, {
-      origin: "assets"
-    });
-
-    window.sendMessageToDigma({
-      action: globalActions.OPEN_TROUBLESHOOTING_GUIDE
-    });
-  };
-
   if (isInitialLoading) {
-    return (
-      <s.NoDataContainer>
-        <EmptyState content={<NewCircleLoader size={32} />} />
-      </s.NoDataContainer>
-    );
+    return <NoDataMessage type={"loading"} />;
   }
 
   if (data?.assetCategories.every((x) => x.count === 0)) {
-    let title = "No data yet";
-    let content = (
-      <>
-        <s.EmptyStateDescription>
-          Trigger actions that call this application to learn more about its
-          runtime behavior
-        </s.EmptyStateDescription>
-        <s.TroubleshootingLink onClick={handleTroubleshootingLinkClick}>
-          Not seeing your application data?
-        </s.TroubleshootingLink>
-      </>
-    );
-
     if (areAnyFiltersApplied) {
-      title = "No results";
-      content = (
-        <s.EmptyStateDescription>
-          It seems there are no assets matching your selected filters at the
-          moment
-        </s.EmptyStateDescription>
-      );
+      return <NoDataMessage type={"noSearchResults"} />;
     }
 
-    return (
-      <s.NoDataContainer>
-        <EmptyState icon={CardsIcon} title={title} content={content} />
-      </s.NoDataContainer>
-    );
+    return <NoDataMessage type={"noDataYet"} />;
   }
 
   return (

src/components/Assets/AssetTypeList/styles.ts

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { Link } from "../../common/Link";
 
 export const List = styled.ul`
   display: flex;
@@ -17,38 +16,3 @@ export const List = styled.ul`
     }
   }};
 `;
-
-export const NoDataContainer = styled.div`
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export const EmptyStateDescription = styled.span`
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 4px;
-  text-align: center;
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#788ca9";
-      case "dark":
-      case "dark-jetbrains":
-        return "#7c7c94";
-    }
-  }};
-`;
-
-export const TroubleshootingLink = styled(Link)`
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#7891d0";
-      case "dark":
-      case "dark-jetbrains":
-        return "#92affa";
-    }
-  }};
-`;

src/components/Assets/NoDataMessage/NoDataMessage.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { NoDataMessage } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof NoDataMessage> = {
+  title: "Assets/NoDataMessage",
+  component: NoDataMessage,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Loading: Story = {
+  args: {
+    type: "loading"
+  }
+};
+
+export const NoDataYet: Story = {
+  args: {
+    type: "noDataYet"
+  }
+};
+
+export const NoSearchResults: Story = {
+  args: {
+    type: "noSearchResults"
+  }
+};

src/components/Assets/NoDataMessage/index.tsx

@@ -0,0 +1,62 @@
+import { actions as globalActions } from "../../../actions";
+import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents";
+import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
+import { EmptyState } from "../../common/EmptyState";
+import { NewCircleLoader } from "../../common/NewCircleLoader";
+import { CardsIcon } from "../../common/icons/CardsIcon";
+import * as s from "./styles";
+import { NoDataMessageProps } from "./types";
+
+export const NoDataMessage = (props: NoDataMessageProps) => {
+  const handleTroubleshootingLinkClick = () => {
+    sendTrackingEvent(globalTrackingEvents.TROUBLESHOOTING_LINK_CLICKED, {
+      origin: "assets"
+    });
+
+    window.sendMessageToDigma({
+      action: globalActions.OPEN_TROUBLESHOOTING_GUIDE
+    });
+  };
+
+  let content: JSX.Element | null = null;
+
+  switch (props.type) {
+    case "loading":
+      content = <NewCircleLoader size={32} />;
+      break;
+    case "noDataYet":
+      content = (
+        <EmptyState
+          icon={CardsIcon}
+          title={"No data yet"}
+          content={
+            <>
+              <s.EmptyStateDescription>
+                Trigger actions that call this application to learn more about
+                its runtime behavior
+              </s.EmptyStateDescription>
+              <s.TroubleshootingLink onClick={handleTroubleshootingLinkClick}>
+                Not seeing your application data?
+              </s.TroubleshootingLink>
+            </>
+          }
+        />
+      );
+      break;
+    case "noSearchResults":
+      content = (
+        <EmptyState
+          icon={CardsIcon}
+          title={"No results"}
+          content={
+            <s.EmptyStateDescription>
+              It seems there are no assets matching your selected filters at the
+              moment
+            </s.EmptyStateDescription>
+          }
+        />
+      );
+  }
+
+  return <s.NoDataContainer>{content}</s.NoDataContainer>;
+};

src/components/Assets/NoDataMessage/styles.ts

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { Link } from "../../common/Link";
+
+export const NoDataContainer = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const EmptyStateDescription = styled.span`
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  text-align: center;
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#788ca9";
+      case "dark":
+      case "dark-jetbrains":
+        return "#7c7c94";
+    }
+  }};
+`;
+
+export const TroubleshootingLink = styled(Link)`
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#7891d0";
+      case "dark":
+      case "dark-jetbrains":
+        return "#92affa";
+    }
+  }};
+`;

src/components/Assets/NoDataMessage/types.ts

@@ -0,0 +1,3 @@
+export interface NoDataMessageProps {
+  type: "loading" | "noDataYet" | "noSearchResults";
+}

src/components/Assets/index.tsx

@@ -14,12 +14,12 @@ import { useDebounce } from "../../hooks/useDebounce";
 import { FeatureFlag } from "../../types";
 import { ConfigContext } from "../common/App/ConfigContext";
 import { EmptyState } from "../common/EmptyState";
-import { NewCircleLoader } from "../common/NewCircleLoader";
 import { MagnifierIcon } from "../common/icons/MagnifierIcon";
 import { AssetList } from "./AssetList";
 import { AssetTypeList } from "./AssetTypeList";
 import { AssetsFilter } from "./AssetsFilter";
 import { AssetFilterQuery } from "./AssetsFilter/types";
+import { NoDataMessage } from "./NoDataMessage";
 import { ServicesFilter } from "./ServicesFilter";
 import { actions } from "./actions";
 import * as s from "./styles";
@@ -103,7 +103,7 @@ export const Assets = () => {
     }
 
     if (!selectedFilters && !selectedServices) {
-      return <EmptyState content={<NewCircleLoader size={32} />} />;
+      return <NoDataMessage type={"noDataYet"} />;
     }
 
     if (!selectedAssetTypeId) {