Update Asset View mode toggle, update styles

src/components/Assets/AssetList/index.tsx

@@ -301,6 +301,12 @@ export const AssetList = (props: AssetListProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (data && previousData?.filteredCount !== data?.filteredCount) {
+      props.onAssetCountChange(data.filteredCount);
+    }
+  }, [previousData, data, props.onAssetCountChange]);
+
   useEffect(() => {
     props.setRefresher(refreshData);
   }, [refreshData, props.setRefresher]);

src/components/Assets/AssetList/styles.ts

@@ -35,15 +35,6 @@ export const Header = styled.div`
   font-weight: 400;
   font-size: 14px;
   padding: 8px 12px 8px 8px;
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#f1f5fa";
-      case "dark":
-      case "dark-jetbrains":
-        return "#383838";
-    }
-  }};
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":

src/components/Assets/AssetList/types.ts

@@ -11,6 +11,7 @@ export interface AssetListProps {
   searchQuery: string;
   scopeViewOptions: AssetScopeOption | null;
   setRefresher: (refresher: () => void) => void;
+  onAssetCountChange: (count: number) => void;
 }
 
 export enum SORTING_CRITERION {

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

@@ -8,7 +8,7 @@ export const AssetTypeListItem = (props: AssetTypeListItemProps) => {
 
   return (
     <s.ListItem onClick={handleAssetTypeClick}>
-      {props.icon && <props.icon size={16} color={"#9b9b9b"} />}
+      {props.icon && <props.icon size={16} color={"currentColor"} />}
       {props.label || props.id}
       <s.EntryCount>{props.entryCount}</s.EntryCount>
     </s.ListItem>

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

@@ -10,26 +10,11 @@ export const ListItem = styled.li`
   letter-spacing: -0.1px;
   user-select: none;
   border-radius: 4px;
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#f1f5fa";
-      case "dark":
-      case "dark-jetbrains":
-        return "#383838";
-    }
-  }};
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};
+  background: ${({ theme }) => theme.colors.v3.surface.secondary};
+  color: ${({ theme }) => theme.colors.v3.text.primary};
 `;
 
 export const EntryCount = styled.span`
   margin-left: auto;
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#828797";
-      case "dark":
-      case "dark-jetbrains":
-        return "#9b9b9b";
-    }
-  }};
 `;

src/components/Assets/AssetTypeList/index.tsx

@@ -63,6 +63,9 @@ const getData = (
   });
 };
 
+const getAssetCount = (assetCategoriesData: AssetCategoriesData) =>
+  assetCategoriesData.assetCategories.reduce((acc, cur) => acc + cur.count, 0);
+
 export const AssetTypeList = (props: AssetTypeListProps) => {
   const [data, setData] = useState<AssetCategoriesData>();
   const previousData = usePrevious(data);
@@ -109,7 +112,7 @@ export const AssetTypeList = (props: AssetTypeListProps) => {
 
   useEffect(() => {
     props.setRefresher(refreshData);
-  }, [refreshData]);
+  }, [refreshData, props.setRefresher]);
 
   const areAnyFiltersApplied = checkIfAnyFiltersApplied(
     isComplexFilterEnabled,
@@ -141,6 +144,12 @@ export const AssetTypeList = (props: AssetTypeListProps) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (data && previousData !== data) {
+      props.onAssetCountChange(getAssetCount(data));
+    }
+  }, [previousData, data, props.onAssetCountChange]);
+
   useEffect(() => {
     if (
       (isEnvironment(previousEnvironment) &&

src/components/Assets/AssetTypeList/styles.ts

@@ -6,13 +6,4 @@ export const List = styled.ul`
   gap: 8px;
   padding: 0 8px 8px;
   margin: 0;
