@ant-design/icons#BranchesOutlined TypeScript Examples

export function ActionAttribute({ attribute, value }: { attribute: string; value?: string }): JSX.Element {
    const icon =
        attribute === 'text' ? (
            <FontSizeOutlined />
        ) : attribute === 'href' ? (
            <LinkOutlined />
        ) : attribute === 'selector' ? (
            <BranchesOutlined />
        ) : (
            <FormOutlined />
        )

    const text =
        attribute === 'href' ? (
            <a href={value} target="_blank" rel="noopener noreferrer">
                {value}
            </a>
        ) : attribute === 'selector' ? (
            value ? (
                <span style={{ fontFamily: 'monospace' }}>
                    <SelectorString value={value} />
                </span>
            ) : (
                <span>
                    Could not generate a unique selector for this element. Please instrument it with a unique{' '}
                    <code>id</code> or <code>data-attr</code> attribute.
                </span>
            )
        ) : (
            value
        )

    return (
        <div key={attribute} style={{ marginBottom: 10, paddingLeft: 24, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 2, top: 3, color: 'hsl(240, 14%, 50%)' }}>{icon}</div>
            <span>{text}</span>
        </div>
    )
}

export function AnyRouteEditor({
  nodeUid,
}: EditorComponentProps): React.ReactElement {
  const node = useBuilderNode<AppRouteProperties>({ nodeUid });
  /**
   * 提示：使用构件的属性配置来呈现该构件的关键 UI 特征。
   * 例如：对于按钮构件，根据 `buttonType` 来显示对应的背景色。
   */
  // const { someProps } = node.$$parsedProperties;
  return (
    <EditorContainer nodeUid={nodeUid}>
      <div className={styles.wrapper}>
        <div className={styles.icon}>
          <BranchesOutlined />
        </div>
        <div className={styles.name}>{node.alias}</div>
      </div>
    </EditorContainer>
  );
}

export function RoutesView({
  handleRouteSelect,
}: RoutesViewProps): React.ReactElement {
  const { t } = useTranslation(NS_NEXT_BUILDER);
  const rootNode = useBuilderNode({ isRoot: true });
  const { routeList, onRouteSelect } = useBuilderUIContext();
  const [q, setQ] = useState<string>("");

  const fullRouteTree = useMemo(
    () =>
      generateRouteTree({
        data: routeList,
      }),
    [routeList]
  );

  const filteredRouteTree = useMemo(
    () => filterNodesFactory(q.trim().toLowerCase())(fullRouteTree),
    [fullRouteTree, q]
  );

  const handleSelect = (selectedProps: BuilderRouteNode): void => {
    onRouteSelect?.(selectedProps);
    handleRouteSelect?.(selectedProps);
  };

  const handleQChange = (q: string): void => {
    setQ(q);
  };

  return (
    <SearchableTree
      list={filteredRouteTree}
      defaultSelectedKeys={rootNode ? [rootNode.id] : []}
      icon={<BranchesOutlined />}
      field="alias"
      searchPlaceholder={t(K.SEARCH_ROUTE)}
      onSelect={handleSelect}
      onQChange={handleQChange}
      customClassName={styles.customTree}
    />
  );
}

describe("SearchableTree", () => {
  it("should work", async () => {
    const handleSelect = jest.fn();
    const handleQChange = jest.fn();
    const wrapper = mount(
      <SearchableTree
        list={list}
        defaultSelectedKeys={["R-01"]}
        icon={<BranchesOutlined />}
        field="alias"
        onSelect={handleSelect}
        onQChange={handleQChange}
      />
    );
    await act(async () => {
      await (global as any).flushPromises();
    });
    expect(wrapper.find(Tree).length).toBe(1);
    wrapper.find(Tree).invoke("onSelect")([], {
      node: {
        props: {
          id: "R-03",
        },
      },
    } as any);
    expect(handleSelect).toBeCalled();
    await act(async () => {
      wrapper.find(SearchComponent).invoke("onSearch")("detail");
      await (global as any).flushPromises();
    });
    wrapper.update();
    expect(wrapper.find(".matchedStr").length).toBe(2);
    await act(async () => {
      wrapper.find(SearchComponent).invoke("onSearch")(" ");
      await (global as any).flushPromises();
    });
    wrapper.update();
    expect(wrapper.find(".matchedStr").length).toBe(0);
  });
});

