Update text and styles of No Data screens

src/components/Assets/AssetList/AssetEntry/AssetEntry.stories.tsx

@@ -65,6 +65,10 @@ export const Default: Story = {
           traceIds: ["7343BEA8BDBC98BA4779A8808E5BD7C9"]
         }
       ],
+      impactScores: {
+        ScoreExp25: 0,
+        ScoreExp1000: 0
+      },
       insights: [
         {
           type: "Errors",

src/components/Assets/AssetList/AssetEntry/index.tsx

@@ -107,7 +107,7 @@ export const AssetEntry = (props: AssetEntryProps) => {
         </s.InsightIconsContainer>
       </s.Header>
       <s.StatsContainer>
-        <s.StatsRow>
+        <s.StatsColumn>
           <s.Stats>
             <span>Services</span>
             <s.ServicesContainer>
@@ -122,6 +122,15 @@ export const AssetEntry = (props: AssetEntryProps) => {
               )}
             </s.ServicesContainer>
           </s.Stats>
+          <s.Stats>
+            <span>Last</span>
+            <s.ValueContainer title={new Date(lastSeenDateTime).toString()}>
+              {timeAgo(lastSeenDateTime)}
+              <s.Suffix>ago</s.Suffix>
+            </s.ValueContainer>
+          </s.Stats>
+        </s.StatsColumn>
+        <s.StatsColumn>
           <s.Stats>
             <span>Performance</span>
             <s.ValueContainer>
@@ -131,23 +140,6 @@ export const AssetEntry = (props: AssetEntryProps) => {
               )}
             </s.ValueContainer>
           </s.Stats>
-          {props.entry.impactScores && (
-            <s.Stats>
-              <span>Performance impact</span>
-              <s.ValueContainer>
-                {getImpactScoreLabel(props.entry.impactScores.ScoreExp25)}
-              </s.ValueContainer>
-            </s.Stats>
-          )}
-        </s.StatsRow>
-        <s.StatsRow>
-          <s.Stats>
-            <span>Last</span>
-            <s.ValueContainer title={new Date(lastSeenDateTime).toString()}>
-              {timeAgo(lastSeenDateTime)}
-              <s.Suffix>ago</s.Suffix>
-            </s.ValueContainer>
-          </s.Stats>
           <s.Stats>
             <span>Slowest 5%</span>
             <s.ValueContainer>
@@ -159,15 +151,23 @@ export const AssetEntry = (props: AssetEntryProps) => {
               )}
             </s.ValueContainer>
           </s.Stats>
-          {props.entry.impactScores && (
+        </s.StatsColumn>
+        {props.entry.impactScores && (
+          <s.StatsColumn>
+            <s.Stats>
+              <span>Performance impact</span>
+              <s.ValueContainer>
+                {getImpactScoreLabel(props.entry.impactScores.ScoreExp25)}
+              </s.ValueContainer>
+            </s.Stats>
             <s.Stats>
               <span>Overall impact</span>
               <s.ValueContainer>
                 {getImpactScoreLabel(props.entry.impactScores.ScoreExp1000)}
               </s.ValueContainer>
             </s.Stats>
-          )}
-        </s.StatsRow>
+          </s.StatsColumn>
+        )}
       </s.StatsContainer>
     </s.Container>
   );

src/components/Assets/AssetList/AssetEntry/styles.ts

@@ -74,7 +74,7 @@ export const InsightIconContainer = styled(AssetTypeIconContainer)`
 
 export const StatsContainer = styled.div`
   display: flex;
-  gap: 16px 12px;
+  gap: 12px 16px;
   flex-wrap: wrap;
   font-size: 10px;
   line-height: 12px;
@@ -83,13 +83,14 @@ export const StatsContainer = styled.div`
 export const Stats = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 8px;
   width: 120px;
 `;
 
-export const StatsRow = styled.div`
+export const StatsColumn = styled.div`
+  flex-direction: column;
   display: flex;
-  gap: 16px;
+  gap: 12px;
 `;
 
 export const ServicesContainer = styled.div`

src/components/Assets/index.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
-import { DefaultTheme, useTheme } from "styled-components";
 import { actions as globalActions } from "../../actions";
-import { SLACK_WORKSPACE_URL } from "../../constants";
 import { dispatcher } from "../../dispatcher";
