Merge pull request #29 from cloudblue/enh/LITE-27290

LITE-27290 Simplification and adjustment of UI dialogs
cloudblue · Oct 2, 2023 · a4dc562 · a4dc562
2 parents 647c7d6 + 5780199
commit a4dc562
Show file tree

Hide file tree

Showing 17 changed files with 2,466 additions and 14,576 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,4 +38,8 @@
 * 0.4.3: Backend dependencies are bumped
 * 0.4.4:
   * Better representation of DB events (created, updated) in UI
+  * Dependencies are bumped
+* 0.4.5:
+  * Simplification and adjustment of UI dialogs: create, update and reconfigure
+  * Other minor UI changes
   * Dependencies are bumped
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM cloudblueconnect/connect-extension-runner:28.9
+FROM cloudblueconnect/connect-extension-runner:29.0
 
 COPY pyproject.toml /install_temp/.
 COPY poetry.* /install_temp/.

diff --git a/dbaas/extension.json b/dbaas/extension.json
@@ -1,9 +1,9 @@
 {
   "name": "DBaaS",
   "description": "On-demand provisioning of cloud-based database storages as a service.",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "audience": ["reseller", "distributor", "vendor"],
-  "readme_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.4/README.md",
-  "changelog_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.4/CHANGELOG.md",
+  "readme_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.5/README.md",
+  "changelog_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.5/CHANGELOG.md",
   "icon": "googleExtensionBaseline"
 }
diff --git a/dbaas/static/42278e530abc73365252.js b/dbaas/static/42278e530abc73365252.js
diff --git a/...tatic/c55edcf1aaed6138c34b.js.LICENSE.txt → ...tatic/42278e530abc73365252.js.LICENSE.txt b/...tatic/c55edcf1aaed6138c34b.js.LICENSE.txt → ...tatic/42278e530abc73365252.js.LICENSE.txt
diff --git a/dbaas/static/c55edcf1aaed6138c34b.js b/dbaas/static/c55edcf1aaed6138c34b.js
diff --git a/dbaas/static/index.html b/dbaas/static/index.html
@@ -1 +1 @@
-<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:400,500|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="c55edcf1aaed6138c34b.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
+<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:400,500|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="42278e530abc73365252.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
diff --git a/dbaas/static/main.css b/dbaas/static/main.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cloudblueconnect/eaas-database-extension",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "On-demand provisioning of cloud-based database storages as a service.",
   "author": "Ingram Micro",
   "license": "Apache Software License 2.0",

diff --git a/poetry.lock b/poetry.lock
diff --git a/ui/app/App.vue b/ui/app/App.vue
@@ -52,5 +52,9 @@ export default {
 
 <style lang="stylus">
 @import '~styles/app.styl';
+
+.detail-item-head {
+  font-weight: 500;
+}
 </style>
 
diff --git a/ui/app/views/ActivateDialog.vue b/ui/app/views/ActivateDialog.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 ez-dialog(
   v-model="dialogOpened",
-  width="800",
+  width="580",
   title="Activate database",
   :error-text="errorText",
 )

diff --git a/ui/app/views/CreateEditDialog.vue b/ui/app/views/CreateEditDialog.vue
@@ -1,98 +1,93 @@
 <template lang="pug">
 ez-dialog(
   v-model="dialogOpened",
-  width="800",
+  width="580",
   title="Request database",
   :error-text="errorText",
 )
-  ui-card(title="General")
-    // CREATE MODE
-    div(v-if="!isEdit")
-      .two-columns
-        .detail-item._mt_0
-          .detail-item-head.item-label._mb_8 Name
-            sup.red._ml_4 *
-          .detail-item__text
-            input(required, v-model="form.name", type="text", materialize)
-
-        .detail-item._mt_0
-          .detail-item-head.item-label._mb_8 Region
-            sup.red._ml_4 *
-          .detail-item__text
-            select(required, materialize, v-model="form.region.id")
-              option(disabled) Choose region
-              option(
-                v-for="region in regions",
-                :value="region.id",
-                :key="region.id",
-              ) {{ region.name }}
-
-      .detail-item
-        .detail-item-head.item-label._mb_12 Workload type
-        .detail-item__text.vertical-middle
-          input#small(type="radio" v-model="form.workload" value="small", materialize)
-          label._ml_8(for="small", materialize) Small
-          ._ml_24
-          input#medium(type="radio" v-model="form.workload" value="medium", materialize)
-          label._ml_8(for="medium", materialize) Medium
-          ._ml_24
-          input#large._ml_24(type="radio" v-model="form.workload" value="large", materialize)
-          label._ml_8(for="large", materialize) Large
-
-      p._mt_16._mb_0.assistive-text {{ workloadDescriptions[form.workload] }}
-        a._ml_4(
-          href="https://learn.microsoft.com/en-us/azure/postgresql/flexible-server/concepts-limits#maximum-connections",
-          target="_blank",
-        ) Read more
-
-    // EDIT MODE
-    .detail-item._mt_0(v-if="isEdit")
+  // CREATE MODE
+  div(v-if="!isEdit")
+    .detail-item._mt_0
       .detail-item-head.item-label._mb_8 Name
         sup.red._ml_4 *
       .detail-item__text
         input(required, v-model="form.name", type="text", materialize)
 
-  ._mt_24
-
-  ui-card(title="Technical contact")
     .detail-item
-      .detail-item-head.item-label._mb_8 User
-        sup._ml_4.red *
+      .detail-item-head.item-label._mb_8 Region
+        sup.red._ml_4 *
       .detail-item__text
-        select(
-          materialize,
-          v-model="form.tech_contact.id",
-          :disabled="isEdit && installationContext.isAdmin"
-        )
-          option(disabled) Choose user
+        select(required, materialize, v-model="form.region.id")
+          option(disabled) Choose region
           option(
-            v-for="user in (isEdit && installationContext.isAdmin ? [item.tech_contact] : users)",
-            :value="user.id",
-            :key="user.id",
-          ) {{ user.name }} ({{ user.email }})
+            v-for="region in regions",
+            :value="region.id",
+            :key="region.id",
+          ) {{ region.name }}
 
     .detail-item
