@abtnode/ux 1.16.26-beta-351de484 → 1.16.26-beta-63f52a83

package/es/blocklet/component/component-cell.js

@@ -9,24 +9,15 @@ import RestartIcon from '@mui/icons-material/Replay';
 import ReloadIcon from '@mui/icons-material/Autorenew';
 import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
 import { Icon } from '@iconify/react';
-import InfoRow from '@arcblock/ux/lib/InfoRow';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
 import normalizePathPrefix from '@abtnode/util/lib/normalize-path-prefix';
 import { getComponentMissingConfigs, getDisplayName, isInProgress, hasStartEngine } from '@blocklet/meta/lib/util';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import { useDeletingBlockletContext } from '../../contexts/deleting-blocklets';
-import Tag from '../../tag';
 import ComponentConfiguration from './configuration';
-import { formatPerson, formatToDatetime } from '../../util';
-import DidAddress from '../../did-address';
-import BlockletSource from '../blocklet-source';
 import BlockletStatus from '../status';
-import BlockletVersion from '../version';
 import Confirm from '../../confirm';
 import BlockletBundleAvatar from '../bundle-avatar';
 import BlockletMode from '../mode';
@@ -34,56 +25,9 @@ import DeleteComponent from './delete';
 import StartComponent from './start';
 import Line from './line';
 import Actions from '../../actions';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getEngineRows = (engine, t) => {
-  if (!engine) {
-    return [];
-  }
-  return [{
-    name: t('common.name'),
-    value: engine.displayName
-  }, {
-    name: t('common.description'),
-    value: engine.description
-  }, {
-    name: t('common.version'),
-    value: /*#__PURE__*/_jsx(Tag, {
-      children: engine.version
-    })
-  }];
-};
-const getSourceInfo = blocklet => {
-  const {
-    source,
-    deployedFrom,
-    bundleSource
-  } = blocklet;
-  if (source) {
-    return {
-      source,
-      deployedFrom
-    };
-  }
-  if (!bundleSource) {
-    return {
-      source: 'upload',
-      deployedFrom
-    };
-  }
-  if (bundleSource.url) {
-    return {
-      source: 'url',
-      deployedFrom: deployedFrom || Array.isArray(bundleSource.url) ? bundleSource.url[0] : bundleSource.url
-    };
-  }
-  if (bundleSource.store) {
-    return {
-      source: 'registry',
-      deployedFrom: deployedFrom || Array.isArray(bundleSource.store) ? bundleSource.store[0] : bundleSource.store
-    };
-  }
-  return {};
-};
+import ComponentInfoDialog from './component-info-dialog';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const isResource = component => !component?.meta?.group;
 const getComponentName = (componentId, app) => {
   const ids = componentId.split('/').slice(1);
   let parent = app;
@@ -100,7 +44,6 @@ const getComponentName = (componentId, app) => {
   }
   return names.join(' / ');
 };