-  color: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#828797";
-      case "dark":
-      case "dark-jetbrains":
-        return "#dadada";
-    }
-  }};
 `;

src/components/Assets/AssetTypeList/types.ts

@@ -11,6 +11,7 @@ export interface AssetTypeListProps {
   searchQuery: string;
   scopeViewOptions: AssetScopeOption | null;
   setRefresher: (refresher: () => void) => void;
+  onAssetCountChange: (count: number) => void;
 }
 
 export interface AssetCategoriesData {

src/components/Assets/AssetsViewScopeConfiguration/AssetsViewScopeConfiguration.stories.tsx

@@ -17,5 +17,25 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {}
+  args: {
+    currentScope: {
+      span: {
+        displayName: "displayName",
+        spanCodeObjectId: "spanCodeObjectId",
+        serviceName: null,
+        role: "Entry"
+      },
+      code: {
+        relatedCodeDetailsList: [],
+        codeDetailsList: []
+      },
+      hasErrors: false,
+      issuesInsightsCount: 0,
+      analyticsInsightsCount: 0
+    },
+    assetsCount: 1,
+    onAssetViewChange: () => {
+      return undefined;
+    }
+  }
 };

src/components/Assets/AssetsViewScopeConfiguration/index.tsx

@@ -1,44 +1,71 @@
 import { useEffect, useState } from "react";
-import { ToggleSwitch } from "../../common/ToggleSwitch";
+import { isNumber } from "../../../typeGuards/isNumber";
+import { ArrowIcon } from "../../common/icons/12px/ArrowIcon";
+import { TreeNodesIcon } from "../../common/icons/12px/TreeNodesIcon";
+import { Toggle } from "../../common/v3/Toggle";
+import { ToggleOption } from "../../common/v3/Toggle/types";
 import * as s from "./styles";
 import { AssetsViewConfigurationProps as AssetsViewScopeConfigurationProps } from "./types";
 
-export const AssetsViewScopeConfiguration = (
-  props: AssetsViewScopeConfigurationProps
-) => {
-  const [isEntry, setIsEntry] = useState(false);
-  const [isDirect, setIsDirect] = useState(false);
-  const scope = props.currentScope;
+type ViewMode = "descendants" | "children";
+
+export const AssetsViewScopeConfiguration = ({
+  currentScope,
+  onAssetViewChange,
+  assetsCount
+}: AssetsViewScopeConfigurationProps) => {
+  const [viewMode, setViewMode] = useState<ViewMode>("descendants");
 
   useEffect(() => {
-    const isEntryPoint = !scope || scope.span?.role === "Entry";
-    props.onAssetViewChanged({
-      scopedSpanCodeObjectId: scope?.span?.spanCodeObjectId,
+    const isEntryPoint = !currentScope || currentScope.span?.role === "Entry";
+
+    setViewMode(isEntryPoint ? "children" : "descendants");
+
+    onAssetViewChange({
+      scopedSpanCodeObjectId: currentScope?.span?.spanCodeObjectId,
       isDirect: !isEntryPoint
     });
-    setIsEntry(isEntryPoint);
-    setIsDirect(!isEntryPoint);
-  }, [scope]);
+  }, [currentScope, onAssetViewChange]);
+
+  const handleToggleOptionChange = (value: ViewMode) => {
+    setViewMode(value);
+
+    onAssetViewChange &&
+      onAssetViewChange({
+        isDirect: value === "children",
+        scopedSpanCodeObjectId: currentScope?.span?.spanCodeObjectId
+      });
+  };
+
+  const toggleOptions: ToggleOption<ViewMode>[] = [
+    {
+      value: "descendants",
+      icon: TreeNodesIcon
+    },
+    {
+      value: "children",
+      icon: ArrowIcon
+    }
+  ];
+
+  const assetTypeDescription =
+    viewMode === "descendants" ? "descendant" : "child";
 
   return (
     <s.Container>
-      <s.Item>Assets filtered to current scope</s.Item>
-      <s.Item>
-        <ToggleSwitch
-          label={"Show direct only"}
-          labelPosition={"start"}
-          onChange={(val) => {
-            setIsDirect(val);
-            props.onAssetViewChanged &&
-              props.onAssetViewChanged({
-                isDirect: val,
-                scopedSpanCodeObjectId: scope?.span?.spanCodeObjectId
-              });
-          }}
-          checked={isDirect}
-          disabled={!isEntry}
-        />
-      </s.Item>
+      <Toggle
+        value={viewMode}
+        onValueChange={handleToggleOptionChange}
+        options={toggleOptions}
+        size={"small"}
+      />
+      <s.Label>
+        Showing
+        <s.AssetsCount>
+          {isNumber(assetsCount) ? ` ${assetsCount} ` : " "}
+        </s.AssetsCount>
+        {assetTypeDescription} asset{assetsCount === 1 ? "" : "s"}
+      </s.Label>
     </s.Container>
   );
 };

src/components/Assets/AssetsViewScopeConfiguration/styles.ts

@@ -1,12 +1,18 @@
 import styled from "styled-components";
+import { subscriptRegularTypography } from "../../common/App/typographies";
 
 export const Container = styled.div`
   display: flex;