+import { trackingEvents as globalTrackingEvents } from "../../trackingEvents";
 import { isNumber } from "../../typeGuards/isNumber";
 import { addPrefix } from "../../utils/addPrefix";
 import { groupBy } from "../../utils/groupBy";
-import { openURLInDefaultBrowser } from "../../utils/openURLInDefaultBrowser";
-import { StackIcon } from "../common/icons/StackIcon";
+import { sendTrackingEvent } from "../../utils/sendTrackingEvent";
+import { EmptyState } from "../common/EmptyState";
+import { CardsIcon } from "../common/icons/CardsIcon";
 import { AssetList } from "./AssetList";
 import { AssetTypeList } from "./AssetTypeList";
 import * as s from "./styles";
@@ -59,24 +59,12 @@ const groupEntries = (data: ServiceAssetsEntry[]): GroupedAssetEntries => {
   return groupedAssetEntries;
 };
 
-const getNoDataIconColor = (theme: DefaultTheme) => {
-  switch (theme.mode) {
-    case "light":
-      return "#f1f5fa";
-    case "dark":
-    case "dark-jetbrains":
-      return "#c6c6c6";
-  }
-};
-
 export const Assets = (props: AssetsProps) => {
   const [selectedAssetTypeId, setSelectedAssetTypeId] = useState<string | null>(
     null
   );
   const [data, setData] = useState<GroupedAssetEntries>();
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
-  const theme = useTheme();
-  const noDataIconColor = getNoDataIconColor(theme);
 
   useEffect(() => {
     window.sendMessageToDigma({
@@ -130,11 +118,11 @@ export const Assets = (props: AssetsProps) => {
     });
   };
 
-  const handleSlackLinkClick = () => {
-    openURLInDefaultBrowser(SLACK_WORKSPACE_URL);
-  };
+  const handleTroubleshootingLinkClick = () => {
+    sendTrackingEvent(globalTrackingEvents.TROUBLESHOOTING_LINK_CLICKED, {
+      origin: "assets"
+    });
 
-  const handleDocumentationLinkClick = () => {
     window.sendMessageToDigma({
       action: globalActions.OPEN_TROUBLESHOOTING_GUIDE
     });
@@ -144,19 +132,21 @@ export const Assets = (props: AssetsProps) => {
     if (!data || Object.keys(data).length === 0) {
       return (
         <s.NoDataContainer>
-          <s.Circle>
-            <StackIcon size={41} color={noDataIconColor} />
-          </s.Circle>
-          <s.NoDataTitle>No Data</s.NoDataTitle>
-          <s.NoDataText>
-            Please check out our{" "}
-            <s.Link onClick={handleDocumentationLinkClick}>
-              documentation
-            </s.Link>{" "}
-            to see how to collect data from your application. If you still have
-            any issues, please let us know on our{" "}
-            <s.Link onClick={handleSlackLinkClick}>Slack</s.Link> channel.
-          </s.NoDataText>
+          <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>
+              </>
+            }
+          />
         </s.NoDataContainer>
       );
     }
@@ -177,7 +167,7 @@ export const Assets = (props: AssetsProps) => {
         entries={selectedAssetTypeEntries}
       />
     );
-  }, [data, selectedAssetTypeId, noDataIconColor]);
+  }, [data, selectedAssetTypeId]);
 
   return <s.Container>{renderContent}</s.Container>;
 };

src/components/Assets/styles.ts

@@ -15,12 +15,16 @@ export const Container = styled.div`
 `;
 
 export const NoDataContainer = styled.div`
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 62px 38px;
-  font-weight: 500;
+`;
+
+export const EmptyStateDescription = styled.span`
   font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 4px;
   text-align: center;
   color: ${({ theme }) => {
     switch (theme.mode) {
@@ -33,44 +37,16 @@ export const NoDataContainer = styled.div`
   }};
 `;
 
-export const NoDataTitle = styled.span`
+export const TroubleshootingLink = styled(CommonLink)`
   font-size: 14px;
-  text-transform: capitalize;
-  margin: 20px 0 4px;
+  line-height: normal;
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
-        return "#4d668a";
+        return "#7891d0";
       case "dark":
       case "dark-jetbrains":
-        return "#dadada";
+        return "#92affa";
     }
   }};
 `;
