feat: ADS Entity List Tree

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.tsx

@@ -1,5 +1,8 @@
 import React from "react";
-import { Button, Flex, Icon, Text } from "../../..";
+import { Button } from "../../../Button";
+import { Flex } from "../../../Flex";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
 import type { EmptyStateProps } from "./EmptyState.types";
 
 const EmptyState = ({ button, description, icon }: EmptyStateProps) => {

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.types.ts

@@ -1,4 +1,5 @@
-import { type IconNames, type ButtonKind } from "../../..";
+import type { IconNames } from "../../../Icon";
+import type { ButtonKind } from "../../../Button";
 
 export interface EmptyStateProps {
   icon: IconNames;

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.styles.ts

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Text } from "../../..";
+import { Text } from "../../../Text";
 
 export const EntityEditableName = styled(Text)`
   overflow: hidden;

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/EntityItem.tsx

@@ -1,5 +1,7 @@
 import React, { useMemo } from "react";
-import { ListItem, Spinner, Tooltip } from "../../..";
+import { ListItem } from "../../../List";
+import { Spinner } from "../../../Spinner";
+import { Tooltip } from "../../../Tooltip";
 
 import type { EntityItemProps } from "./EntityItem.types";
 import { EntityEditableName } from "./EntityItem.styles";
@@ -32,11 +34,21 @@ export const EntityItem = (props: EntityItemProps) => {
     onNameSave,
   );
 
+  // When in loading state, start icon becomes the loading icon
+  const startIcon = useMemo(() => {
+    if (isLoading) {
+      return <Spinner size="md" />;
+    }
+
+    return props.startIcon;
+  }, [isLoading, props.startIcon]);
+
   const inputProps = useMemo(
     () => ({
       onChange: handleTitleChange,
       onKeyUp: handleKeyUp,
       style: {
+        backgroundColor: "var(--ads-v2-color-bg)",
         paddingTop: 0,
         paddingBottom: 0,
         height: "32px",
@@ -46,14 +58,7 @@ export const EntityItem = (props: EntityItemProps) => {
     [handleKeyUp, handleTitleChange],
   );
 
-  const startIcon = useMemo(() => {
-    if (isLoading) {
-      return <Spinner size="md" />;
-    }
-
-    return props.startIcon;
-  }, [isLoading, props.startIcon]);
-
+  // Use List Item custom title prop to show the editable name
   const customTitle = useMemo(() => {
     return (
       <Tooltip
@@ -75,13 +80,23 @@ export const EntityItem = (props: EntityItemProps) => {
     );
   }, [editableName, inputProps, inputRef, inEditMode, validationError]);
 
+  // Do not show right control if the visibility is hover and the item is in edit mode
+  const rightControl = useMemo(() => {
+    if (props.rightControlVisibility === "hover" && inEditMode) {
+      return null;
+    }
+
+    return props.rightControl;
+  }, [inEditMode, props.rightControl, props.rightControlVisibility]);
+
   return (
     <ListItem
       {...props}
       className={clx("t--entity-item", props.className)}
       customTitleComponent={customTitle}
       data-testid={`t--entity-item-${props.title}`}
       id={"entity-" + props.id}
+      rightControl={rightControl}
       startIcon={startIcon}
     />
   );

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/index.ts

@@ -1 +1,2 @@
 export { EntityItem } from "./EntityItem";
+export type { EntityItemProps } from "./EntityItem.types";

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.stories.tsx

@@ -0,0 +1,161 @@
+/* eslint-disable no-console */
+import React, { useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { EntityListTree } from "./EntityListTree";
+import type {
+  EntityListTreeItem,
+  EntityListTreeProps,
+} from "./EntityListTree.types";
+import { ExplorerContainer } from "../ExplorerContainer";
+import { Flex, Icon } from "../../..";
+import { noop } from "lodash";
+
+const meta: Meta<typeof EntityListTree> = {
+  title: "ADS/Templates/Entity Explorer/Entity List Tree",
+  component: EntityListTree,
+};
+
+export default meta;
+
+const onClick = noop;
+const nameEditorConfig = {
+  canEdit: true,
+  isEditing: false,
+  isLoading: false,
+  onEditComplete: noop,
+  onNameSave: noop,
+  validateName: () => null,
+};
+
+const Tree: EntityListTreeProps["items"] = [
+  {
+    startIcon: <Icon name="apps-line" />,
+    id: "1",
+    title: "Parent 1",
+    isExpanded: true,
+    onClick,
+    nameEditorConfig,
+    children: [
+      {
+        startIcon: <Icon name="apps-line" />,
+        id: "1.1",
+        title: "Child 1",
+        isExpanded: false,
+        isSelected: true,
+        onClick,
+        nameEditorConfig,
+        children: [
+          {
+            startIcon: <Icon name="apps-line" />,
+            id: "1.1.1",
+            title: "Grandchild 1",
+            isExpanded: false,
+            onClick,
+            nameEditorConfig,
+          },
+          {
+            startIcon: <Icon name="apps-line" />,
+            id: "1.1.2",
+            isDisabled: true,
+            title: "Grandchild 2",
+            isExpanded: false,
+            onClick,
+            nameEditorConfig,
+          },
+        ],
+      },
+      {
+        startIcon: <Icon name="apps-line" />,
+        id: "1.2",
+        title: "Child 2",
+        isExpanded: false,
+        onClick,
+        nameEditorConfig,
+      },
+    ],
+  },
+  {
+    startIcon: <Icon name="apps-line" />,
+    id: "2",
+    title: "Parent 2",
+    isExpanded: false,
+    onClick,
+    nameEditorConfig,
+  },
+];
+
+const treeUpdate = (
+  items: EntityListTreeProps["items"],
+  updater: (item: EntityListTreeItem) => EntityListTreeItem,
+) => {
+  return items.map((item): EntityListTreeItem => {
+    return {
+      ...updater(item),
+      children: item.children ? treeUpdate(item.children, updater) : undefined,
+    };
+  });
+};
+
+const Template = (props: { outsideSelection: string }) => {
+  const [expanded, setExpanded] = React.useState<Record<string, boolean>>({});
+  const [selected, setSelected] = React.useState<string | null>(
+    props.outsideSelection,
+  );
+  const [editing, setEditing] = React.useState<string | null>(null);
+
+  useEffect(
+    function handleSyncOfSelection() {
+      setSelected(props.outsideSelection);
+    },
+    [props.outsideSelection],
+  );
+
+  const onExpandClick = (id: string) => {
+    setExpanded((prev) => ({ ...prev, [id]: !Boolean(prev[id]) }));
+  };
+
+  const onItemSelect = (id: string) => {
+    setSelected(id);
+  };
+
+  const onItemEdit = (id: string) => {
+    setEditing(id);
+  };
+
+  const completeEdit = () => {
+    setEditing(null);
+  };
+
+  const updatedTree = treeUpdate(Tree, (item) => ({
+    ...item,
+    isExpanded: Boolean(expanded[item.id]),
+    isSelected: item.id === selected,
+    onClick: () => onItemSelect(item.id),
+    onDoubleClick: () => onItemEdit(item.id),
+    nameEditorConfig: {
+      canEdit: true,
+      isEditing: item.id === editing,
+      isLoading: false,
+      onEditComplete: completeEdit,
+      onNameSave: noop,
+      validateName: () => null,
+    },
+  }));
+
+  return (
+    <Flex bg="white" overflow="hidden" width="400px">
+      <ExplorerContainer borderRight="STANDARD" height="500px" width="255px">
+        <Flex flexDirection="column" gap="spaces-2" p="spaces-3">
+          <EntityListTree items={updatedTree} onItemExpand={onExpandClick} />
+        </Flex>
+      </ExplorerContainer>
+    </Flex>
+  );
+};
+
+export const Basic = Template.bind({}) as StoryObj;
+
+Basic.args = {
+  outsideSelection: "1",
+};

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityListTree/EntityListTree.styles.ts

@@ -0,0 +1,68 @@
+import styled from "styled-components";
+import { Flex } from "../../../Flex";
+
+/**
+ * This is used to add a spacing when collapse icon is not present
+ **/
+export const CollapseSpacer = styled.div`
+  width: 17px;
+`;
+
+export const PaddingOverrider = styled.div`
+  width: 100%;
+
+  & > div {
+    /* Override the padding of the entity item since collapsible icon can be on the left
+         * By default the padding on the left is 8px, so we need to reduce it to 4px
+         **/
+    padding-left: 4px;
+  }
+`;
+
+export const CollapseWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 16px;
+  width: 16px;
+  border-radius: var(--ads-v2-border-radius);
+  cursor: pointer;
+`;
+
+export const EntityItemWrapper = styled(Flex)<{ "data-depth": number }>`
+  border-radius: var(--ads-v2-border-radius);
+  cursor: pointer;
+
+  padding-left: ${(props) => {
+    return 4 + props["data-depth"] * 10;
+  }}px;
+
+  &[data-selected="true"] {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
+  /* disabled style */
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: var(--ads-v2-opacity-disabled);
+    background-color: var(--ads-v2-colors-content-surface-default-bg);
+  }
+
+  &:hover {
+    background-color: var(--ads-v2-colors-content-surface-hover-bg);
+  }
+
+  &:active {
+    background-color: var(--ads-v2-colors-content-surface-active-bg);
+  }
+
+  /* Focus styles */
+
+  &:focus-visible {
+    outline: var(--ads-v2-border-width-outline) solid
+      var(--ads-v2-color-outline);
+    outline-offset: var(--ads-v2-offset-outline);
+  }
+`;