feat: ADS Entity List Tree

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,76 @@
+import styled from "styled-components";
+import { Flex } from "../../..";
+
+/**
+ * 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;
+
+  :hover {
+    background-color: var(--ads-v2-colors-content-surface-hover-bg);
+  }
+`;
+
+export const EntityItemWrapper = styled(Flex)<{ "data-depth": number }>`
+  border-radius: var(--ads-v2-border-radius);
+  cursor: pointer;
+
+  padding-left: ${(props) => {
+    if (props["data-depth"] === 0) {
+      return 0;
+    }
+
+    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);
+  }
+`;

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

@@ -0,0 +1,73 @@
+import React, { useCallback } from "react";
+import type { EntityListTreeProps } from "./EntityListTree.types";
+import { Flex, Icon } from "../../..";
+import { EntityItem } from "../";
+import {
+  CollapseSpacer,
+  PaddingOverrider,
+  CollapseWrapper,
+  EntityItemWrapper,
+} from "./EntityListTree.styles";
+
+export function EntityListTree(props: EntityListTreeProps) {
+  const { onItemExpand } = props;
+
+  const handleOnExpandClick = useCallback(
+    (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      // Stop the event from bubbling up to the parent to avoid selection of the item
+      event.stopPropagation();
+      const id = event.currentTarget.getAttribute("data-itemid");
+
+      if (id) {
+        onItemExpand(id);
+      }
+    },
+    [onItemExpand],
+  );
+
+  const currentDepth = props.depth || 0;
+  const childrenDepth = currentDepth + 1;
+
+  return (
+    <Flex flex="1" flexDirection="column">
+      {props.items.map((item) => (
+        <Flex flex="1" flexDirection="column" key={item.id}>
+          <EntityItemWrapper
+            alignItems="center"
+            data-depth={currentDepth}
+            data-disabled={item.isDisabled || false}
+            data-selected={item.isSelected}
+            flexDirection="row"
+          >
+            {item.children ? (
+              <CollapseWrapper
+                data-itemid={item.id}
+                data-testid="entity-item-expand-icon"
+                onClick={handleOnExpandClick}
+              >
+                <Icon
+                  name={
+                    item.isExpanded ? "arrow-down-s-line" : "arrow-right-s-line"
+                  }
+                  size="md"
+                />
+              </CollapseWrapper>
+            ) : (
+              <CollapseSpacer />
+            )}
+            <PaddingOverrider>
+              <EntityItem {...item} />
+            </PaddingOverrider>
+          </EntityItemWrapper>
+          {item.children && item.isExpanded ? (
+            <EntityListTree
+              depth={childrenDepth}
+              items={item.children}
+              onItemExpand={onItemExpand}
+            />
+          ) : null}
+        </Flex>
+      ))}
+    </Flex>
+  );
+}

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

@@ -0,0 +1,12 @@
+import type { EntityItemProps } from "../EntityItem/EntityItem.types";
+
+export interface EntityListTreeItem extends EntityItemProps {
+  children?: EntityListTreeItem[];
+  isExpanded: boolean;
+}
+
+export interface EntityListTreeProps {
+  depth?: number;
+  items: EntityListTreeItem[];
+  onItemExpand: (id: string) => void;
+}

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

@@ -0,0 +1,2 @@
+export { EntityListTree } from "./EntityListTree";
+export { type EntityListTreeItem } from "./EntityListTree.types";

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

@@ -7,3 +7,4 @@ export { NoSearchResults } from "./NoSearchResults";
 export * from "./ExplorerContainer";
 export * from "./EntityItem";
 export { useEditableText } from "./Editable";
+export * from "./EntityListTree";

app/client/src/IDE/Components/EditableName/index.ts

@@ -1,3 +1,4 @@
 export { EditableName } from "./EditableName";
 export { RenameMenuItem } from "./RenameMenuItem";
 export { useIsRenaming } from "./useIsRenaming";
+export { useValidateEntityName } from "./useValidateEntityName";

app/client/src/IDE/Components/EditableName/useValidateEntityName.ts

@@ -10,7 +10,7 @@ import { getUsedActionNames } from "selectors/actionSelectors";
 import { isNameValid } from "utils/helpers";
 
 interface UseValidateEntityNameProps {
-  entityName: string;
+  entityName?: string;
   nameErrorMessage?: (name: string) => string;
 }
 
@@ -26,10 +26,10 @@ export function useValidateEntityName(props: UseValidateEntityNameProps) {
   );
 
   return useCallback(
-    (name: string): string | null => {
+    (name: string, oldName: string | undefined = entityName): string | null => {
       if (!name || name.trim().length === 0) {
         return createMessage(ACTION_INVALID_NAME_ERROR);
-      } else if (name !== entityName && !isNameValid(name, usedEntityNames)) {
+      } else if (name !== oldName && !isNameValid(name, usedEntityNames)) {
         return createMessage(nameErrorMessage, name);
       }
 

app/client/src/IDE/index.ts

@@ -48,6 +48,7 @@ export {
   EditableName,
   RenameMenuItem,
   useIsRenaming,
+  useValidateEntityName,
 } from "./Components/EditableName";
 
 /* ====================================================

app/client/src/actions/explorerActions.ts

@@ -1,13 +1,18 @@
 import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
 
-export const initExplorerEntityNameEdit = (actionId: string) => {
+export const initExplorerEntityNameEdit = (entityId: string) => {
   return {
     type: ReduxActionTypes.INIT_EXPLORER_ENTITY_NAME_EDIT,
     payload: {
-      id: actionId,
+      id: entityId,
     },
   };
 };
+export const endExplorerEntityNameEdit = () => {
+  return {
+    type: ReduxActionTypes.END_EXPLORER_ENTITY_NAME_EDIT,
+  };
+};
 
 /**
  * action that make explorer pin/unpin