@abtnode/ux 1.16.23-beta-c9c4e08e → 1.16.23-beta-ed83c878

package/es/blocklet/agreement.js

@@ -9,6 +9,7 @@ import { Box, Checkbox, FormControlLabel, IconButton } from '@mui/material';
 import { useState } from 'react';
 import AgreementApp from './agreement-app';
 import RelatedComponentsDialog from './component/related-components-dialog';
+import useComponentsByBlockletMetaUrl from '../hooks/use-components-by-blocklet-meta-url';
 
 // TODO: 加载 Blocklet 定义的 Agreement
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,6 +27,10 @@ export default function Agreement({
     locale
   } = useLocaleContext();
   const [showDependencies, setShowDependencies] = useState(false);
+  const {
+    components,
+    loading
+  } = useComponentsByBlockletMetaUrl(meta);
   const clickNext = onClickNext || (() => {
     navigate(`/launch-blocklet/install${window.location.search}`);
   });
@@ -51,9 +56,21 @@ export default function Agreement({
           })
         })
       })
-    }), /*#__PURE__*/_jsxs("div", {
+    }), /*#__PURE__*/_jsxs(Box, {
       className: "agreement-bottom",
-      children: [onChangeInstallRelated && /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        '> .agreement-loading': {
+          color: 'primary.main'
+        }
+      },
+      children: [loading ? /*#__PURE__*/_jsx(Icon, {
+        className: "agreement-loading",
+        icon: "line-md:loading-loop",
+        style: {
+          fontSize: 42,
+          transform: 'scale(0.6)'
+        }
+      }) : null, onChangeInstallRelated && components?.length ? /*#__PURE__*/_jsxs(Box, {
         sx: {
           display: 'flex',
           flexDirection: 'row',
@@ -84,7 +101,7 @@ export default function Agreement({
             })
           })
         })]
-      }), /*#__PURE__*/_jsx("div", {
+      }) : null, /*#__PURE__*/_jsx("div", {
         className: "button-container",
         "data-cy": "agree-all",
         children: /*#__PURE__*/_jsx(ServerEula, {
@@ -100,7 +117,9 @@ export default function Agreement({
       installRelated: installRelated,
       meta: meta,
       show: showDependencies,
-      onClose: handleHiddenDependencies
+      onClose: handleHiddenDependencies,
+      components: components,
+      loading: loading
     })]
   });
 }

package/es/blocklet/component/related-components-dialog.js

@@ -4,23 +4,23 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, useMediaQuery } from '@mui/material';
 import { Icon } from '@iconify/react';
 import { useMemo } from 'react';