-
-export const NoDataText = styled.span`
-  margin-bottom: 14px;
-`;
-
-export const Circle = styled.div`
-  width: 72px;
-  height: 72px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#d0d6eb";
-      case "dark":
-      case "dark-jetbrains":
-        return "#323334";
-    }
-  }};
-`;
-
-export const Link = styled(CommonLink)`
-  font-size: 12px;
-  line-height: 16px;
-`;

src/components/Documentation/Page.tsx

@@ -8,8 +8,8 @@ export const Page = (props: PageProps) => (
       {props.description}
     </s.Header>
     {props.sections &&
-      props.sections.map((section) => (
-        <s.Section key={section.title}>
+      props.sections.map((section, i) => (
+        <s.Section key={i}>
           <s.SectionHeader>
             {Number.isInteger(section.number) && (
               <s.SectionNumber>{section.number}</s.SectionNumber>

src/components/RecentActivity/index.tsx

@@ -4,8 +4,10 @@ import { useContext, useEffect, useMemo, useState } from "react";
 import { actions as globalActions } from "../../actions";
 import { dispatcher } from "../../dispatcher";
 import { usePrevious } from "../../hooks/usePrevious";
+import { trackingEvents as globalTrackingEvents } from "../../trackingEvents";
 import { addPrefix } from "../../utils/addPrefix";
 import { groupBy } from "../../utils/groupBy";
+import { sendTrackingEvent } from "../../utils/sendTrackingEvent";
 import { ConfigContext } from "../common/App/ConfigContext";
 import { CursorFollower } from "../common/CursorFollower";
 import { DigmaLogoFlatIcon } from "../common/icons/DigmaLogoFlatIcon";
@@ -28,7 +30,11 @@ const actions = addPrefix(ACTION_PREFIX, {
   CLOSE_LIVE_VIEW: "CLOSE_LIVE_VIEW"
 });
 
-const handleDocumentationLinkClick = () => {
+const handleTroubleshootingLinkClick = () => {
+  sendTrackingEvent(globalTrackingEvents.TROUBLESHOOTING_LINK_CLICKED, {
+    origin: "recent activity"
+  });
+
   window.sendMessageToDigma({
     action: globalActions.OPEN_TROUBLESHOOTING_GUIDE
   });
@@ -40,11 +46,14 @@ const renderNoData = () => {
       <CursorFollower>
         <DigmaLogoFlatIcon size={64} />
       </CursorFollower>
-      <s.NoDataTitle>No Recent Activity</s.NoDataTitle>
-      <s.NoDataText>Check our documentation</s.NoDataText>
-      <s.DocumentationLink onClick={handleDocumentationLinkClick}>
+      <s.NoDataTitle>No Data Yet</s.NoDataTitle>
+      <s.NoDataText>
+        Trigger actions that call this application to learn more about its
+        runtime behavior
+      </s.NoDataText>
+      <s.TroubleshootingLink onClick={handleTroubleshootingLinkClick}>
         Not seeing your application data?
-      </s.DocumentationLink>
+      </s.TroubleshootingLink>
     </s.NoDataContainer>
   );
 };

src/components/RecentActivity/styles.ts

@@ -69,6 +69,8 @@ export const NoDataContainer = styled.div`
   flex-direction: column;
   align-items: center;
   padding: 12px 0 18px;
+  border-radius: 12px;
+  gap: 4px;
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -79,7 +81,6 @@ export const NoDataContainer = styled.div`
         return "#3d3f41";
     }
   }};
-  border-radius: 12px;
 `;
 
 export const NoDataTitle = styled.span`
@@ -95,12 +96,11 @@ export const NoDataTitle = styled.span`
         return "#b9c2eb";
     }
   }};
-  margin-top: 4px;
 `;
 
 export const NoDataText = styled.span`
   font-weight: 400;
-  font-size: 10px;
+  font-size: 12px;
   line-height: 16px;
   color: ${({ theme }) => {
     switch (theme.mode) {
@@ -111,11 +111,10 @@ export const NoDataText = styled.span`
         return "#7c7c94";
     }
   }};
-  margin-top: 4px;
 `;
 
-export const DocumentationLink = styled(Link)`
-  font-size: 10px;
+export const TroubleshootingLink = styled(Link)`
+  font-size: 14px;
   line-height: 16px;
   text-decoration: none;
   color: ${({ theme }) => {