Add AssetEntry component

.storybook/preview.tsx

@@ -7,7 +7,7 @@ import {
   initializeDigmaMessageListener,
   sendMessage
 } from "../src/api";
-import { App } from "../src/components/App";
+import { App } from "../src/components/common/App";
 import { dispatcher } from "../src/dispatcher";
 
 export const decorators = [

assets/assets/index.ejs

@@ -19,6 +19,7 @@
       window.theme;
       window.mainFont;
       window.codeFont;
+      window.assetsRefreshInterval;
     </script>
     <script src="/index.js"></script>
   </body>

src/components/Assets/AssetList/index.tsx

@@ -0,0 +1,59 @@
+import { AssetEntry as AssetEntryComponent } from "../../common/AssetEntry";
+import { ChevronIcon } from "../../common/icons/ChevronIcon";
+import { DIRECTION } from "../../common/icons/types";
+import { AssetEntry } from "../types";
+import { getAssetTypeInfo } from "../utils";
+import * as s from "./styles";
+import { AssetListProps } from "./types";
+
+export const AssetList = (props: AssetListProps) => {
+  const handleBackButtonClick = () => {
+    props.onBackButtonClick();
+  };
+
+  const handleAssetLinkClick = (entry: AssetEntry) => {
+    props.onAssetLinkClick(entry);
+  };
+
+  const assetTypeInfo = getAssetTypeInfo(props.assetTypeId);
+
+  const uniqueEntryIds = Object.keys(props.entries);
+
+  return (
+    <s.Container>
+      <s.Header>
+        <s.BackButton onClick={handleBackButtonClick}>
+          <ChevronIcon direction={DIRECTION.LEFT} color={"#dadada"} />
+        </s.BackButton>
+        {assetTypeInfo?.icon && <assetTypeInfo.icon color={"#9c9c9c"} />}
+        <span>{assetTypeInfo?.label || props.assetTypeId}</span>
+        <s.ItemsCount>
+          {Object.values(props.entries).flat().length}
+        </s.ItemsCount>
+      </s.Header>
+      {uniqueEntryIds.length > 0 ? (
+        <s.List>
+          {uniqueEntryIds.map((entryId) => {
+            const entries = props.entries[entryId];
+            return entries.map((entry) => {
+              const services = entries.map((entry) => entry.serviceName);
+
+              return (
+                <AssetEntryComponent
+                  key={`${entryId}-${entry.serviceName}`}
+                  entry={entry}
+                  relatedServices={services}
+                  onAssetLinkClick={handleAssetLinkClick}
+                />
+              );
+            });
+          })}
+        </s.List>
+      ) : (
+        <s.NoDataText>
+          Not seeing your data here? Maybe you’re missing some instrumentation!
+        </s.NoDataText>
+      )}
+    </s.Container>
+  );
+};

src/components/Assets/Details/styles.ts → src/components/Assets/AssetList/styles.ts

@@ -10,6 +10,7 @@ export const BackButton = styled.button`
   border: none;
   display: flex;
   padding: 0;
+  cursor: pointer;
 `;
 
 export const Header = styled.div`
@@ -40,7 +41,6 @@ export const List = styled.ul`
 
 export const ListItem = styled.li`
   display: flex;
-  justify-content: space-between;
 `;
 
 export const Link = styled.a`

src/components/Assets/AssetList/types.ts

@@ -0,0 +1,8 @@
+import { AssetEntry } from "../types";
+
+export interface AssetListProps {
+  onBackButtonClick: () => void;
+  assetTypeId: string;
+  entries: { [key: string]: AssetEntry[] };
+  onAssetLinkClick: (entry: AssetEntry) => void;
+}

src/components/Assets/AssetTypeList/AssetTypeListItem/index.tsx

@@ -0,0 +1,18 @@
+import * as s from "./styles";
+import { AssetTypeListItemProps } from "./types";
+
+export const AssetTypeListItem = (props: AssetTypeListItemProps) => {
+  const handleAssetTypeClick = () => {
+    props.onAssetTypeClick(props.id);
+  };
+
+  return (
+    <s.ListItem>
+      <s.AssetType onClick={handleAssetTypeClick}>
+        {props.icon && <props.icon size={16} color={"#9b9b9b"} />}
+        {props.label || props.id}
+        <s.EntryCount>{props.entryCount}</s.EntryCount>
+      </s.AssetType>
+    </s.ListItem>
+  );
+};

src/components/Assets/AssetTypeList/AssetTypeListItem/styles.ts

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const ListItem = styled.li`
+  display: flex;
+  flex-direction: column;
+  background: #3d3f41;
+`;
+
+export const AssetType = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px 8px 8px;
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 500;
+  letter-spacing: -0.1px;
+  user-select: none;
+  background: #383838;
+  border-radius: 4px;
+`;
+
+export const EntryCount = styled.span`
+  margin-left: auto;
+  font-weight: 400;
+  color: #9b9b9b;
+`;

src/components/Assets/AssetTypeList/AssetTypeListItem/types.ts

@@ -0,0 +1,10 @@
+import { MemoExoticComponent } from "react";
+import { IconProps } from "../../../common/icons/types";
+
+export interface AssetTypeListItemProps {
+  id: string;
+  label?: string;
+  icon?: MemoExoticComponent<(props: IconProps) => JSX.Element>;
+  entryCount: number;
+  onAssetTypeClick: (assetTypeId: string) => void;
+}

src/components/Assets/AssetTypeList/index.tsx

@@ -0,0 +1,41 @@
+import { getAssetTypeInfo } from "../utils";
+import { AssetTypeListItem } from "./AssetTypeListItem";
+import * as s from "./styles";
+import { AssetListProps } from "./types";
+
+const ASSET_TYPE_IDS = [
+  "Endpoint",
+  "Consumer",
+  "DatabaseQueries",
+  "CodeLocation",
+  "EndpointClient",
+  "Other"
+];
+
+export const AssetTypeList = (props: AssetListProps) => {
+  const handleAssetTypeClick = (categoryId: string) => {
+    props.onAssetTypeSelect(categoryId);
+  };
+
+  return (
+    <s.List>
+      {ASSET_TYPE_IDS.map((assetTypeId) => {
+        const assetTypeInfo = getAssetTypeInfo(assetTypeId);
+        const entryCount = props.data[assetTypeId]
+          ? Object.values(props.data[assetTypeId]).flat().length
+          : 0;
+
+        return (
+          <AssetTypeListItem
+            id={assetTypeId}
+            key={assetTypeId}
+            icon={assetTypeInfo?.icon}
+            entryCount={entryCount}
+            label={assetTypeInfo?.label}
+            onAssetTypeClick={handleAssetTypeClick}
+          />
+        );
+      })}
+    </s.List>
+  );
+};

src/components/Assets/AssetTypeList/types.ts

@@ -0,0 +1,6 @@
+import { AssetEntry } from "../types";
+
+export type AssetListProps = {
+  data: { [key: string]: { [key: string]: AssetEntry[] } };
+  onAssetTypeSelect: (categoryId: string) => void;
+};

src/components/Assets/Assets.stories.tsx

@@ -1,6 +1,8 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import { Assets } from ".";
+import { data } from "./mockData";
+import { AssetsProps } from "./types";
 
 export default {
   title: "Assets/Assets",
@@ -11,7 +13,14 @@ export default {
   }
 } as ComponentMeta<typeof Assets>;
 
-const Template: ComponentStory<typeof Assets> = () => <Assets />;
+const Template: ComponentStory<typeof Assets> = (args: AssetsProps) => (
+  <Assets {...args} />
+);
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Empty = Template.bind({});
+Empty.args = {};
+
+export const WithData = Template.bind({});
+WithData.args = {
+  data
+};