-const isPack = component => component?.meta?.group === 'pack';
 export default function ComponentCell({
   blocklet,
   ancestors,
@@ -114,8 +57,7 @@ export default function ComponentCell({
   app
 }) {
   const {
-    t,
-    locale
+    t
   } = useContext(LocaleContext);
   const [componentInfo, setComponentInfo] = useState();
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -132,100 +74,6 @@ export default function ComponentCell({
   }
   const mountPoint = `/${blocklet.mountPoint || '/'}`.replace(/\/+/g, '/');
   const href = getComponentUrl(mountPoint);
-  const renderRows = rows => rows.map(row => {
-    if (row.name === t('common.did') || row.name === t('blocklet.appId')) {
-      return /*#__PURE__*/_jsx(InfoRow, {
-        valueComponent: "div",
-        nameWidth: 120,
-        name: row.name,
-        nameFormatter: () => row.name,
-        children: row.value
-      }, row.name);
-    }
-    return /*#__PURE__*/_jsx(InfoRow, {
-      valueComponent: "div",
-      nameWidth: 120,
-      name: row.name,
-      children: row.value
-    }, row.name);
-  });
-  const sourceInfo = componentInfo ? getSourceInfo(componentInfo) : {};
-  const componentRows = componentInfo ? [{
-    name: t('common.name'),
-    value: getDisplayName(componentInfo, true)
-  }, {
-    name: t('common.version'),
-    value: /*#__PURE__*/_jsx(BlockletVersion, {
-      blocklet: componentInfo,
-      checkUpgrade: false
-    })
-  }, {
-    name: t('common.status'),
-    value: /*#__PURE__*/_jsx(BlockletStatus, {
-      status: status,
-      source: componentInfo.source,
-      progress: blocklet.progress
-    })
-  }, blocklet.status === 'running' ? {
-    name: t('blocklet.startedAt'),
-    value: formatToDatetime(blocklet.startedAt, locale)
-  } : null, blocklet.status !== 'running' ? {
-    name: t('blocklet.stoppedAt'),
-    value: formatToDatetime(blocklet.stoppedAt, locale)
-  } : null, blocklet.installedAt ? {
-    name: t('blocklet.installedAt'),
-    value: formatToDatetime(blocklet.installedAt, locale)
-  } : null, hasStartEngine(blocklet.meta) ? {
-    name: t('common.mountPoint'),
-    value: mountPoint
-  } : null, componentInfo.meta.group ? {
-    name: t('common.group'),
-    value: /*#__PURE__*/_jsx(Tag, {
-      type: "success",
-      children: componentInfo.meta.group
-    })
-  } : null, {
-    name: t('blocklet.overview.source'),
-    value: /*#__PURE__*/_jsx(BlockletSource, {
-      sourceInfo: sourceInfo,
-      blocklet: blocklet
-    })
-  }, {
-    name: t('blocklet.overview.deployedFrom'),
-    value: sourceInfo.deployedFrom || '-'
-  }, {
-    name: t('common.did'),
-    value: /*#__PURE__*/_jsx(DidAddress, {
-      did: componentInfo.meta.did,
-      showQrcode: true
-    })
-  }, {
-    name: t('common.author'),
-    value: formatPerson(componentInfo.meta.author)
-  }, {
-    name: t('common.engine'),
-    value: getEngineRows(componentInfo.engine, t).map(({
-      name,
-      value
-    }) => /*#__PURE__*/_jsx(InfoRow, {
-      style: {
-        marginBottom: 4
-      },
-      nameWidth: 120,
-      name: name,
-      children: value
-    }, name))
-  }, blocklet.dependents?.length ? {
-    name: t('common.dependents'),
-    value: /*#__PURE__*/_jsx(Box, {
-      children: blocklet.dependents.map(x => /*#__PURE__*/_jsx(Box, {
-        children: `${getComponentName(x.id, app)} ${x.required ? `(${t('common.required')})` : ''}`
-      }, x.id))
-    })
-  } : null, blocklet.meta.resources?.length ? {
-    name: t('common.resource'),
-    value: blocklet.meta.resources.join(', ')
-  } : null].filter(Boolean) : [];
   const appInProgress = isInProgress(app.status);
   const componentInProgress = isInProgress(blocklet.status);
   let deleteDisabledTip = '';
@@ -240,226 +88,220 @@ export default function ComponentCell({
       });
     }
   }
-  return [/*#__PURE__*/_jsxs(StyledComponentRow, {
-    display: "flex",
-    py: 2,
-    className: "component-item",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    children: [/*#__PURE__*/_jsxs(Box, {
-      pl: 2,
-      width: {
-        xs: 300,
-        md: 400
-      },
+  const handleRemove = async (...param) => {
+    setLoading(true);
+    try {
+      await onRemove(...param);
+    } catch {
+      // ignore
+    }
+    setLoading(false);
+    setShowDeleteConfirm(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(StyledComponentRow, {
       display: "flex",
+      py: 2,
+      className: "component-item",
+      justifyContent: "flex-start",
       alignItems: "center",
-      children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
-        blocklet: blocklet,
-        ancestors: ancestors
-      }), /*#__PURE__*/_jsxs(Box, {
-        ml: "16px",
-        children: [/*#__PURE__*/_jsxs(Box, {
-          className: "component-header",
-          onClick: () => setComponentInfo(blocklet),
-          children: [/*#__PURE__*/_jsx(Box, {
-            className: "component-name",
-            children: getDisplayName(blocklet, true)
-          }), /*#__PURE__*/_jsx(Box, {
-            className: "component-version",
-            children: blocklet?.meta?.version
-          })]
+      children: [/*#__PURE__*/_jsxs(Box, {
+        pl: 2,
+        width: {
+          xs: 300,
+          md: 400
+        },
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
+          blocklet: blocklet,
+          ancestors: ancestors
         }), /*#__PURE__*/_jsxs(Box, {
-          display: "flex",
-          alignItems: "center",
-          sx: {
-            mt: '2px',
-            ml: -0.5
-          },
-          children: [status !== 'unknown' && /*#__PURE__*/_jsx(BlockletStatus, {
-            style: {
-              marginLeft: 4
+          ml: "16px",
+          children: [/*#__PURE__*/_jsxs(Box, {
+            className: "component-header",
+            onClick: () => setComponentInfo(blocklet),
+            children: [/*#__PURE__*/_jsx(Box, {
+              className: "component-name",
+              children: getDisplayName(blocklet, true)
+            }), /*#__PURE__*/_jsx(Box, {
+              className: "component-version",
+              children: blocklet?.meta?.version
+            })]
+          }), /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            sx: {
+              mt: '2px',
+              ml: -0.5
             },
-            status: status,
-            source: blocklet.source,
-            progress: blocklet.progress
-          }), /*#__PURE__*/_jsx(BlockletMode, {
-            style: {
-              marginLeft: 4
-            },
-            mode: blocklet.mode || ''
-          }), !!blocklet.dependents?.length && /*#__PURE__*/_jsx(Tooltip, {
-            title: [`${t('common.dependents')}: `, blocklet.dependents.map(x => /*#__PURE__*/_jsx(Box, {
-              pl: 1,
-              children: `${getComponentName(x.id, app)} ${x.required ? `(${t('common.required')})` : ''}`
-            }, x.id))],
-            children: /*#__PURE__*/_jsx(Box, {
-              display: "flex",
-              color: "primary.main",
-              ml: 1,
-              children: /*#__PURE__*/_jsx(Icon, {
-                icon: "octicon:package-dependents-16"
+            children: [status !== 'unknown' && /*#__PURE__*/_jsx(BlockletStatus, {
+              style: {
+                marginLeft: 4
+              },
+              status: status,
+              source: blocklet.source,
+              progress: blocklet.progress
+            }), /*#__PURE__*/_jsx(BlockletMode, {
+              style: {
+                marginLeft: 4
+              },
+              mode: blocklet.mode || ''
+            }), !!blocklet.dependents?.length && /*#__PURE__*/_jsx(Tooltip, {
+              title: [`${t('common.dependents')}: `, blocklet.dependents.map(x => /*#__PURE__*/_jsx(Box, {
+                pl: 1,
+                children: `${getComponentName(x.id, app)} ${x.required ? `(${t('common.required')})` : ''}`
+              }, x.id))],
+              children: /*#__PURE__*/_jsx(Box, {
+                display: "flex",
+                color: "primary.main",
+                ml: 1,
+                children: /*#__PURE__*/_jsx(Icon, {
+                  icon: "octicon:package-dependents-16"
+                })
               })
-            })
+            })]
           })]
         })]
-      })]
-    }, blocklet), hasStartEngine(blocklet.meta) && /*#__PURE__*/_jsx(Box, {
-      sx: {
-        display: {
-          xs: 'none',
-          md: 'flex'
-        }
-      },
-      alignItems: "center",
-      flexGrow: "1",
-      children: /*#__PURE__*/_jsx("a", {
-        target: "_blank",
-        href: href,
-        rel: "noopener noreferrer",
-        title: href,
-        children: /*#__PURE__*/_jsx(Box, {
-          maxWidth: 400,
-          sx: {
-            color: 'secondary.main',
-            fontSize: 16,
-            px: 2
-          },
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          textOverflow: "ellipsis",
-          children: normalizePathPrefix(mountPoint)
-        })
-      })
-    }, mountPoint), /*#__PURE__*/_jsx("div", {
-      style: {
-        flex: 1
-      }
-    }), /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      alignItems: "center",
-      children: [hasStartEngine(blocklet.meta) && /*#__PURE__*/_jsx(Tooltip, {
-        title: t('common.visit'),
+      }, blocklet), hasStartEngine(blocklet.meta) && /*#__PURE__*/_jsx(Box, {
+        sx: {
+          display: {
+            xs: 'none',
+            md: 'flex'
+          }
+        },
+        alignItems: "center",
+        flexGrow: "1",
         children: /*#__PURE__*/_jsx("a", {
           target: "_blank",
           href: href,
           rel: "noopener noreferrer",
-          children: /*#__PURE__*/_jsx(IconButton, {
-            size: "small",
-            children: /*#__PURE__*/_jsx(LaunchIcon, {})
+          title: href,
+          children: /*#__PURE__*/_jsx(Box, {
+            maxWidth: 400,
+            sx: {
+              color: 'secondary.main',
+              fontSize: 16,
+              px: 2
+            },
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            children: normalizePathPrefix(mountPoint)
           })
         })
-      }), /*#__PURE__*/_jsx(ComponentConfiguration, {
-        blocklet: blocklet,
-        ancestors: ancestors,
-        children: ({
-          open
-        }) => /*#__PURE__*/_jsx(Tooltip, {
-          title: t('common.config'),
-          children: /*#__PURE__*/_jsx(StyledBadge, {
-            color: "error",
-            badgeContent: "",
-            variant: "dot",
-            invisible: !getComponentMissingConfigs(blocklet, ancestors[0]).length,
+      }, mountPoint), /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        children: [hasStartEngine(blocklet.meta) && /*#__PURE__*/_jsx(Tooltip, {
+          title: t('common.visit'),
+          children: /*#__PURE__*/_jsx("a", {
+            target: "_blank",
+            href: href,
+            rel: "noopener noreferrer",
             children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: open,
               size: "small",
-              children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {})
+              children: /*#__PURE__*/_jsx(LaunchIcon, {})
             })
           })
-        }, "config")
-      }), /*#__PURE__*/_jsx(StartComponent, {
-        blocklet: app,
-        component: blocklet,
-        onStart: onStart,
-        onStop: onStop,
-        disabled: !['starting', 'stopping'].includes(app.status) && isInProgress(app.status)
-      }), /*#__PURE__*/_jsx(Actions, {
-        "data-cy": "component-actions",
-        actions: [hasStartEngine(blocklet.meta) ? {
-          icon: /*#__PURE__*/_jsx(InfoOutlinedIcon, {}),
-          text: t('common.detail'),
-          onClick: () => {
-            setComponentInfo(blocklet);
-          }
-        } : null, !isPack(blocklet) && {
-          icon: /*#__PURE__*/_jsx(RestartIcon, {}),
-          text: t('common.restart'),
-          onClick: () => {
-            setConfirmSetting({
-              title: `${t('common.restart')} ${blocklet.meta.title}`,
-              description: t('blocklet.action.restartDescription'),
-              confirm: t('blocklet.action.confirmRestart'),
-              cancel: t('common.cancel'),
-              onConfirm: async () => {
-                setLoading(true);
-                await onRestart(blocklet);
-                setLoading(false);
-              },
-              onCancel: () => setConfirmSetting(null)
-            });
-          },
-          disabled: appInProgress || componentInProgress || blocklet.status !== 'running'
-        }, !isPack(blocklet) && {
-          icon: /*#__PURE__*/_jsx(ReloadIcon, {}),
-          text: t('common.reload'),
-          onClick: async () => {
-            setLoading(true);
-            await onReload(blocklet);
-            setLoading(false);
-          },
-          disabled: loading || appInProgress || componentInProgress || blocklet.status !== 'running'
-        }, {
-          icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
-          text: t('common.delete'),
-          onClick: () => {
-            setShowDeleteConfirm(true);
-          },
-          disabled: appInProgress || componentInProgress || !!deleteDisabledTip,
-          tip: deleteDisabledTip
-        }].filter(Boolean)
-      })]
-    }, "actions")]
-  }, "group-not-gateway-box"), /*#__PURE__*/_jsx(Line, {}, "line"), !!componentInfo && /*#__PURE__*/_jsx(Dialog, {
-    open: true,
-    fullWidth: true,
-    maxWidth: "md",
-    onClose: () => {
-      setComponentInfo(null);
-    },
-    children: /*#__PURE__*/_jsxs(Box, {
-      paddingY: 1.5,
-      children: [/*#__PURE__*/_jsx(DialogTitle, {
-        children: t('common.componentBasicInfo')
-      }), /*#__PURE__*/_jsx(DialogContent, {
-        children: renderRows(componentRows)
-      })]
-    }, "dialog-wrapper")
-  }, "base-info-dialog"), /*#__PURE__*/_jsx(DeleteComponent, {
-    blocklet: app,
-    component: blocklet,
-    remove: async (...param) => {
-      setLoading(true);
-      try {
-        await onRemove(...param);
-      } catch {
-        // ignore
-      }
-      setLoading(false);
-      setShowDeleteConfirm(false);
-    },
-    onCancel: () => setShowDeleteConfirm(false),
-    hideBtn: true,
-    showConfirm: showDeleteConfirm
-  }, "delete-component"), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
-    title: confirmSetting.title,
-    description: confirmSetting.description,
-    confirm: confirmSetting.confirm,
-    cancel: confirmSetting.cancel,
-    params: confirmSetting.params,
-    onConfirm: confirmSetting.onConfirm,
-    onCancel: confirmSetting.onCancel
-  }, "confirm-setting")];
+        }), /*#__PURE__*/_jsx(ComponentConfiguration, {
+          blocklet: blocklet,
+          ancestors: ancestors,
+          children: ({
+            open
+          }) => /*#__PURE__*/_jsx(Tooltip, {
+            title: t('common.config'),
+            children: /*#__PURE__*/_jsx(StyledBadge, {
+              color: "error",
+              badgeContent: "",
+              variant: "dot",
+              invisible: !getComponentMissingConfigs(blocklet, ancestors[0]).length,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: open,
+                size: "small",
+                children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {})
+              })
+            })
+          }, "config")
+        }), /*#__PURE__*/_jsx(StartComponent, {
+          blocklet: app,
+          component: blocklet,
+          onStart: onStart,
+          onStop: onStop,
+          disabled: !['starting', 'stopping'].includes(app.status) && isInProgress(app.status)
+        }), /*#__PURE__*/_jsx(Actions, {
+          "data-cy": "component-actions",
+          actions: [hasStartEngine(blocklet.meta) ? {
+            icon: /*#__PURE__*/_jsx(InfoOutlinedIcon, {}),
+            text: t('common.detail'),
+            onClick: () => {
+              setComponentInfo(blocklet);
+            }
+          } : null, !isResource(blocklet) && {
+            icon: /*#__PURE__*/_jsx(RestartIcon, {}),
+            text: t('common.restart'),
+            onClick: () => {
+              setConfirmSetting({
+                title: `${t('common.restart')} ${blocklet.meta.title}`,
+                description: t('blocklet.action.restartDescription'),
+                confirm: t('blocklet.action.confirmRestart'),
+                cancel: t('common.cancel'),
+                onConfirm: async () => {
+                  setLoading(true);
+                  await onRestart(blocklet);
+                  setLoading(false);
+                },
+                onCancel: () => setConfirmSetting(null)
+              });
+            },
+            disabled: appInProgress || componentInProgress || blocklet.status !== 'running'
+          }, !isResource(blocklet) && {
+            icon: /*#__PURE__*/_jsx(ReloadIcon, {}),
+            text: t('common.reload'),
+            onClick: async () => {
+              setLoading(true);
+              await onReload(blocklet);
+              setLoading(false);
+            },
+            disabled: loading || appInProgress || componentInProgress || blocklet.status !== 'running'
+          }, {
+            icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
+            text: t('common.delete'),
+            onClick: () => {
+              setShowDeleteConfirm(true);
+            },
+            disabled: appInProgress || componentInProgress || !!deleteDisabledTip,
+            tip: deleteDisabledTip
+          }].filter(Boolean)
+        })]
+      }, "actions")]
+    }, "group-not-gateway-box"), /*#__PURE__*/_jsx(Line, {}, "line"), /*#__PURE__*/_jsx(ComponentInfoDialog, {
+      componentInfo: componentInfo,
+      onClose: setComponentInfo,
+      blocklet: blocklet,
+      app: app,
+      depth: depth
+    }), /*#__PURE__*/_jsx(DeleteComponent, {
+      blocklet: app,
+      component: blocklet,
+      remove: handleRemove,
+      onCancel: () => setShowDeleteConfirm(false),
+      hideBtn: true,
+      showConfirm: showDeleteConfirm
+    }, "delete-component"), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+      title: confirmSetting.title,
+      description: confirmSetting.description,
+      confirm: confirmSetting.confirm,
+      cancel: confirmSetting.cancel,
+      params: confirmSetting.params,
+      onConfirm: confirmSetting.onConfirm,
+      onCancel: confirmSetting.onCancel
+    }, "confirm-setting")]
+  });
 }
 ComponentCell.propTypes = {
   blocklet: PropTypes.object.isRequired,