ConditionCol: FC<{
  condition: ChartFilterCondition;
  fields: ChartDataSectionField[];
  onRelationChange: (relation?: ChartFilterCondition) => void;
}> = ({ condition, fields, onRelationChange }) => {
  const onAddSubRelation = () => {
    const newCondition = new ConditionBuilder(condition)
      .setOperator(FilterRelationType.AND)
      .asRelation(condition.value, [
        new ChartFilterCondition(),
        new ChartFilterCondition(),
      ]);
    onRelationChange(newCondition);
  };

  const onDeleteRelation = () => {
    onRelationChange(undefined);
  };

  const handleOperatorChange = operator => {
    const newCondition = new ConditionBuilder(condition)
      .setOperator(operator)
      .asRelation();
    onRelationChange(newCondition);
  };

  const handleConditionChange = value => {
    const newCondition = new ConditionBuilder(condition)
      .setValue(value)
      .asRelation();
    onRelationChange(newCondition);
  };

  if (condition.type === FilterConditionType.Relation) {
    return (
      <StyledRelationCol>
        <Row>
          <OperatorCol
            operator={condition.operator}
            onOperatorChange={handleOperatorChange}
          />
          <MinusCircleOutlined onClick={onDeleteRelation} />
        </Row>
        <Row>
          <RelationTypeFilter
            condition={condition}
            fields={fields}
            showOperator={false}
            onRelationChange={onRelationChange}
          />
        </Row>
      </StyledRelationCol>
    );
  }

  return (
    <StyledRelationCol>
      <Row>
        <Select
          value={condition?.value as string}
          onChange={handleConditionChange}
        >
          {fields.map(c => (
            <Select.Option value={c.colName}>
              {getColumnRenderName(c)}
            </Select.Option>
          ))}
        </Select>
        <BranchesOutlined onClick={onAddSubRelation} />
      </Row>
    </StyledRelationCol>
  );
}

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