-import useComponentsByBlockletMetaUrl from '../../hooks/use-components-by-blocklet-meta-url';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+function parseLogoUrl(component) {
+  return `${component.bundleSource?.store || component.meta.homepage}/assets/${component.meta?.did}/${component.meta?.logo || 'logo.png'}?v=${component.meta?.version}`;
+}
 export default function RelatedComponentsDialog({
   installRelated,
   meta,
   show,
-  onClose
+  onClose,
+  components,
+  loading
 }) {
   const {
     t
   } = useLocaleContext();
   const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
-  const {
-    components,
-    loading
-  } = useComponentsByBlockletMetaUrl(meta);
   const requiredList = useMemo(() => {
     if (!meta || !meta.components) {
       return {};
@@ -119,7 +119,7 @@ export default function RelatedComponentsDialog({
               minWidth: size,
               minHeight: size
             },
-            src: `${component.meta.homepage}/assets/${meta.did}/logo.png?v=${meta.version}`,
+            src: parseLogoUrl(component),
             alt: component.meta.title
           }), /*#__PURE__*/_jsxs(Box, {
             sx: {
@@ -142,7 +142,7 @@ export default function RelatedComponentsDialog({
                 }
               },
               onClick: () => {
-                window.open(`${component.meta.homepage}/blocklets/${component.meta.did}`, '_blank');
+                window.open(`${component.bundleSource?.store || component.meta.homepage}/blocklets/${component.meta.did}`, '_blank');
               },
               children: [component.meta.title, /*#__PURE__*/_jsxs(Box, {
                 sx: {
@@ -180,7 +180,9 @@ RelatedComponentsDialog.propTypes = {
   meta: PropTypes.object,
   show: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
-  installRelated: PropTypes.func
+  installRelated: PropTypes.func,
+  components: PropTypes.array.isRequired,
+  loading: PropTypes.bool.isRequired
 };
 RelatedComponentsDialog.defaultProps = {
   meta: null,

package/es/blocklet/publish/create-release.js

@@ -30,6 +30,7 @@ import EmptySpinner from '../../empty-spinner';
 import ClickToCopy from '../../click-to-copy';
 import { formatError } from '../../util';
 import Resource from './resource';
+import SelectComponents from './select-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -103,9 +104,21 @@ const addComponentTabs = ({
     value: key
   });
 };
-const pickParams = release => {
-  const params = pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'note']);
+const pickParams = (release, app) => {
+  const params = pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'blockletComponents', 'note']);
   params.blockletScreenshots ||= [];
+  if (!params.blockletComponents) {
+    params.blockletComponents = (app.children || []).map(x => ({
+      did: x.meta.did,
+      included: true,
+      required: true
+    }));
+  } else {
+    params.blockletComponents = params.blockletComponents.map(x => ({
+      ...x,
+      included: true
+    }));
+  }
   return params;
 };
 export default function CreateRelease({
@@ -170,7 +183,7 @@ export default function CreateRelease({
       } else if (semver.valid(data.blockletVersion)) {
         data.blockletVersion = semver.inc(data.blockletVersion, 'patch');
       }
-      setParams(pickParams(data));
+      setParams(pickParams(data, blocklet));
       setProjectType(data.type);
     }).catch(err => {
       setLoading(false);
@@ -186,7 +199,7 @@ export default function CreateRelease({
       }
     }).then(res => {
       setLoading(false);
-      setParams(pickParams(res?.release));
+      setParams(pickParams(res?.release, blocklet));
       setRelease(res?.release);
     }).catch(err => {
       setLoading(false);
@@ -237,6 +250,11 @@ export default function CreateRelease({
     _params.blockletDescription = (_params.blockletDescription || '').trim();
     _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
     _params.note = (_params.note || '').trim();
+    if (projectType === 'pack') {
+      _params.blockletComponents = (_params.blockletComponents || []).filter(x => x.included).map(x => pick(x, ['did', 'required'])).map(JSON.stringify);
+    } else {
+      delete _params.blockletComponents;
+    }
     setCreateLoading(status);
     setLoading(true);
     api.createRelease({
@@ -762,6 +780,31 @@ export default function CreateRelease({
             children: resourceContent
           })]
         })]
+      }), projectType === 'pack' && /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        mt: 3,
+        className: "section full-width",
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "left",
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "h3",
+            children: t('common.components')
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            flex: 1
+          },
+          children: /*#__PURE__*/_jsx(SelectComponents, {
+            disabled: loading || readOnly,
+            app: blocklet,
+            value: params.blockletComponents,
+            onChange: data => {
+              setParams({
+                blockletComponents: data
+              });
+            }
+          })
+        })]
       })]
     })]
   });

package/es/blocklet/publish/select-components.js

