Feature/empty states

src/components/Assets/AssetList/index.tsx

@@ -6,6 +6,7 @@ import { usePrevious } from "../../../hooks/usePrevious";
 import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { changeScope } from "../../../utils/actions/changeScope";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { SCOPE_CHANGE_EVENTS } from "../../Main/types";
 import { EmptyState } from "../../common/EmptyState";
 import { Menu } from "../../common/Menu";
@@ -19,6 +20,7 @@ import { SortIcon } from "../../common/icons/SortIcon";
 import { Direction } from "../../common/icons/types";
 import { AssetFilterQuery } from "../AssetsFilter/types";
 import { actions } from "../actions";
+import { trackingEvents } from "../tracking";
 import { checkIfAnyFiltersApplied, getAssetTypeInfo } from "../utils";
 import { AssetEntry as AssetEntryComponent } from "./AssetEntry";
 import * as s from "./styles";
@@ -272,6 +274,8 @@ export const AssetList = ({
   ]);
 
   const handleAllAssetsLinkClick = () => {
+    sendUserActionTrackingEvent(trackingEvents.ALL_ASSETS_LINK_CLICKED);
+
     onGoToAllAssets();
   };
 

src/components/Assets/tracking.ts

@@ -7,7 +7,8 @@ export const trackingEvents = addPrefix(
   {
     FILTER_APPLIED: "filter applied",
     REFRESH_BUTTON_CLICKED: "refresh button clicked",
-    FILTERS_POPUP_CLOSE_BUTTON_CLICKED: "filter popup close button clicked"
+    FILTERS_POPUP_CLOSE_BUTTON_CLICKED: "filter popup close button clicked",
+    ALL_ASSETS_LINK_CLICKED: "all assets link clicked"
   },
   " "
 );

src/components/Errors/ErrorDetails/index.tsx

@@ -4,8 +4,8 @@ import {
   useFetchData
 } from "../../../hooks/useFetchData";
 import { NewCircleLoader } from "../../common/NewCircleLoader";
-import { EmptyStateContainer } from "../ErrorsList/styles";
 import { actions } from "../actions";
+import { EmptyStateContainer } from "../styles";
 import { ErrorDetailsCardContent } from "./ErrorDetailsCardContent";
 import { ErrorDetailsCardHeader } from "./ErrorDetailsCardHeader";
 import * as s from "./styles";

src/components/Errors/ErrorsList/ErrorsList.stories.tsx

@@ -44,3 +44,17 @@ export const Empty: Story = {
     }, 1000);
   }
 };
+
+export const EmptyHome: Story = {
+  play: () => {
+    window.setTimeout(() => {
+      window.postMessage({
+        type: "digma",
+        action: actions.SET_ERRORS_DATA,
+        payload: {
+          errors: []
+        }
+      });
+    }, 1000);
+  }
+};

src/components/Errors/ErrorsList/index.tsx

@@ -8,6 +8,7 @@ import { NewCircleLoader } from "../../common/NewCircleLoader";
 import { CheckCircleIcon } from "../../common/icons/38px/CheckCircleIcon";
 import { ErrorCard } from "../ErrorCard";
 import { actions } from "../actions";
+import { EmptyStateContainer, EmptyStateTextContainer } from "../styles";
 import { trackingEvents } from "../tracking";
 import { GetErrorsDataPayload, SetErrorsDataPayload } from "../types";
 import * as s from "./styles";
