fix(ui): add NsProgressStories & other fixes (#1000)

* fix: add NsProgress stories

* fix: add NsProgress into import users modal

* chore: disable Carbon telemetry

* chore: remove unnecessary extension from devcontainer

* fix: parameter inside 18n string

* fix: add i18n strings used by external applications

* fix: typo in NsPasswordInput props

Author: andre8244

.devcontainer/devcontainer.json

@@ -13,7 +13,6 @@
         "esbenp.prettier-vscode",
         "octref.vetur",
         "shenjiaolong.vue-helper",
-        "waderyan.gitblame",
         "streetsidesoftware.code-spell-checker"
       ]
     }

core/ui/.env

@@ -1 +1,2 @@
 SASS_PATH=./node_modules
+CARBON_TELEMETRY_DISABLED=1

core/ui/package.json

@@ -16,7 +16,7 @@
     "@carbon/icons-vue": "^10.37.0",
     "@carbon/themes": "^10.34.0",
     "@carbon/vue": "^2.40.0",
-    "@nethserver/ns8-ui-lib": "^1.9.0",
+    "@nethserver/ns8-ui-lib": "^1.10.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.30.2",
     "carbon-components": "^10.41.0",

core/ui/public/i18n/en/translation.json

@@ -95,7 +95,9 @@
         "choose_a_node": "Choose a node",
         "type": "Type",
         "any": "Any",
-        "eg_value": "e.g. {value}"
+        "eg_value": "e.g. {value}",
+        "go_to_page": "Go to {page}",
+        "not_configured": "Not configured"
     },
     "error": {
         "error": "Error",
@@ -426,7 +428,7 @@
         "set-metrics-configuration": "Set metrics configuration",
         "set-metrics-notifications": "Set metrics notifications",
         "get-metrics-id": "Get metrics ID",
-        "restart-module": "Restart instance",
+        "restart-module": "Restart application",
         "list-alerts": "List alerts",
         "list-nodes": "List nodes",
         "set-note": "Set note",
@@ -904,6 +906,15 @@
         "request_https_certificate": "Request a Let's Encrypt certificate",
         "cannot_obtain_certificate": "Cannot obtain Let's Encrypt certificate"
     },
+    "apps_status": {
+        "application": "Application",
+        "restart_application": "Restart application",
+        "go_to_node_details": "Go to node",
+        "application_images": "Application images",
+        "application_volumes": "Application volumes",
+        "search_images": "Search images",
+        "search_volumes": "Search volumes"
+    },
     "settings_account": {
         "title": "Account",
         "current_user_password": "Current {user} password",

core/ui/public/i18n/it/translation.json

@@ -61,7 +61,7 @@
         "repository": "Repository",
         "app_installation": "Installa {app}",
         "installing_on_node": "Installazione su {node} in corso",
-        "instance_installed_on_node": "{modulo_id} installato su {node}",
+        "instance_installed_on_node": "{module_id} installato su {node}",
         "app_uninstallation": "Disinstalla {app}",
         "uninstall_instance": "Disinstalla istanza",
         "uninstalling": "Disinstallazione",
@@ -70,7 +70,7 @@
         "move_app": "Sposta app",
         "moving_app_to_node": "Spostamento di {instance} su {node}",
         "app_with_ui_name_cloned_to_node": "{instance} clonata su {node}",
-        "app_without_ui_name_cloned_to_node": "{instance} clonata su {node} come {modulo_id}",
+        "app_without_ui_name_cloned_to_node": "{instance} clonata su {node} come {module_id}",
         "app_with_ui_name_moved_to_node": "{instance} spostata su {node}",
         "app_without_ui_name_moved_to_node": "{instance} spostata su {node} come {module_id}",
         "core_app_update_available_description": "Alcune app di base devono essere aggiornate",
@@ -742,7 +742,7 @@
         "set-metrics-configuration": "Imposta configurazione Metrics",
         "get-metrics-id": "Identifica Metrics",
         "get-metrics-ids": "Identifica Metrics",
-        "restart-module": "Riavvia istanza",
+        "restart-module": "Riavvia applicazione",
         "list-alerts": "Elenca allarmi",
         "list-nodes": "Elenca nodi",
         "set-note": "Imposta nota",
@@ -1079,7 +1079,9 @@
         "choose_a_node": "Scegli un nodo",
         "type": "Tipo",
         "any": "Qualsiasi",
-        "eg_value": "Es. {value}"
+        "eg_value": "es. {value}",
+        "go_to_page": "Vai a {page}",
+        "not_configured": "Non configurato"
     },
     "error": {
         "error": "Errore",
@@ -1698,6 +1700,15 @@
         "request_https_certificate": "Richiedi un certificato Let's Encrypt",
         "go_to_tls_certificates": "Vai a Certificati TLS"
     },
