fix: base node status T1328 (#2297)

* feat: enhance BaseNodeTree with ItemStatus component for app and workflow visibility

* refactor: update BaseNodeTree and QuickAction components for improved styling and layout consistency

* feat: add table update permission handling to BaseNodeTree component

Author: unofn

apps/nextjs-app/src/features/app/blocks/base/base-side-bar/BaseNodeTree.tsx

@@ -5,6 +5,7 @@ import type {
   IBaseNodeVo,
   IDuplicateBaseNodeRo,
   IBaseNodeWorkflowResourceMeta,
+  IBaseNodeAppResourceMeta,
 } from '@teable/openapi';
 import { BaseNodeResourceType } from '@teable/openapi';
 import { LocalStorageKeys, ReactQueryKeys } from '@teable/sdk/config';
@@ -146,6 +147,7 @@ export const BaseNodeTree = (props: IBaseNodeTreeProps) => {
   const canCreateWorkflow = !isCommunity && Boolean(permission?.['automation|create']);
   const canCreateApp = !isCommunity && Boolean(buildAppEnabled && permission?.['app|create']);
   const canCreateFolder = Boolean(permission?.['base|update']);
+  const canUpdateTable = Boolean(permission?.['table|update']);
 
   const canCreateResource =
     isEditMode &&
@@ -558,26 +560,40 @@ export const BaseNodeTree = (props: IBaseNodeTreeProps) => {
     }
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-      <div className="cursor-pointer" onClick={(e) => e.stopPropagation()}>
+      <div
+        className="flex size-4 shrink-0 cursor-pointer items-center justify-center"
+        onClick={(e) => e.stopPropagation()}
+      >
         {resourceType === BaseNodeResourceType.Table && (
           <EmojiPicker
-            className="flex size-4 items-center justify-center hover:bg-muted-foreground/60"
+            className="flex size-full items-center justify-center hover:bg-muted-foreground/60"
             onChange={(icon: string) => curdHooks.updateNode(nodeId, { icon })}
+            disabled={!canUpdateTable}
           >
-            {icon ? (
-              <Emoji emoji={icon} size={'1rem'} />
-            ) : (
-              <IconComponent className="size-4 shrink-0" />
-            )}
+            {icon ? <Emoji emoji={icon} size="1rem" /> : <IconComponent className="size-full" />}
           </EmojiPicker>
         )}
-        {resourceType !== BaseNodeResourceType.Table && (
-          <IconComponent className="size-4 shrink-0" />
-        )}
+        {resourceType !== BaseNodeResourceType.Table && <IconComponent className="size-full" />}
       </div>
     );
   };
 
+  const ItemStatus = ({ item }: { item: ItemInstance<TreeItemData> }) => {
+    const node = item.getItemData();
+    if (!node) return null;
+    const { resourceType, resourceMeta } = node;
+    const isWorkflowActive =
+      resourceType === BaseNodeResourceType.Workflow &&
+      (resourceMeta as IBaseNodeWorkflowResourceMeta)?.isActive;
+    const isAppPublished =
+      resourceType === BaseNodeResourceType.App &&
+      (resourceMeta as IBaseNodeAppResourceMeta)?.publicUrl;
+    if (isWorkflowActive || isAppPublished) {
+      return <span className="size-1.5 shrink-0 rounded-full bg-emerald-500" />;
+    }
+    return null;
+  };
+
   const renderEmpty = () => {
     if (isLoading) {
       return (
@@ -674,10 +690,8 @@ export const BaseNodeTree = (props: IBaseNodeTreeProps) => {
                             >
                               {item.getItemName()}
                             </span>
-                            {node.resourceType === BaseNodeResourceType.Workflow &&
-                              (node.resourceMeta as IBaseNodeWorkflowResourceMeta)?.isActive && (
-                                <span className="size-1.5 shrink-0 rounded-full bg-emerald-500" />
-                              )}
+
+                            <ItemStatus item={item} />
                           </div>
                           {
                             // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events

apps/nextjs-app/src/features/app/blocks/base/base-side-bar/QuickAction.tsx

@@ -111,11 +111,13 @@ export const QuickAction = ({ children }: React.PropsWithChildren) => {
                         }
                       }}
                     >
-                      {icon ? (
-                        <Emoji emoji={icon} size="1rem" className="size-4 shrink-0" />
-                      ) : IconComponent ? (
-                        <IconComponent className="size-4 shrink-0" />
-                      ) : null}
+                      <div className="flex size-4 shrink-0 items-center justify-center">
+                        {icon ? (
+                          <Emoji emoji={icon} size="1em" />
+                        ) : IconComponent ? (
+                          <IconComponent className="size-full" />
+                        ) : null}
+                      </div>
                       <span>{name}</span>
                     </CommandItem>
                   );

packages/openapi/src/base-node/types.ts

@@ -23,7 +23,10 @@ export const baseNodeTableResourceMetaSchema = defaultResourceMetaSchema.extend(
 
 export type IBaseNodeTableResourceMeta = z.infer<typeof baseNodeTableResourceMetaSchema>;
 
-export const baseNodeAppResourceMetaSchema = defaultResourceMetaSchema;
+export const baseNodeAppResourceMetaSchema = defaultResourceMetaSchema.extend({
+  publicUrl: z.string().nullable().optional(),
+  publishedVersion: z.number().nullable().optional(),
+});
 
 export type IBaseNodeAppResourceMeta = z.infer<typeof baseNodeAppResourceMetaSchema>;