-  font-size: 14px;
-  flex-grow: 1;
-  justify-content: space-between;
+  gap: 8px;
+  align-items: center;
 `;
 
-export const Item = styled.div`
-  display: flex;
+export const Label = styled.div`
+  ${subscriptRegularTypography}
+
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+`;
+
+export const AssetsCount = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
 `;

src/components/Assets/AssetsViewScopeConfiguration/types.ts

@@ -1,8 +1,9 @@
 import { Scope } from "../../common/App/types";
 
 export interface AssetsViewConfigurationProps {
-  onAssetViewChanged: (assetViewScope: AssetScopeOption) => void;
+  onAssetViewChange: (assetViewScope: AssetScopeOption) => void;
   currentScope: Scope;
+  assetsCount?: number;
 }
 
 export interface AssetScopeOption {

src/components/Assets/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { lt, valid } from "semver";
 import {
   featureFlagMinBackendVersions,
@@ -26,6 +26,7 @@ import { trackingEvents } from "./tracking";
 import { DataRefresher } from "./types";
 
 export const Assets = () => {
+  const [assetsCount, setAssetsCount] = useState<number>();
   const [selectedAssetTypeId, setSelectedAssetTypeId] = useState<string | null>(
     null
   );
@@ -113,6 +114,18 @@ export const Assets = () => {
     currentRefresher && currentRefresher.refresh();
   };
 
+  const handleAssetCountChange = useCallback((count: number) => {
+    setAssetsCount(count);
+  }, []);
+
+  const handleAssetViewModeChange = useCallback((val: AssetScopeOption) => {
+    setAssetScopeOption(val);
+  }, []);
+
+  const handleRefresherChange = useCallback((refresher: () => void) => {
+    setAssetTypeListRefresher({ refresh: refresher });
+  }, []);
+
   const renderContent = () => {
     if (isBackendUpgradeMessageVisible) {
       return (
@@ -145,9 +158,8 @@ export const Assets = () => {
           filters={selectedFilters}
           searchQuery={debouncedSearchInputValue}
           scopeViewOptions={assetScopeOption}
-          setRefresher={(refresher) => {
-            setAssetTypeListRefresher({ refresh: refresher });
-          }}
+          setRefresher={handleRefresherChange}
+          onAssetCountChange={handleAssetCountChange}
         />
       );
     }
@@ -160,16 +172,24 @@ export const Assets = () => {
         filters={selectedFilters}
         searchQuery={debouncedSearchInputValue}
         scopeViewOptions={assetScopeOption}
-        setRefresher={(refresher) => {
-          setAssetListRefresher({ refresh: refresher });
-        }}
+        setRefresher={handleRefresherChange}
+        onAssetCountChange={handleAssetCountChange}
       />
     );
   };
 
   return (
     <s.Container>
       <s.Header>
+        {config.scope && config.scope.span && (
+          <s.HeaderItem>
+            <AssetsViewScopeConfiguration
+              assetsCount={assetsCount}
+              currentScope={config.scope}
+              onAssetViewChange={handleAssetViewModeChange}
+            />
+          </s.HeaderItem>
+        )}
         <s.HeaderItem>
           {window.assetsSearch === true && (
             <SearchInput
@@ -200,14 +220,7 @@ export const Assets = () => {
           </Tooltip>
         </s.HeaderItem>
         {config.scope && config.scope.span && (
-          <s.HeaderItem>
-            <AssetsViewScopeConfiguration
-              currentScope={config.scope}
-              onAssetViewChanged={(val) => {
-                setAssetScopeOption(val);
-              }}
-            />
-          </s.HeaderItem>
+          <s.HeaderItem>Assets filtered to current scope</s.HeaderItem>
         )}
       </s.Header>
       {renderContent()}