export function BuilderToolbar(): React.ReactElement {
  const { t } = useTranslation(NS_NEXT_BUILDER);
  const enableLayerView = React.useMemo(
    () => getRuntime().getFeatureFlags()["next-builder-layer-view"],
    []
  );

  const [libsDropdownVisible, setLibsDropdownVisible] = useState<{
    [key in typeof LayerType[keyof typeof LayerType]]: boolean;
  }>({
    [LayerType.LAYOUT]: false,
    [LayerType.WIDGET]: false,
    [LayerType.BRICK]: false,
  });

  const { wrapperNode } = useBuilderData();

  const {
    onCurrentRouteClick,
    onCurrentTemplateClick,
    onCurrentSnippetClick,
    onBuildAndPush,
    onPreview,
    dataType,
    fullscreen,
    setFullscreen,
    onWorkbenchClose,
    hiddenWrapper,
    setHiddenWrapper,
  } = useBuilderUIContext();

  const rootNode = useBuilderNode({ isRoot: true });

  const handleRouteClick = (): void => {
    onCurrentRouteClick?.(rootNode as BuilderRouteNode);
  };

  const handleTemplateClick = (): void => {
    onCurrentTemplateClick?.(rootNode as BuilderCustomTemplateNode);
  };

  const handleSnippetClick = (): void => {
    onCurrentSnippetClick?.(rootNode as BuilderSnippetNode);
  };

  const handlePreview = (): void => {
    onPreview?.();
  };

  const handleBuildAndPush = (): void => {
    onBuildAndPush?.();
  };

  const handleToggleFullscreen = React.useCallback(() => {
    setFullscreen((prev) => !prev);
  }, [setFullscreen]);

  const handleClose = (): void => {
    onWorkbenchClose?.();
  };

  const divider = useMemo(
    () => <Divider type="vertical" style={{ height: 25 }} />,
    []
  );

  return (
    <div className={styles.toolbarContainer}>
      <div className={styles.toolbarLeft}>
        {dataType === BuilderDataType.SNIPPET ? (
          <Tooltip title={t(K.VIEW_SNIPPET)} placement="bottomLeft">
            <a
              className={shareStyles.tabLink}
              role="button"
              onClick={handleSnippetClick}
              data-testid="view-snippet"
            >
              <BlockOutlined />
            </a>
          </Tooltip>
        ) : dataType === BuilderDataType.CUSTOM_TEMPLATE ? (
          <Tooltip title={t(K.VIEW_TEMPLATE)} placement="bottomLeft">
            <a
              className={shareStyles.tabLink}
              role="button"
              onClick={handleTemplateClick}
              data-testid="view-template"
            >
              <BlockOutlined />
            </a>
          </Tooltip>
        ) : (
          <Tooltip title={t(K.VIEW_ROUTE)} placement="bottomLeft">
            <a
              className={shareStyles.tabLink}
              role="button"
              onClick={handleRouteClick}
              data-testid="view-route"
            >
              <BranchesOutlined />
            </a>
          </Tooltip>
        )}
        <RootNodeSelect />
      </div>
      <div className={styles.toolbarRight}>
        {wrapperNode ? (
          <Switch
            checkedChildren="显示布局"
            unCheckedChildren="隐藏布局"
            checked={hiddenWrapper}
            onChange={setHiddenWrapper}
            size="small"
            style={{
              marginRight: 10,
              top: -1,
            }}
          />
        ) : null}
        {enableLayerView && (
          <>
            <LibraryDropdown
              menuItems={layoutMenus}
              type={LayerType.LAYOUT}
              onVisbleChange={(visible) =>
                setLibsDropdownVisible({
                  ...libsDropdownVisible,
                  [LayerType.LAYOUT]: visible,
                })
              }
            >
              <Tooltip
                title={t(K.LAYOUT_LIBRARY)}
                placement="bottomRight"
                overlayStyle={{
                  // Hide tooltip when dropdown is open.
                  display: libsDropdownVisible[LayerType.LAYOUT]
                    ? "none"
                    : undefined,
                }}
              >
                <Button
                  type="link"
                  size="small"
                  className={shareStyles.tabLink}
                  style={{ marginRight: "10px" }}
                >
                  <LayoutOutlined />
                </Button>
              </Tooltip>
            </LibraryDropdown>

            <LibraryDropdown
              menuItems={widgetMenus}
              type={LayerType.WIDGET}
              onVisbleChange={(visible) =>
                setLibsDropdownVisible({
                  ...libsDropdownVisible,
                  [LayerType.WIDGET]: visible,
                })
              }
            >
              <Tooltip
                title={t(K.WIDGET_LIBRARY)}
                placement="bottomRight"
                overlayStyle={{
                  display: libsDropdownVisible[LayerType.WIDGET]
                    ? "none"
                    : undefined,
                }}
              >
                <Button
                  type="link"
                  size="small"
                  className={shareStyles.tabLink}
                  style={{ marginRight: "10px" }}
                >
                  <GoldOutlined />
                </Button>
              </Tooltip>
            </LibraryDropdown>
          </>
        )}
        <LibraryDropdown
          menuItems={brickMenus}
          type={LayerType.BRICK}
          onVisbleChange={(visible) =>
            setLibsDropdownVisible({
              ...libsDropdownVisible,
              [LayerType.BRICK]: visible,
            })
          }
        >
          <Tooltip
            title={t(K.BRICK_LIBRARY)}
            placement="bottomRight"
            overlayStyle={{
              display: libsDropdownVisible[LayerType.BRICK]
                ? "none"
                : undefined,
            }}
          >
            <Button
              type="link"
              size="small"
              style={{ marginRight: "10px" }}
              className={shareStyles.tabLink}
            >
              <PlusOutlined />
            </Button>
          </Tooltip>
        </LibraryDropdown>
        {divider}
        <Tooltip title={t(K.BUILD_AND_PUSH_TOOLTIP)} placement="bottomRight">
          <a
            className={shareStyles.tabLink}
            role="button"
            onClick={handleBuildAndPush}
            data-testid="build-and-push"
          >
            <ApiOutlined />
          </a>
        </Tooltip>
        <Tooltip title={t(K.PREVIEW)} placement="bottomRight">
          <a
            className={shareStyles.tabLink}
            role="button"
            onClick={handlePreview}
            data-testid="preview"
          >
            <CaretRightOutlined />
          </a>
        </Tooltip>
        {divider}
        <SettingDropdown />
        {!fullscreen && (
          <Tooltip
            title={t(fullscreen ? K.EXIT_FULLSCREEN : K.ENTER_FULLSCREEN)}
            placement="bottomRight"
          >
            <a
              className={shareStyles.tabLink}
              role="button"
              onClick={handleToggleFullscreen}
              data-testid="toggle-fullscreen"
            >
              {fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
            </a>
          </Tooltip>
        )}
        <Tooltip title={t(K.CLOSE)} placement="bottomRight">
          <a
            className={shareStyles.tabLink}
            role="button"
            onClick={handleClose}
            data-testid="workbench-close"
          >
            <CloseOutlined />
          </a>
        </Tooltip>
      </div>
    </div>
  );
}

export function StoryboardTreeNode({
  nodeUid,
  mountPoint,
  level,
}: StoryboardTreeNodeProps): React.ReactElement {
  const node = useBuilderNode({ nodeUid });
  const { highlightNodes } = useBuilderUIContext();
  const hoverNodeUid = useHoverNodeUid();
  const mountPoints = useBuilderNodeMountPoints({
    nodeUid,
    doNotExpandTemplates: true,
  });
  const parentNode = useBuilderParentNode(nodeUid);
  const siblingGroups = useBuilderGroupedChildNodes({
    nodeUid: parentNode.$$uid,
    doNotExpandTemplates: true,
  });
  const manager = useBuilderDataManager();
  const canDrop = useCanDrop();
  const contextMenuStatus = useBuilderContextMenuStatus();
  const outlineApplicable = node.brick === "basic-bricks.easy-view";
  const outlineEnabled = useOutlineEnabled(node.instanceId, !outlineApplicable);

  const handleClick = useCallback(() => {
    manager.nodeClick(node);
  }, [manager, node]);

  const hover = useMemo(
    () => hoverNodeUid === nodeUid,
    [hoverNodeUid, nodeUid]
  );

  const [{ isDragging }, dragRef, draggingPreviewRef] = useDrag({
    item: {
      type: StoryboardTreeTransferType.NODE,
      nodeUid,
      nodeId: node.id,
      nodeInstanceId: node.instanceId,
      nodeType: node.type,
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [{ isDraggingOverCurrent }, dropRef] = useDrop({
    accept: StoryboardTreeTransferType.NODE,
    canDrop: (item: DraggingNodeItem) =>
      canDrop(item.nodeUid, nodeUid) &&
      (Number(isRouteNode(node)) ^
        Number(isRouteNode({ type: item.nodeType } as any))) ===
        0,
    collect: (monitor) => ({
      isDraggingOverCurrent: monitor.isOver() && monitor.canDrop(),
    }),
    drop: (item, monitor) => {
      if (!monitor.didDrop()) {
        let droppingIndex = -1;
        for (const group of siblingGroups) {
          droppingIndex = group.childNodes.findIndex(
            (n) => n.$$uid === nodeUid
          );
          if (droppingIndex > -1) {
            // When dropping a node on another node,
            // we say it drops *under* the target node.
            // So add `droppingIndex` by 1.
            droppingIndex += 1;
            break;
          }
        }
        handleDropOnNode({
          draggingItem: item,
          droppingMountPoint: mountPoint,
          droppingParentNode: parentNode,
          droppingSiblingGroups: siblingGroups,
          droppingIndex,
          manager,
        });
      }
    },
  });

  const handleContextMenu = useCallback(
    (event: React.MouseEvent) => {
      event.preventDefault();
      manager.contextMenuChange({
        active: true,
        node,
        x: event.clientX,
        y: event.clientY,
      });
    },
    [manager, node]
  );

  let icon: JSX.Element;
  let displayType = DisplayType.DEFAULT;

  if (node.type === "provider" || node.bg) {
    displayType = DisplayType.PROVIDER;
    icon = <DatabaseFilled />;
  } else if (node.portal) {
    displayType = DisplayType.PORTAL;
    icon = <MessageFilled />;
  } else if (isRouteNode(node)) {
    displayType = DisplayType.ROUTE;
    icon = <BranchesOutlined />;
  }

  const handleMouseEnter = useCallback((): void => {
    const prevUid = manager.getHoverNodeUid();
    if (prevUid !== node.$$uid) {
      manager.setHoverNodeUid(node.$$uid);
    }
  }, [manager, node]);

  const handleMouseLeave = useCallback((): void => {
    const prevUid = manager.getHoverNodeUid();
    if (prevUid === node.$$uid) {
      manager.setHoverNodeUid(undefined);
    }
  }, [manager, node]);

  const handleOutlineToggle = useCallback(
    (event: React.MouseEvent) => {
      event.stopPropagation();
      manager.toggleOutline(node.instanceId);
    },
    [manager, node]
  );

  return (
    <li
      className={classNames(
        styles.treeNode,
        {
          [styles.dragging]: isDragging,
          [styles.draggingNodeOverCurrent]: isDraggingOverCurrent,
        },
        styles[displayType]
      )}
      ref={draggingPreviewRef}
    >
      <div
        className={classNames(styles.nodeNameWrapper, {
          [styles.highlightNode]: highlightNodes.has(nodeUid),
          [styles.nodeNameWrapperHover]:
            hover ||
            (contextMenuStatus.active &&
              contextMenuStatus.node.$$uid === nodeUid),
        })}
        style={{
          paddingLeft: level * treeViewPaddingUnit,
        }}
        onClick={handleClick}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        onContextMenu={handleContextMenu}
        ref={(node) => dragRef(dropRef(node))}
      >
        {icon && <div className={styles.icon}>{icon}</div>}
        <div className={styles.nodeName} title={node.alias}>
          {node.alias}
        </div>
        {outlineApplicable && (
          <div
            className={classNames(styles.outlineToggle, {
              [styles.outlineEnabled]: outlineEnabled,
            })}
            onClick={handleOutlineToggle}
          >
            grid
          </div>
        )}
      </div>
      {mountPoints.length > 0 && (
        <ul className={styles.mountPointList}>
          {mountPoints.map((childMountPoint) => (
            <StoryboardTreeMountPoint
              level={level + 1}
              key={childMountPoint}
              nodeUid={nodeUid}
              mountPoint={childMountPoint}
            />
          ))}
        </ul>
      )}
      <div
        className={styles.dropCursor}
        style={{
          left: level * treeViewPaddingUnit,
        }}
      />
    </li>
  );
}

WidgetActionDropdown: React.FC<WidgetActionDropdownProps> = memo(
  ({ widget }) => {
    const { editing: boardEditing } = useContext(BoardContext);

    const widgetAction = useWidgetAction();
    const dataChart = useContext(WidgetChartContext)!;
    const t = useI18NPrefix(`viz.widget.action`);
    const menuClick = useCallback(
      ({ key }) => {
        widgetAction(key, widget);
      },
      [widgetAction, widget],
    );
    const getAllList = useCallback(() => {
      const allWidgetActionList: WidgetActionListItem<widgetActionType>[] = [
        {
          key: 'refresh',
          label: t('refresh'),
          icon: <SyncOutlined />,
        },
        {
          key: 'fullScreen',
          label: t('fullScreen'),
          icon: <FullscreenOutlined />,
        },
        {
          key: 'edit',
          label: t('edit'),
          icon: <EditOutlined />,
        },
        {
          key: 'delete',
          label: t('delete'),
          icon: <DeleteOutlined />,
          danger: true,
        },

        {
          key: 'info',
          label: t('info'),
          icon: <InfoOutlined />,
        },
        {
          key: 'lock',
          label: t('lock'),
          icon: <LockOutlined />,
        },

        {
          key: 'makeLinkage',
          label: t('makeLinkage'),
          icon: <LinkOutlined />,
          divider: true,
        },
        {
          key: 'closeLinkage',
          label: t('closeLinkage'),
          icon: <CloseCircleOutlined />,
          danger: true,
        },
        {
          key: 'makeJump',
          label: t('makeJump'),
          icon: <BranchesOutlined />,
          divider: true,
        },
        {
          key: 'closeJump',
          label: t('closeJump'),
          icon: <CloseCircleOutlined />,
          danger: true,
        },
      ];
      return allWidgetActionList;
    }, [t]);
    const actionList = useMemo(() => {
      return (
        getWidgetActionList({
          allList: getAllList(),
          widget,
          boardEditing,
          chartGraphId: dataChart?.config?.chartGraphId,
        }) || []
      );
    }, [boardEditing, dataChart?.config?.chartGraphId, getAllList, widget]);
    const dropdownList = useMemo(() => {
      const menuItems = actionList.map(item => {
        return (
          <React.Fragment key={item.key}>
            {item.divider && <Menu.Divider />}
            <Menu.Item
              danger={item.danger}
              icon={item.icon}
              disabled={item.disabled}
              key={item.key}
            >
              {item.label}
            </Menu.Item>
          </React.Fragment>
        );
      });

      return <Menu onClick={menuClick}>{menuItems}</Menu>;
    }, [actionList, menuClick]);
    if (actionList.length === 0) {
      return null;
    }
    return (
      <Dropdown
        className="widget-tool-dropdown"
        overlay={dropdownList}
        placement="bottomCenter"
        trigger={['click']}
        arrow
      >
        <Button icon={<EllipsisOutlined />} type="link" />
      </Dropdown>
    );
  },
)

DataModelNode: FC<{
  node: Column;
  className?: string;
  onNodeTypeChange: (type: any, name: string) => void;
  onMoveToHierarchy: (node: Column) => void;
  onCreateHierarchy?: (node: Column) => void;
  onDeleteFromHierarchy?: (node: Column) => void;
}> = memo(
  ({
    node,
    className,
    onCreateHierarchy,
    onMoveToHierarchy,
    onNodeTypeChange,
    onDeleteFromHierarchy,
  }) => {
    const t = useI18NPrefix('view.model');
    const tg = useI18NPrefix('global');
    const [isHover, setIsHover] = useState(false);
    const hasCategory = true;

    const renderNode = (node, isDragging) => {
      let icon;
      switch (node.type) {
        case DataViewFieldType.NUMERIC:
          icon = (
            <NumberOutlined style={{ alignSelf: 'center', color: SUCCESS }} />
          );
          break;
        case DataViewFieldType.STRING:
          icon = (
            <FieldStringOutlined style={{ alignSelf: 'center', color: INFO }} />
          );
          break;
        case DataViewFieldType.DATE:
          icon = (
            <CalendarOutlined style={{ alignSelf: 'center', color: INFO }} />
          );
          break;
        default:
          icon = (
            <FileUnknownOutlined
              style={{ alignSelf: 'center', color: WARNING }}
            />
          );
          break;
      }

      const isAllowCreateHierarchy = node => {
        return ALLOW_COMBINE_COLUMN_TYPES.includes(node.type);
      };

      return (
        <div
          className="content"
          onMouseEnter={() => {
            setIsHover(true);
          }}
          onMouseLeave={() => {
            setIsHover(false);
          }}
        >
          <Dropdown
            trigger={['click']}
            overlay={
              <Menu
                selectedKeys={[node.type, `category-${node.category}`]}
                className="datart-schema-table-header-menu"
                onClick={({ key }) => onNodeTypeChange(key, node?.name)}
              >
                {Object.values(DataViewFieldType).map(t => (
                  <Menu.Item key={t}>
                    {tg(`columnType.${t.toLowerCase()}`)}
                  </Menu.Item>
                ))}
                {hasCategory && (
                  <>
                    <Menu.Divider />
                    <Menu.SubMenu
                      key="categories"
                      title={t('category')}
                      popupClassName="datart-schema-table-header-menu"
                    >
                      {Object.values(ColumnCategories).map(t => (
                        <Menu.Item key={`category-${t}`}>
                          {tg(`columnCategory.${t.toLowerCase()}`)}
                        </Menu.Item>
                      ))}
                    </Menu.SubMenu>
                  </>
                )}
              </Menu>
            }
          >
            <Tooltip
              title={hasCategory ? t('typeAndCategory') : t('category')}
              placement="left"
            >
              <StyledIW fontSize={FONT_SIZE_TITLE}>{icon}</StyledIW>
            </Tooltip>
          </Dropdown>
          <span>{node.name}</span>
          <div className="action">
            {isHover &&
              !isDragging &&
              isAllowCreateHierarchy(node) &&
              onCreateHierarchy && (
                <Tooltip title={t('newHierarchy')}>
                  <Button
                    type="link"
                    onClick={() => onCreateHierarchy(node)}
                    icon={<BranchesOutlined />}
                  />
                </Tooltip>
              )}
            {isHover && !isDragging && isAllowCreateHierarchy(node) && (
              <Tooltip title={t('addToHierarchy')}>
                <Button
                  type="link"
                  onClick={() => onMoveToHierarchy(node)}
                  icon={<SisternodeOutlined />}
                />
              </Tooltip>
            )}
            {isHover && !isDragging && onDeleteFromHierarchy && (
              <Tooltip title={t('delete')}>
                <Button
                  type="link"
                  onClick={() => onDeleteFromHierarchy(node)}
                  icon={<DeleteOutlined />}
                />
              </Tooltip>
            )}
          </div>
        </div>
      );
    };

    return (
      <Draggable key={node?.name} draggableId={node?.name} index={node?.index}>
        {(draggableProvided, draggableSnapshot) => (
          <StyledDataModelNode
            isDragging={draggableSnapshot.isDragging}
            className={className}
            style={draggableProvided.draggableProps.style}
            ref={draggableProvided.innerRef}
            {...draggableProvided.draggableProps}
            {...draggableProvided.dragHandleProps}
          >
            {renderNode(node, draggableSnapshot.isDragging)}
          </StyledDataModelNode>
        )}
      </Draggable>
    );
  },
)