-      .detail-item-head.item-label._mb_8 Planned database workload
-        sup.red._ml_4 *
-      .detail-item__text
-        textarea(v-model="form.description", materialize)
-
-    p.font-size_smaller._mt_44(v-if="!isEdit")
-      | By checking the “I have read and accepted the agreement” box located on this page,
-      | you agree to be bound by this agreement. You represent and warrant that you have
-      | the authority to bind the entity on behalf of which you are creating an account to the
-      | terms of this agreement.
-
-    .vertical-middle._mt_16(v-if="!isEdit")
-      input#acceptTermsAndConds(
-        required,
-        type="checkbox"
-        v-model="acceptTermsAndConds",
+      .detail-item-head.item-label._mb_12 Workload Type
+      .detail-item__text.vertical-middle
+        input#small(type="radio" v-model="form.workload" value="small", materialize)
+        label._ml_8(for="small", materialize) Small
+        ._ml_24
+        input#medium(type="radio" v-model="form.workload" value="medium", materialize)
+        label._ml_8(for="medium", materialize) Medium
+        ._ml_24
+        input#large._ml_24(type="radio" v-model="form.workload" value="large", materialize)
+        label._ml_8(for="large", materialize) Large
+
+    p._mt_16._mb_0.assistive-text {{ workloadDescriptions[form.workload] }}
+      a._ml_4(
+        href="https://learn.microsoft.com/en-us/azure/postgresql/flexible-server/concepts-limits#maximum-connections",
+        target="_blank",
+      ) Read more
+
+  // EDIT MODE
+  .detail-item._mt_0(v-if="isEdit")
+    .detail-item-head.item-label._mb_8 Name
+      sup.red._ml_4 *
+    .detail-item__text
+      input(required, v-model="form.name", type="text", materialize)
+
+  .detail-item
+    .detail-item-head.item-label._mb_8 Technical Contact
+      sup._ml_4.red *
+    .detail-item__text
+      select(
         materialize,
+        v-model="form.tech_contact.id",
+        :disabled="isEdit && installationContext.isAdmin"
       )
+        option(disabled) Choose user
+        option(
+          v-for="user in (isEdit && installationContext.isAdmin ? [item.tech_contact] : users)",
+          :value="user.id",
+          :key="user.id",
+        ) {{ user.name }} ({{ user.email }})
+
+  .detail-item
+    .detail-item-head.item-label._mb_8 Planned Database Workload
+      sup.red._ml_4 *
+    .detail-item__text
+      textarea(v-model="form.description", materialize)
+
+  p.font-size_smaller._mt_24(v-if="!isEdit")
+    | By checking the “I have read and accepted the agreement” box located on this page,
+    | you agree to be bound by this agreement. You represent and warrant that you have
+    | the authority to bind the entity on behalf of which you are creating an account to the
+    | terms of this agreement.
+
+  .vertical-middle._mt_16(v-if="!isEdit")
+    input#acceptTermsAndConds(
+      required,
+      type="checkbox"
+      v-model="acceptTermsAndConds",
+      materialize,
+    )
 
-      label._ml_8(required, for="acceptTermsAndConds", materialize)
-        | I agree to all terms and conditions
+    label._ml_8(required, for="acceptTermsAndConds", materialize)
+      | I agree to all terms and conditions
 
   template(#actions="")
     c-button(
@@ -196,9 +191,9 @@ export default {
     )),
 
     workloadDescriptions: () => ({
-      small: 'Plan "B2s". vCores: 2; Memory Size: 4Gb; Max Connections: 100; Max User Connections: 97',
-      medium: 'Plan "D2s_v3". vCores: 2; Memory Size: 8Gb; Max Connections: 859; Max User Connections: 856',
-      large: 'Plan "D8s_v3". vCores: 8; Memory Size: 32Gb; Max Connections: 3438; Max User Connections: 3435',
+      small: 'Plan "B2s". vCores: 2; Mem Size: 4Gb; Max Conns: 100; Max User Conns: 97',
+      medium: 'Plan "D2s_v3". vCores: 2; Mem Size: 8Gb; Max Conns: 859; Max User Conns: 856',
+      large: 'Plan "D8s_v3". vCores: 8; Mem Size: 32Gb; Max Conns: 3438; Max User Conns: 3435',
     }),
   },
 
@@ -273,17 +268,6 @@ export default {
   color: $nice-red;
 }
 
-.two-columns {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  & > * {
-    width: calc(50% - 8px);
-  }
-}
-
 .vertical-middle {
   display: flex;
   justify-content: flex-start;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Roboto+Mono:400,500\|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="c55edcf1aaed6138c34b.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
		<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Roboto+Mono:400,500\|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="42278e530abc73365252.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>