@@ -45,27 +46,27 @@ export const ErrorsList = ({
   if (!data) {
     // TODO: replace with skeletons
     return (
-      <s.EmptyStateContainer>
+      <EmptyStateContainer>
         <NewCircleLoader size={32} />
-      </s.EmptyStateContainer>
+      </EmptyStateContainer>
     );
   }
 
   if (data.errors.length === 0) {
     return (
-      <s.EmptyStateContainer>
+      <EmptyStateContainer>
         <s.EmptyStateIconContainer>
           <CheckCircleIcon size={38} color={"currentColor"} />
         </s.EmptyStateIconContainer>
-        <s.EmptyStateTextContainer>
+        <EmptyStateTextContainer>
           <s.EmptyStateTitle>
             <span>Good News!</span>
             <span>No Errors Recorded Yet</span>
           </s.EmptyStateTitle>
           You should return to this page if any exceptions do occur to see more
           details.
-        </s.EmptyStateTextContainer>
-      </s.EmptyStateContainer>
+        </EmptyStateTextContainer>
+      </EmptyStateContainer>
     );
   }
 

src/components/Errors/ErrorsList/styles.ts

@@ -1,8 +1,5 @@
 import styled from "styled-components";
-import {
-  bodySemiboldTypography,
-  footnoteRegularTypography
-} from "../../common/App/typographies";
+import { bodySemiboldTypography } from "../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
@@ -12,17 +9,6 @@ export const Container = styled.div`
   overflow: auto;
 `;
 
-export const EmptyStateContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  justify-content: center;
-  flex-grow: 1;
-  width: 210px;
-  align-self: center;
-`;
-
 export const EmptyStateIconContainer = styled.div`
   display: flex;
   align-items: center;
@@ -34,16 +20,6 @@ export const EmptyStateIconContainer = styled.div`
   background: ${({ theme }) => theme.colors.v3.surface.sidePanelHeader};
 `;
 
-export const EmptyStateTextContainer = styled.div`
-  ${footnoteRegularTypography}
-
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  gap: 4px;
-  color: ${({ theme }) => theme.colors.v3.text.tertiary};
-`;
-
 export const EmptyStateTitle = styled.div`
   ${bodySemiboldTypography}
 

src/components/Errors/ErrorsList/types.ts

@@ -1,5 +1,5 @@
 export interface ErrorsListProps {
-  spanCodeObjectId: string;
+  spanCodeObjectId?: string;
   methodId?: string;
   onErrorSelect: (id: string) => void;
 }

src/components/Errors/index.tsx

@@ -1,6 +1,12 @@
 import { useParams } from "react-router-dom";
 import { useConfigSelector } from "../../store/config/useConfigSelector";
+import { trackingEvents as globalEvents } from "../../trackingEvents";
+import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent";
+import { ErrorIcon } from "../common/icons/16px/ErrorIcon";
+import { NewButton } from "../common/v3/NewButton";
+import { NewEmptyState } from "../common/v3/NewEmptyState";
 import { useHistory } from "../Main/useHistory";
+import { TAB_IDS } from "../Navigation/Tabs/types";
 import { ErrorDetails } from "./ErrorDetails";
 import { ErrorsList } from "./ErrorsList";
 import * as s from "./styles";
@@ -21,6 +27,13 @@ export const Errors = () => {
     goTo("..");
   };
 
+  const handleSeeAllAssetsClick = () => {
+    sendUserActionTrackingEvent(globalEvents.GOT_TO_ALL_ASSETS_CLICKED, {
+      source: "Error tab"
+    });
+    goTo(`/${TAB_IDS.ASSETS}`);
+  };
+
   const renderContent = () => {
     if (selectedErrorId) {
       return (
@@ -31,17 +44,40 @@ export const Errors = () => {
       );
     }
 
-    if (spanCodeObjectId) {
+    if (!spanCodeObjectId) {
       return (
-        <ErrorsList
-          onErrorSelect={handleErrorSelect}
-          spanCodeObjectId={spanCodeObjectId}
-          methodId={methodId}
-        />
+        <s.EmptyStateContainer>
+          <NewEmptyState
+            icon={ErrorIcon}
+            title={"Select an asset to view errors"}
+            content={
+              <>
+                <s.EmptyStateTextContainer>
+                  <span>The Errors tab shows details for</span>
+                  <span>exceptions for each Digma-tracked</span>
+                  <span>asset. See all tracked assets on the</span>
+                  <span>Assets page.</span>
+                </s.EmptyStateTextContainer>
+
+                <NewButton
+                  buttonType="primary"
+                  onClick={handleSeeAllAssetsClick}
+                  label="See all assets"
+                />
+              </>
+            }
+          />
+        </s.EmptyStateContainer>
       );
     }
 
-    return null;
+    return (
+      <ErrorsList
+        onErrorSelect={handleErrorSelect}
+        spanCodeObjectId={spanCodeObjectId}
+        methodId={methodId}
+      />
+    );
   };
 
   return <s.Container>{renderContent()}</s.Container>;

src/components/Errors/styles.ts

@@ -1,7 +1,30 @@
 import styled from "styled-components";
+import { footnoteRegularTypography } from "../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
 `;
+
+export const EmptyStateTextContainer = styled.div`
+  ${footnoteRegularTypography}
+
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+`;
+
+export const EmptyStateContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  flex-grow: 1;
+  align-self: center;
+`;

src/components/Errors/types.ts

@@ -1,5 +1,5 @@
 export interface GetErrorsDataPayload {
-  spanCodeObjectId: string;
+  spanCodeObjectId?: string;
   methodId?: string;
 }
 

src/components/Insights/InsightsCatalog/InsightsPage/InsightsPage.stories.tsx

@@ -41,7 +41,8 @@ const props: InsightsPageProps = {
     return undefined;
   },
   page: 0,
-  isMarkAsReadButtonEnabled: false
+  isMarkAsReadButtonEnabled: false,
+  insightsViewType: "Analytics"
 };
 
 export const WithInsights: Story = {
@@ -144,3 +145,22 @@ export const NoInsightsButAnalyticsExist: Story = {
   ],
   args: props
 };
+
+export const NoAnalyticsInsightsOnHomeScope: Story = {
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider
+        value={{
+          ...initialState,
+          scope: undefined
+        }}
+      >
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ],
+  args: {
+    ...props,
+    insightsViewType: "Analytics"
+  }
+};