Merge pull request #472 from easyops-cn/steve/sidebar

fix(): add serviceflow

Author: weareoutman

bricks/ai-portal/src/elevo-sidebar/ChatHistory.tsx

@@ -17,7 +17,6 @@ import type {
   ActionType,
   SimpleActionType,
 } from "@next-bricks/basic/mini-actions";
-import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
 import { isEqual } from "lodash";
 import { K, t } from "./i18n.js";
 import {
@@ -32,11 +31,7 @@ import type { ConversationState } from "../shared/interfaces.js";
 import type { SidebarLink } from "./interfaces.js";
 import { NavLink } from "./NavLink.js";
 import { SectionTitle } from "./SectionTitle.js";
-
-const ADD_ICON: GeneralIconProps = {
-  lib: "fa",
-  icon: "plus",
-};
+import { ADD_ICON } from "./constants.js";
 
 export interface HistoryItem {
   conversationId: string;

bricks/ai-portal/src/elevo-sidebar/SpaceNav.tsx

@@ -2,9 +2,10 @@ import React, { useRef, useState } from "react";
 import classNames from "classnames";
 import { SectionTitle } from "./SectionTitle.js";
 import { K, t } from "./i18n.js";
-import { WrappedIcon, WrappedLink } from "./bricks.js";
+import { WrappedIcon, WrappedIconButton, WrappedLink } from "./bricks.js";
 import { NavLink } from "./NavLink.js";
 import type { SidebarLink } from "./interfaces.js";
+import { ADD_ICON } from "./constants.js";
 
 export interface SpaceNavProps {
   returnUrl: string;
@@ -17,13 +18,18 @@ export interface SpaceNavProps {
   spaceLinks?: SidebarLink[];
 }
 
+export interface SpaceNavComponentProps extends SpaceNavProps {
+  onAddServiceflow?: () => void;
+}
+
 export function SpaceNav({
   returnUrl,
   spaceDetail,
   spaceObjects,
   spaceServiceflows,
   spaceLinks,
-}: SpaceNavProps) {
+  onAddServiceflow,
+}: SpaceNavComponentProps) {
   const rootRef = useRef<HTMLDivElement | null>(null);
   const [objectsCollapsed, setObjectsCollapsed] = useState(false);
   const [serviceflowsCollapsed, setServiceflowsCollapsed] = useState(false);
@@ -80,7 +86,16 @@ export function SpaceNav({
               title={t(K.SERVICEFLOWS)}
               collapsed={serviceflowsCollapsed}
               onToggle={() => setServiceflowsCollapsed((prev) => !prev)}
-            />
+            >
+              <WrappedIconButton
+                icon={ADD_ICON}
+                variant="mini-light"
+                tooltip={t(K.CREATE_SERVICEFLOW)}
+                tooltipHoist={true}
+                className="button"
+                onClick={onAddServiceflow}
+              />
+            </SectionTitle>
             <ul className="items">
               {spaceServiceflows.map((obj, index) => (
                 <li key={index}>

bricks/ai-portal/src/elevo-sidebar/constants.ts

@@ -0,0 +1,6 @@
+import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
+
+export const ADD_ICON: GeneralIconProps = {
+  lib: "fa",
+  icon: "plus",
+};

bricks/ai-portal/src/elevo-sidebar/i18n.ts

@@ -18,6 +18,7 @@ export enum K {
   BUSINESS_OBJECTS = "BUSINESS_OBJECTS",
   SERVICEFLOWS = "SERVICEFLOWS",
   COLLABORATION_SPACES = "COLLABORATION_SPACES",
+  CREATE_SERVICEFLOW = "CREATE_SERVICEFLOW",
 }
 
 const en: Locale = {
@@ -38,6 +39,7 @@ const en: Locale = {
   [K.BUSINESS_OBJECTS]: "Business objects",
   [K.SERVICEFLOWS]: "Serviceflows",
   [K.COLLABORATION_SPACES]: "Collaboration spaces",
+  [K.CREATE_SERVICEFLOW]: "Create serviceflow",
 };
 
 const zh: Locale = {
@@ -58,6 +60,7 @@ const zh: Locale = {
   [K.BUSINESS_OBJECTS]: "业务对象",
   [K.SERVICEFLOWS]: "业务流",
   [K.COLLABORATION_SPACES]: "协作空间",
+  [K.CREATE_SERVICEFLOW]: "创建业务流",
 };
 
 export const NS = "bricks/ai-portal/elevo-sidebar";

bricks/ai-portal/src/elevo-sidebar/index.tsx

@@ -163,6 +163,13 @@ class ElevoSidebar extends ReactNextElement implements ElevoSidebarProps {
     this.#addProject.emit();
   };
 
+  @event({ type: "add.serviceflow" })
+  accessor #addServiceflow!: EventEmitter<void>;
+
+  #handleAddServiceflow = () => {
+    this.#addServiceflow.emit();
+  };
+
   #ref = createRef<ElevoSidebarRef>();
 
   /**
@@ -223,6 +230,7 @@ class ElevoSidebar extends ReactNextElement implements ElevoSidebarProps {
         onActionClick={this.#handleActionClick}
         onProjectActionClick={this.#handleProjectActionClick}
         onAddProject={this.#handleAddProject}
+        onAddServiceflow={this.#handleAddServiceflow}
       />
     );
   }
@@ -233,6 +241,7 @@ interface ElevoSidebarComponentProps extends ElevoSidebarProps {
   onActionClick: (detail: ActionClickDetail) => void;
   onProjectActionClick: (detail: ProjectActionClickDetail) => void;
   onAddProject: () => void;
+  onAddServiceflow: () => void;
 }
 
 function LegacyElevoSidebarComponent(
@@ -255,6 +264,7 @@ function LegacyElevoSidebarComponent(
     onActionClick,
     onProjectActionClick,
     onAddProject,
+    onAddServiceflow,
   }: ElevoSidebarComponentProps,
   ref: React.Ref<ElevoSidebarRef>
 ) {
@@ -367,7 +377,7 @@ function LegacyElevoSidebarComponent(
         </div>
         <div className="main">
           {scope === "space" ? (
-            <SpaceNav {...spaceNav!} />
+            <SpaceNav onAddServiceflow={onAddServiceflow} {...spaceNav!} />
           ) : (
             <>
               <WrappedLink className="new-chat" url={newChatUrl}>