LITE-28855: create request dialog feedback

connect_ext_ppr/static/index.b861039a3d9cbe776fbe.css → connect_ext_ppr/static/index.078542b7141079d77ac1.css

@@ -171,9 +171,8 @@ button .c-icon {
   align-items: flex-start;
 }
 .c-alert_dense {
-  min-height: 56px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  min-height: 32px;
+  padding: 6px 24px;
 }
 .c-alert_fluid {
   display: flex;
@@ -1853,13 +1852,6 @@ button + .c-text-field__append-inner > svg[data-v-b5bb9caa]:first-child {
   margin-top: 0;
 }
 
-/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/CreateDeploymentRequestDialog/PprTab.vue?vue&type=style&index=0&id=239e179d&lang=stylus& ***!
-  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
-.products-tab__detail {
-  margin-top: 0;
-}
-
 /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/cChip.vue?vue&type=style&index=0&id=cf32a144&lang=stylus& ***!
   \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@@ -1946,6 +1938,16 @@ button + .c-text-field__append-inner > svg[data-v-b5bb9caa]:first-child {
   border-radius: 2px;
 }
 
+/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/CreateDeploymentRequestDialog/PprTab.vue?vue&type=style&index=0&id=239e179d&lang=stylus& ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.ppr-tab__chip {
+  margin-left: 8px;
+}
+.ppr-tab__version :first-child {
+  margin-right: 4px;
+}
+
 /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/stylus-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./ui/src/components/CreateDeploymentRequestDialog/SummaryTab.vue?vue&type=style&index=0&id=a449222e&lang=stylus&scoped=true& ***!
   \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

connect_ext_ppr/static/index.html

@@ -12,7 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <title>Index</title>
-<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="index.a9096f4123c488fa9dcd.js"></script><link href="index.b861039a3d9cbe776fbe.css" rel="stylesheet"></head>
+<script defer src="vendors.477dfeaddc3332b16684.js"></script><script defer src="index.4c619a533d33ed5d4dad.js"></script><link href="index.078542b7141079d77ac1.css" rel="stylesheet"></head>
 
 <body>
     <div id="app"></div>

connect_ext_ppr/static/settings.html

@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Settings</title>
-<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="settings.bd5ea671e480c7aabff3.js"></script><link href="settings.228c534170f31239141d.css" rel="stylesheet"></head>
+<script defer src="vendors.477dfeaddc3332b16684.js"></script><script defer src="settings.bd5ea671e480c7aabff3.js"></script><link href="settings.228c534170f31239141d.css" rel="stylesheet"></head>
 
 <body>
     <div id="loader"></div>

ui/src/components/CheckboxTable.vue

@@ -45,6 +45,7 @@
 
 <script>
 import {
+  equals,
   includes,
 } from 'ramda';
 
@@ -132,7 +133,7 @@ export default {
     toggleSelected(value) {
       const currentValue = (this.returnObject) ? value : value[this.valueProp];
 
-      const index = this.localValue.indexOf(currentValue);
+      const index = this.localValue.findIndex(equals(currentValue));
 
       if (index > -1) {
         this.localValue.splice(index, 1);

ui/src/components/CreateDeploymentRequestDialog/HubsTab.vue

@@ -101,6 +101,7 @@ export default {
     try {
       this.loading = true;
       this.hubs = await getProductHubs(this.productId);
+      if (this.localValue?.id) this.selectedHubId = this.localValue.id;
     } catch (e) {
       this.hubs = [];
       this.$emit('error', e);

ui/src/components/CreateDeploymentRequestDialog/MarketplacesTab.vue

@@ -28,11 +28,11 @@ checkbox-table.marketplaces-tab(
 
   template(#externalId="{ row }")
     span(v-if="row.externalId") {{ row.externalId }}
-    span.assistive-text(v-else) –
+    span.assistive-color(v-else) —
 
   template(#appliedPpr="{ row }")
     span(v-if="row.appliedPprVersion") Version {{ row.appliedPprVersion }}
-    span.assistive-text(v-else) –
+    span.assistive-color(v-else) —
 
 </template>
 
@@ -93,11 +93,15 @@ export default {
   }),
 
   computed: {
-    filteredMarketplaces: ({ marketplaces, searchValue }) => {
+    filteredMarketplaces: ({ marketplaces, searchValue, prepareRow }) => {
       const lowerCaseSearch = searchValue.toLowerCase();
 
-      return marketplaces.filter(({ id, name }) => name.toLowerCase().includes(lowerCaseSearch)
-        || id.toLowerCase().includes(lowerCaseSearch));
+      const filteredMarketplaces = marketplaces.filter(({ id, name }) => (
+        name.toLowerCase().includes(lowerCaseSearch)
+        || id.toLowerCase().includes(lowerCaseSearch)
+      ));
+
+      return filteredMarketplaces.map(prepareRow);
     },
   },
 
@@ -134,6 +138,8 @@ export default {
     try {
       this.loading = true;
       this.marketplaces = await getDeploymentMarketplaces(this.deploymentId);
+      if (this.value.all) this.isAllSelected = true;
+      else if (this.value.choices.length) this.selectedMarketplaces = this.value.choices;
     } catch (e) {
       this.marketplaces = [];
       this.$emit('error', e);

ui/src/components/CreateDeploymentRequestDialog/PprTab.vue

@@ -15,20 +15,29 @@ radio-table.products-tab(
         size="16px",
       )
       span Version {{ row?.version }}
+      c-chip.ppr-tab__chip(
+        v-if="row.isFailed",
+        :icon="icons.googleWarningBaseline",
+        color="orange",
+        text="PPR failed",
+        small,
+      )
 
   template(#description="{ row }")
     .truncate-text(v-if="row.description") {{ row.description }}
-    span.assistive-text(v-else) —
+    span.assistive-color(v-else) —
 
 </template>
 
 <script>
 import {
   googleDescriptionBaseline,
+  googleWarningBaseline,
 } from '@cloudblueconnect/material-svg';
 
 import removeMarkdown from 'remove-markdown';
 
+import cChip from '~components/cChip.vue';
 import cIcon from '~components/cIcon.vue';
 import RadioTable from '~components/RadioTable.vue';
 
@@ -43,6 +52,7 @@ export default {
   mixins: [sync([{ prop: 'value', local: 'localValue' }])],
 
   components: {
+    cChip,
     cIcon,
     RadioTable,
   },
@@ -74,14 +84,18 @@ export default {
       },
     ],
 
-    icons: { googleDescriptionBaseline },
+    icons: {
+      googleDescriptionBaseline,
+      googleWarningBaseline,
+    },
   }),
 
   methods: {
     prepareRow(item) {
       return {
         id: item.id,
         version: item.version,
+        isFailed: item.status === 'failed',
         description: item.description ? removeMarkdown(item.description) : '',
       };
     },
@@ -97,6 +111,7 @@ export default {
     try {
       this.loading = true;
       this.pprs = await getPPRs(this.deploymentId);
+      if (this.localValue?.id) this.selectedPprVersion = this.localValue.id;
     } catch (e) {
       this.pprs = [];
       this.$emit('error', e);
@@ -109,7 +124,16 @@ export default {
 </script>
 
 <style lang="stylus">
-.products-tab__detail {
-  margin-top: 0;
+.ppr-tab {
+  &__chip {
+    margin-left: 8px;
+  }
+
+  &__version {
+    :first-child {
+      margin-right: 4px;
+    }
+  }
 }
+
 </style>

ui/src/components/CreateDeploymentRequestDialog/ProductsTab.vue

@@ -124,6 +124,7 @@ export default {
     try {
       this.loading = true;
       this.products = await getProducts();
+      if (this.localValue?.id) this.selectedProductId = this.localValue.id;
     } catch (e) {
       this.products = [];
       this.$emit('error', e);

ui/src/components/DeploymentMarketplacesTab.vue

@@ -42,7 +42,7 @@
             :key="header.value",
           )
             span(v-if="row.appliedPprVersion") Version {{ row.appliedPprVersion }}
-            span.assistive-text(v-else) –
+            span.assistive-color(v-else) —
 
           //- Pricing Batch column
           td.nowrap-cell(

ui/src/components/DeploymentRequestsTab.vue

@@ -50,7 +50,7 @@
             :key="header.value",
           )
             span(v-if="row.created") {{ row.created | utcToLocal }}
-            span.assistive-text(v-else) –
+            span.assistive-color(v-else) —
 
           //- Status column
           td.nowrap-cell(

ui/src/components/PprSummaryDialog.vue

@@ -35,7 +35,7 @@ c-dialog.ppr-summary-dialog(
       v-if="ppr.description",
       :content="ppr.description",
     )
-    .assistive-text(v-else) —
+    .assistive-color(v-else) —
 
 </template>
 

ui/src/components/PprTab.vue

@@ -58,15 +58,15 @@
             :key="header.value",
           )
             template(v-if="row.fileSize") {{ row.fileSize }}
-            span.assistive-text(v-else) —
+            span.assistive-color(v-else) —
 
           //- Description column
           td.nowrap-cell(
             v-if="header.value === 'description'",
             :key="header.value",
           )
             .truncate-text(v-if="row.description") {{ row.description }}
-            span.assistive-text(v-else) —
+            span.assistive-color(v-else) —
 
           //- Status column
           td.nowrap-cell(

ui/src/components/RadioTable.vue

@@ -79,7 +79,7 @@ export default {
   },
 
   data: () => ({
-    localValue: false,
+    localValue: '',
     localSearch: '',
   }),
 

ui/src/components/RequestTasksTab.vue

@@ -30,15 +30,15 @@
             :key="header.value",
           )
             span(v-if="row.processed") {{ row.processed | utcToLocal }}
-            span.assistive-text(v-else) –
+            span.assistive-color(v-else) —
 
           //- Elapsed column
           td.nowrap-cell(
             v-if="header.value === 'elapsed'",
             :key="header.value",
           )
             span(v-if="row.elapsed") {{ row.elapsed }}
-            span.assistive-text(v-else) –
+            span.assistive-color(v-else) –
 
           //- Status column
           td.nowrap-cell(

ui/src/components/UploadFile.vue

@@ -29,7 +29,7 @@
     .dz-default.file-upload__message
       .file-upload__message-text(v-html="messageText")
 
-  .assistive-text._mt_4 {{ uploadHintMessageText }}
+  .assistive-color._mt_4 {{ uploadHintMessageText }}
 
   .file-upload__error(v-if="isErrorShown")
     | {{ errorMessages[0] }}

ui/src/components/cAlert.vue

@@ -105,9 +105,8 @@ export default {
 }
 
 .c-alert_dense {
-  min-height: 56px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  min-height: 32px;
+  padding: 6px 24px;
 }
 
 .c-alert_fluid {

ui/src/components/cDialog.vue

@@ -56,7 +56,10 @@
 
                 .c-vertical-tab__content
                   .truncate-text {{ tab.label }}
-                  .assistive-text(v-if="tab.assistiveText") {{ tab.assistiveText }}
+                  .truncate-text.assistive-text(
+                    v-if="tab.assistiveText",
+                    :title="tab.assistiveText",
+                  ) {{ tab.assistiveText }}
 
       .c-window__right-sidebar.c-window__scroller(
         v-if="$slots['right-sidebar']",

ui/src/components/cRadio.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.c-radio(@click.capture.prevent="toggleValue")
+.c-radio(@click.capture.prevent="select")
   c-icon.c-radio__box(
     :icon="radioIcon",
     :color="localValue ? '#2C98F0' : ''",
@@ -51,8 +51,8 @@ export default {
   },
 
   methods: {
-    toggleValue() {
-      this.localValue = !this.localValue;
+    select() {
+      this.localValue = true;
     },
   },
 };