@@ -0,0 +1,181 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import classnames from 'classnames';
+import pick from 'lodash/pick';
+import Checkbox from '@mui/material/Checkbox';
+import Box from '@mui/material/Box';
+import Datatable from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import BlockletBundleAvatar from '../bundle-avatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function SelectComponents({
+  value,
+  app,
+  onChange,
+  disabled
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const components = app.children || [];
+  const list = useMemo(() => app.children.map(component => {
+    const exist = value.find(item => item.did === component.meta.did);
+    return exist || {
+      did: component.meta.did
+    };
+  }), [app, value]);
+  const map = list.reduce((acc, curr) => {
+    acc[curr.did] = pick(curr, ['required', 'included']);
+    return acc;
+  }, {});
+  const toggleIncluded = did => {
+    const newValue = list.map(item => {
+      if (item.did === did) {
+        const included = !item.included;
+        return {
+          ...item,
+          included,
+          required: included
+        };
+      }
+      return item;
+    });
+    onChange(newValue);
+  };
+  const toggleRequired = did => {
+    const newValue = list.map(item => {
+      if (item.did === did) {
+        return {
+          ...item,
+          required: !item.required
+        };
+      }
+      return item;
+    });
+    onChange(newValue);
+  };
+  const columns = [{
+    label: t('common.name'),
+    name: 'meta.title',
+    width: 200,
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: rawIndex => {
+        const component = components[rawIndex];
+        const included = map[component.meta.did]?.included;
+        return /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
+            size: 24,
+            blocklet: component,
+            ancestors: [app]
+          }), /*#__PURE__*/_jsx(Box, {
+            ml: "4px",
+            className: classnames('text', {
+              excluded: !included
+            }),
+            children: /*#__PURE__*/_jsx(Box, {
+              children: component.meta.title
+            })
+          })]
+        });
+      }
+    }
+  }, {
+    label: t('blocklet.publish.componentIncluded'),
+    width: 100,
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: rawIndex => {
+        const component = components[rawIndex];
+        const included = map[component.meta.did]?.included;
+        return /*#__PURE__*/_jsx(Checkbox, {
+          size: "small",
+          checked: included,
+          onClick: () => toggleIncluded(component.meta.did),
+          disabled: disabled
+        });
+      }
+    }
+  }, {
+    label: t('blocklet.publish.componentForceRequired'),
+    width: 100,
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: rawIndex => {
+        const component = components[rawIndex];
+        const included = map[component.meta.did]?.included;
+        const required = map[component.meta.did]?.required;
+        return /*#__PURE__*/_jsx(Checkbox, {
+          disabled: disabled || !included,
+          size: "small",
+          checked: required && included,
+          onClick: () => toggleRequired(component.meta.did)
+        });
+      }
+    }
+  }];
+  return /*#__PURE__*/_jsx(Root, {
+    children: /*#__PURE__*/_jsx(Datatable, {
+      className: "main-table",
+      verticalKeyWidth: 100,
+      locale: locale,
+      data: components,
+      columns: columns,
+      options: {
+        sort: false,
+        download: false,
+        filter: false,
+        print: false,
+        search: false,
+        rowsPerPage: 100
+      }
+    })
+  });
+}
+SelectComponents.propTypes = {
+  app: PropTypes.object.isRequired,
+  value: PropTypes.arrayOf(PropTypes.shape({
+    did: PropTypes.string.isRequired,
+    required: PropTypes.bool,
+    included: PropTypes.bool
+  })),
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool
+};
+SelectComponents.defaultProps = {
+  value: [],
+  onChange: () => {},
+  disabled: false
+};
+const Root = styled(Box)`
+  .main-table {
+    .text.excluded {
+      color: #999;
+    }
+    width: 400px;
+    ${({
+  theme
+}) => theme.breakpoints.down('md')} {
+      width: 100%;
+    }
+    > div:first-child {
+      display: none;
+    }
+    .MuiTableCell-head {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    .MuiTableCell-body {
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+    .datatable-footer {
+      display: none;
+    }
+  }
+`;

package/es/hooks/blocklet.js

@@ -7,9 +7,9 @@ import { toSlotDomain, getBlockletUrlParams, getBlockletUrl } from '../util';
 import { fixBlocklet } from '../blocklet/util';
 import { useDomainsAccessibility } from './url-evaluation';
 import parseProgress from '../util/parse-progress';