+    "apps_status": {
+        "application": "Applicazione",
+        "restart_application": "Riavvia applicazione",
+        "go_to_node_details": "Vai al nodo",
+        "application_images": "Immagini applicazione",
+        "application_volumes": "Volumi applicazione",
+        "search_images": "Cerca immagini",
+        "search_volumes": "Cerca volumi"
+    },
     "applications": {
         "restarting": "Riavvio",
         "note_helper_text": "Questa nota deve essere di 100 caratteri o meno",

core/ui/src/components/domains/CreateDomainModal.vue

@@ -286,7 +286,7 @@
               :confirmPasswordLabel="$t('openldap.admpass_confirm')"
               v-model="openldap.admpass"
               @passwordValidation="onNewOpenLdapPasswordValidation"
-              :newPaswordHelperText="
+              :newPasswordHelperText="
                 $t('openldap.choose_openldap_admin_password')
               "
               :newPasswordInvalidMessage="$t(error.openldap.admpass)"

core/ui/src/components/domains/ImportUsersModal.vue

@@ -27,6 +27,7 @@
           :description="error.importDataCsv"
           :showCloseButton="false"
         />
+        <NsProgress :stepId="step" :steps="progressSteps" class="progress" />
         <template v-if="step == 'importData'">
           <p class="mg-bottom-lg">
             {{ $t("import_users.upload_csv_file_description") }}
@@ -206,6 +207,16 @@ export default {
     return {
       step: "",
       steps: ["importData", "previewData"],
+      progressSteps: [
+        {
+          id: "importData",
+          label: this.$t("import_users.csv_upload_label"),
+        },
+        {
+          id: "previewData",
+          label: this.$t("import_users.preview"),
+        },
+      ],
       csvFile: null,
       existingPolicy: "skip",
       loading: {
@@ -537,4 +548,9 @@ export default {
     max-width: 320px;
   }
 }
+
+.progress {
+  margin-top: 1rem;
+  margin-bottom: 3rem;
+}
 </style>

core/ui/src/stories/NsPasswordInput.stories.js

@@ -14,8 +14,8 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = {
   value: "",
-  newPaswordHelperText: "",
-  confirmPaswordHelperText: "",
+  newPasswordHelperText: "",
+  confirmPasswordHelperText: "",
   newPasswordInvalidMessage: "",
   confirmPasswordInvalidMessage: "",
   newPasswordLabel: "New password",

core/ui/src/stories/NsProgress.stories.js

@@ -0,0 +1,41 @@
+import { NsProgress } from "@nethserver/ns8-ui-lib";
+
+export default {
+  title: "Components/NsProgress",
+  component: NsProgress,
+  args: {
+    stepId: "firstStep",
+    steps: [
+      {
+        id: "firstStep",
+        label: "First Step",
+      },
+      {
+        id: "secondStep",
+        label: "Second Step",
+      },
+      {
+        id: "thirdStep",
+        label: "Third Step",
+      },
+      {
+        id: "fourthStep",
+        label: "Fourth Step",
+      },
+    ],
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { NsProgress },
+  template: `<NsProgress v-bind="$props" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const SecondStep = Template.bind({});
+SecondStep.args = {
+  stepId: "secondStep",
+};

core/ui/yarn.lock

@@ -2009,9 +2009,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nethserver/ns8-ui-lib@npm:^1.9.0":
-  version: 1.9.0
-  resolution: "@nethserver/ns8-ui-lib@npm:1.9.0"
+"@nethserver/ns8-ui-lib@npm:^1.10.1":
+  version: 1.10.1
+  resolution: "@nethserver/ns8-ui-lib@npm:1.10.1"
   dependencies:
     "@rollup/plugin-json": ^4.1.0
     core-js: ^3.15.2
@@ -2020,7 +2020,7 @@ __metadata:
     vue-date-fns: ^2.0.1
   peerDependencies:
     vue: ^2.6.12
-  checksum: f5ecb1e3a17c9b1ddf7bde377f21d6458eee3710be4f9a9db20e7f1fe1989600ff3672e376c8316fdec4f88c5456d97a8ec4f3690b246245ae91f04acbbef2ce
+  checksum: d0e78509c3d5979b803a5e95f5addec5e2f6163096018cc2d5fc22364cd1dd77cabd00747240e7fd6b7e0f90ee1d5fe2c4d7b5f9e7e8b47763d71ad5b9db0fc2
   languageName: node
   linkType: hard
 
@@ -13285,7 +13285,7 @@ __metadata:
     "@carbon/icons-vue": ^10.37.0
     "@carbon/themes": ^10.34.0
     "@carbon/vue": ^2.40.0
-    "@nethserver/ns8-ui-lib": ^1.9.0
+    "@nethserver/ns8-ui-lib": ^1.10.1
     "@storybook/addon-actions": ^6.2.9
     "@storybook/addon-essentials": ^6.2.9
     "@storybook/addon-links": ^6.2.9