+import { getStorageWithTTL, removeStorageTTL, setStorageWithTTL } from '../util/storage-ttl';
+const parseStatusKey = id => `blocklet-status-${id}`;
 const excludeDownloadingStatus = {
-  waiting: 1,
-  installing: 1,
   installed: 1,
   starting: 1,
   running: 1,
@@ -18,6 +18,26 @@ const excludeDownloadingStatus = {
   restarting: 1,
   deleting: 1
 };
+function rollbackSessionBlockletStatus(blocklet) {
+  if (blocklet) {
+    const children = blocklet.children || [];
+    let isExtracting = false;
+    children.forEach(item => {
+      if (item.status === 'downloading') {
+        const status = getStorageWithTTL(parseStatusKey(item.meta?.bundleDid));
+        item.status = status || item.status;
+        if (status === 'extracting') {
+          isExtracting = true;
+        }
+      } else if (excludeDownloadingStatus[blocklet.status]) {
+        removeStorageTTL(parseStatusKey(item.meta?.bundleDid));
+      }
+    });
+    if (isExtracting) {
+      blocklet.status = 'extracting';
+    }
+  }
+}
 
 // eslint-disable-next-line import/prefer-default-export
 export function useBlocklet({
@@ -62,6 +82,7 @@ export function useBlocklet({
       await fixBlocklet(data, {
         getIP
       });
+      rollbackSessionBlockletStatus(data);
       setBlocklet(data);
     } catch (err) {
       Toast.error(err.message);
@@ -116,12 +137,7 @@ export function useBlocklet({
             fixRuntime: 'merge-old',
             oldBlocklet
           });
-          if (oldBlocklet && excludeDownloadingStatus[data.status]) {
-            oldBlocklet?.children?.forEach(item => {
-              delete item.progress;
-            });
-            delete oldBlocklet.progress;
-          }
+          rollbackSessionBlockletStatus(data);
           return data;
         });
         setLoading(false);
@@ -167,21 +183,14 @@ export function useBlocklet({
         const children = oldBlocklet.children || [];
         children.forEach(x => {
           if (x.meta?.bundleDid === data.component?.did) {
+            setStorageWithTTL(parseStatusKey(x.meta?.bundleDid), data.status, 1000 * 60 * 5);
             x.status = data.status;
           }
         });
-
-        // 判断当前下载的 children 是否都处于 extracting
-        const extracting = children.every(x => {
-          if (excludeDownloadingStatus[x.status]) {
-            return true;
-          }
-          return x.status === 'extracting';
-        });
         return {
           ...oldBlocklet,
           children,
-          status: extracting ? 'extracting' : oldBlocklet.status
+          status: data.status
         };
       });
     }
@@ -193,14 +202,15 @@ export function useBlocklet({
 
         // keep largest files as progress
         const children = oldBlocklet.children || [];
-        let progress = 100;
+        let progress = oldBlocklet.progress || 0;
         children.forEach(item => {
           if (item.meta?.bundleDid === data.component?.did) {
             item.progress = parseProgress(data.current, data.total);
             item.status = data.status;
-            if (item.progress < progress) {
+            if (item.progress > progress) {
               progress = item.progress;
             }
+            removeStorageTTL(parseStatusKey(item.meta?.bundleDid));
           }
         });
         return {

package/es/hooks/use-components-by-blocklet-meta-url.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useNodeContext } from '../contexts/node';
 function parseBlockletMetaUrl(meta) {
-  return meta && meta.homepage && meta.did ? `${meta?.homepage}/api/blocklets/${meta?.did}/blocklet.json` : '';
+  return meta && (meta.registryUrl || meta.homepage) && meta.did ? `${meta.registryUrl || meta.homepage}/api/blocklets/${meta?.did}/blocklet.json` : '';
 }
 function useComponentsByBlockletMetaUrl(meta) {
   const {

package/es/locales/ar.js

@@ -46,6 +46,24 @@ export default {
       scan: 'قم بتوصيل محفظة DID الخاصة بك لتوفير جواز السفر',
       confirm: 'أكد على محفظة الهوية الرقمية الخاصة بك',
       success: 'تم اتصالك بنجاح'
+    },
+    switchDid: {
+      title: 'تبديل محفظة DID',
+      scan: 'مسح رمز الاستجابة السريعة التالي لتبديل الحساب',
+      confirm: 'قم بتأكيد التبديل في محفظة ديد الخاصة بك',
+      success: 'تم التحويل بنجاح'
+    },
+    switchSpecifiedDid: {
+      title: 'تبديل محفظة DID',
+      scan: 'تحتاج إلى تبديل DID إلى {did} لإكمال الإجراءات التالية',
+      confirm: 'قم بتأكيد التبديل في محفظة ديد الخاصة بك',
+      success: 'تم التبديل بنجاح'
+    },
+    connect: {
+      title: 'قم بتوصيل محفظة DID',
+      scan: 'قم بتوصيل محفظة DID الخاصة بك لتوفير جواز السفر',
+      confirm: 'قم بتأكيد على محفظتك الرقمية',
+      success: 'لقد تم توصيلك بنجاح'
     }
   },
   acceptServer: {
@@ -579,7 +597,8 @@ export default {
       setting: 'الإعدادات',
       components: 'تبعيات المكوّن {name}',
       noDependencies: 'لا يوجد لدى {name} أي تبعيات',
-      relatedComponents: 'المكونات ذات الصلة'
+      relatedComponents: 'المكونات ذات الصلة',
+      required: 'مطلوب'
     },
     router: {
       urlPath: 'مسار عنوان URL',
@@ -662,7 +681,10 @@ export default {
         noNote: 'ملاحظة الإصدار مطلوبة'
       },
       packTip: 'سيتم تضمين مكونات وتكوين التطبيق تلقائيًا في البلوكليت.',
-      resourceChangedWarning: 'لقد قمت بتعديل المورد، يرجى حفظه في الوقت المناسب'
+      resourceChangedWarning: 'لقد قمت بتعديل المورد، يرجى حفظه في الوقت المناسب',
+      installResourceTip: 'يرجى إضافة المكون في التطبيق، عنوان URL للمكون:',
+      installResourceTip2: 'إذا كنت ترغب في رؤية المزيد من النصائح، يرجى زيارة',
+      installResourceHelp: 'وثيقة المساعدة'
     }
   },
   dashboard: {

package/es/locales/de.js

@@ -46,6 +46,24 @@ export default {
       scan: 'Verbinden Sie Ihre DID-Brieftasche, um Ihren Reisepass bereitzustellen',
       confirm: 'Bestätigen Sie in Ihrer DID-Brieftasche',
       success: 'Du bist erfolgreich verbunden'
+    },
+    switchDid: {
+      title: 'Schalte DID Wallet um',
+      scan: 'Scannen Sie den folgenden QR-Code, um das Konto zu wechseln',
+      confirm: 'Bestätigen Sie den Wechsel in Ihrem DID-Wallet',
+      success: 'Erfolgreich umgeschaltet'
+    },
+    switchSpecifiedDid: {
+      title: 'Wechsle auf DID Wallet',
+      scan: 'Du musst DID auf {did} umschalten, um die folgenden Aktionen abzuschließen',
+      confirm: 'Bestätige den Wechsel in deiner DID-Brieftasche',
+      success: 'Erfolgreich gewechselt'
+    },
+    connect: {
+      title: 'Verbinden Sie das DID-Wallet',
+      scan: 'Verbinden Sie Ihre DID Wallet, um einen Pass zu hinterlegen',
+      confirm: 'Bestätige in deinem DID Wallet',
+      success: 'Du bist erfolgreich verbunden'
     }
   },
   acceptServer: {
@@ -579,7 +597,8 @@ export default {
       setting: 'Einstellungen',
       components: 'Abhängigkeiten von Komponente {name}',
       noDependencies: '{name} hat keine Abhängigkeiten',
-      relatedComponents: 'Verbundene Komponenten'
+      relatedComponents: 'Verbundene Komponenten',
+      required: 'Erforderlich'
     },
     router: {
       urlPath: 'URL Pfad',
@@ -662,7 +681,10 @@ export default {
         noNote: 'Versionshinweis wird benötigt'
       },
       packTip: 'Komponenten und Anwendungskonfiguration werden automatisch in das Blocklet einbezogen.',
-      resourceChangedWarning: 'Sie haben die Ressource geändert, bitte rechtzeitig speichern'
+      resourceChangedWarning: 'Sie haben die Ressource geändert, bitte rechtzeitig speichern',
+      installResourceTip: 'Bitte fügen Sie das Bauteil in einer Anwendung hinzu, Bauteil-URL:',
+      installResourceTip2: 'Wenn du mehr Tipps sehen möchtest, besuche bitte',
+      installResourceHelp: 'Hilfe-Dokument'
     }
   },
   dashboard: {

package/es/locales/en.js

@@ -41,7 +41,19 @@ export default {
   login: {
     loginTo: 'Connect to',
     description: 'Only server owner and approved members can access the dashboard',
-    dialog: {
+    switchDid: {
+      title: 'Switch DID Wallet',
+      scan: 'Scan following qrcode to switch account',
+      confirm: 'Confirm switch in your DID Wallet',
+      success: 'Successfully switched'
+    },
+    switchSpecifiedDid: {
+      title: 'Switch DID Wallet',
+      scan: 'You need switch DID to {did} to complete the following actions',
+      confirm: 'Confirm switch in your DID Wallet',
+      success: 'Successfully switched'
+    },
+    connect: {
       title: 'Connect DID Wallet',
       scan: 'Connect your DID Wallet to provide passport',
       confirm: 'Confirm on your DID Wallet',
@@ -650,8 +662,9 @@ export default {
       resourceChangedWarning: 'You have modified the resource, please save it in time',
       installResourceTip: 'Please add the component in an application, component URL:',
       installResourceTip2: 'If you want to see more tips, please visit',
-      // translate to en
       installResourceHelp: 'Help Document',
+      componentIncluded: 'Included',
+      componentForceRequired: 'Forced Required',
       connect: {
         title: 'Create Blocklet DID',
         scan: 'Scan the QR code below to generate Blocklet DID',

package/es/locales/es.js

@@ -46,6 +46,24 @@ export default {
       scan: 'Conecta tu billetera DID para proporcionar el pasaporte',
       confirm: 'Confirma en tu billetera DID',
       success: 'Estás conectado con éxito'
+    },
+    switchDid: {
+      title: 'Cambiar billetera DID',
+      scan: 'Escanea el siguiente código QR para cambiar de cuenta',
+      confirm: 'Confirma el cambio en tu billetera DID',
+      success: 'Cambiado exitosamente'
+    },
+    switchSpecifiedDid: {
+      title: 'Cambiar billetera DID',
+      scan: 'Necesitas cambiar el DID a {did} para completar las siguientes acciones',
+      confirm: 'Confirma el cambio en tu billetera de DID',
+      success: 'Cambiado con éxito'
+    },
+    connect: {
+      title: 'Conectar billetera DID',
+      scan: 'Conecta tu billetera DID para proporcionar pasaporte',
+      confirm: 'Confirma en tu billetera DID',
+      success: 'Estás conectado exitosamente'
     }
   },
   acceptServer: {
@@ -579,7 +597,8 @@ export default {
       setting: 'Ajustes',
       components: 'Dependencias del componente {name}',
       noDependencies: '{name} no tiene dependencias',
-      relatedComponents: 'Componentes relacionados'
+      relatedComponents: 'Componentes relacionados',
+      required: 'Requerido'
     },
     router: {
       urlPath: 'URL Path',
@@ -662,7 +681,10 @@ export default {
         noNote: 'Se requiere la Nota de Lanzamiento'
       },
       packTip: 'Los componentes y la configuración de la aplicación se incluirán automáticamente en el blocklet',
-      resourceChangedWarning: 'Ha modificado el recurso, por favor guárdelo a tiempo'
+      resourceChangedWarning: 'Ha modificado el recurso, por favor guárdelo a tiempo',
+      installResourceTip: 'Por favor agrega el componente en una aplicación, URL del componente:',
+      installResourceTip2: 'Si desea ver más consejos, visite {name}',
+      installResourceHelp: 'Ayuda Documento'
     }
   },
   dashboard: {