Merge pull request #24 from cloudblue/fix/several-layout-glitches

maxipavlovic · web-flow · commit aad4394cbb49 · 2023-04-19T12:28:08.000+02:00
Fix several layout and frontend issues driven by feedback
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,3 +28,9 @@
   * Max number of allowed DB per account can now be set via `DB_MAX_ALLOWED_NUMBER_PER_ACCOUNT` env variable 
   * Frontend changes:
     * 400 and 422 server errors are better handled
+* 0.4.1: Frontend improvements
+  * Disabled editing of Technical Contact by administrator
+  * Trim credentials fields on input
+  * Fixed vertical scrolling
+  * Fixed radio buttons layout for Safari
+  * Improved reliability of several UI pieces
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.0",
+  "version": "0.4.1",
   "audience": ["reseller", "distributor", "vendor"],
-  "readme_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.0/README.md",
-  "changelog_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.0/CHANGELOG.md",
+  "readme_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.1/README.md",
+  "changelog_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.1/CHANGELOG.md",
   "icon": "googleExtensionBaseline"
 }
diff --git a/dbaas/static/5e8a3053c924195caa3d.js b/dbaas/static/5e8a3053c924195caa3d.js
diff --git a/dbaas/static/5e8a3053c924195caa3d.js.LICENSE.txt b/dbaas/static/5e8a3053c924195caa3d.js.LICENSE.txt
diff --git a/dbaas/static/7cace99224d3d55c5b00.js b/dbaas/static/7cace99224d3d55c5b00.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="7cace99224d3d55c5b00.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="5e8a3053c924195caa3d.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.0",
+  "version": "0.4.1",
   "description": "On-demand provisioning of cloud-based database storages as a service.",
   "author": "Ingram Micro",
   "license": "Apache Software License 2.0",
diff --git a/ui/app/components/ezToolbar.vue b/ui/app/components/ezToolbar.vue
@@ -50,8 +50,9 @@ export default {
   height: 64px;
   left: 0px;
   right: 0px;
-  background: $theme-controls-background;
+  background: #fcfcfc;
   border-bottom: 1px solid $theme-border-color;
+  z-index: 1;
 
   &__title {
     font-weight: 500;
diff --git a/ui/app/store.js b/ui/app/store.js
@@ -11,6 +11,10 @@ export default new Vuex.Store({
     },
   },
 
+  getters: {
+    installationContext: ({ installationContext }) => installationContext,
+  },
+
   mutations: {
     setInstallationContext(state, ctx) {
       state.installationContext = Object.assign(state.installationContext, ctx);
diff --git a/ui/app/styles/layout.styl b/ui/app/styles/layout.styl
@@ -11,7 +11,7 @@
 html,
 body {
   height: 100%;
-  overflow-y: hidden;
+  overflow-y: auto;
   overflow-x: auto;
   margin: 0;
 }
diff --git a/ui/app/styles/materialize.styl b/ui/app/styles/materialize.styl
@@ -27,6 +27,10 @@ input[type=text][materialize] {
     outline-width: 0;
     border-color: $accent;
   }
+
+  &:disabled {
+    border-style: dashed;
+  }
 }
 
 input[type=password][materialize] {
@@ -51,6 +55,10 @@ input[type=password][materialize] {
     outline-width: 0;
     border-color: $accent;
   }
+
+  &:disabled {
+    border-style: dashed;
+  }
 }
 
 textarea[materialize] {
@@ -75,6 +83,10 @@ textarea[materialize] {
     outline-width: 0;
     border-color: $accent;
   }
+
+  &:disabled {
+    border-style: dashed;
+  }
 }
 
 input[type=radio][materialize] {
@@ -91,8 +103,7 @@ input[type=radio][materialize] {
   cursor: pointer;
 
   &:checked {
-    outline: solid 5.5px $accent !important;
-    outline-offset: -100px;
+    background: radial-gradient(circle, $accent 45%, rgba(255,255,255,0) 45%)
     border-color: $accent;
   }
 
@@ -145,7 +156,6 @@ label[materialize] {
   line-height: 1.2em;
 
   &[for] {
-
     cursor: pointer;
   }
 }
@@ -180,4 +190,8 @@ select[materialize] {
     outline-width: 0;
     border-color: $accent;
   }
+
+  &:disabled {
+    border-style: dashed;
+  }
 }
diff --git a/ui/app/views/ActivateDialog.vue b/ui/app/views/ActivateDialog.vue
@@ -10,24 +10,47 @@ ez-dialog(
       .detail-item-head.item-label._mb_8 Username
         sup.red._ml_4 *
       .detail-item__text
-        input(required, v-model="form.credentials.username", type="text", materialize)
+        input(
+          required,
+          v-model="form.credentials.username",
+          @input="form.credentials.username = form.credentials.username.trim()"
+          type="text",
+          materialize,
+        )
 
     .detail-item
       .detail-item-head.item-label._mb_8 Password
         sup.red._ml_4 *
       .detail-item__text
-        input(required, v-model="form.credentials.password", type="password" materialize)
+        input(
+          required,
+          v-model="form.credentials.password",
+          @input="form.credentials.password = form.credentials.password.trim()"
+          type="password",
+          materialize,
+        )
 
     .detail-item
       .detail-item-head.item-label._mb_8 Host
         sup.red._ml_4 *
       .detail-item__text
-        input(required, v-model="form.credentials.host", type="text", materialize)
+        input(
+          required,
+          v-model="form.credentials.host",
+          @input="form.credentials.host = form.credentials.host.trim()"
+          type="text",
+          materialize,
+        )
 
     .detail-item
       .detail-item-head.item-label._mb_8 DB Name
       .detail-item__text
-        input(v-model="form.credentials.name", type="text", materialize)
+        input(
+          v-model="form.credentials.name",
+          @input="form.credentials.name = form.credentials.name.trim()"
+          type="text",
+          materialize,
+        )
 
   ._mt_24
 
@@ -153,10 +176,11 @@ export default {
     value: {
       immediate: true,
       handler(v) {
+        if (!this.item) return;
         this.errorText = null;
 
         const data = clone(this.item);
-        if (!data?.credentials) data.credentials = initialForm().credentials;
+        if (!data.credentials) data.credentials = initialForm().credentials;
         this.form = data;
 
         this.dialogOpened = v;
diff --git a/ui/app/views/CreateEditDialog.vue b/ui/app/views/CreateEditDialog.vue
@@ -59,10 +59,14 @@ ez-dialog(
       .detail-item-head.item-label._mb_8 User
         sup._ml_4.red *
       .detail-item__text
-        select(materialize, v-model="form.tech_contact.id")
+        select(
+          materialize,
+          v-model="form.tech_contact.id",
+          :disabled="isEdit && installationContext.isAdmin"
+        )
           option(disabled) Choose user
           option(
-            v-for="user in users",
+            v-for="user in (isEdit && installationContext.isAdmin ? [item.tech_contact] : users)",
             :value="user.id",
             :key="user.id",
           ) {{ user.name }} ({{ user.email }})
@@ -115,6 +119,7 @@ import {
 
 import {
   mapActions,
+  mapGetters,
 } from 'vuex';
 
 import {
@@ -171,6 +176,8 @@ export default {
   }),
 
   computed: {
+    ...mapGetters(['installationContext']),
+
     isEdit: ({ item }) => Boolean(item),
     allowSaving: ({ isEdit, acceptTermsAndConds, form }) => Boolean((
       isEdit
diff --git a/ui/app/views/ItemDetails.vue b/ui/app/views/ItemDetails.vue
@@ -177,7 +177,7 @@ div
 <script>
 import {
   mapActions,
-  mapState,
+  mapGetters,
 } from 'vuex';
 
 import {
@@ -260,7 +260,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['installationContext']),
+    ...mapGetters(['installationContext']),
 
     databaseUrl: ({ localItem }) => {
       if (!localItem?.credentials) return { showPassword: '–', hidePassword: '–' };
diff --git a/ui/app/views/ItemsList.vue b/ui/app/views/ItemsList.vue
@@ -43,7 +43,7 @@ div
         a.detail-item__text(@click="$emit('item-clicked', item)") {{ item.name }}
         .detail-item__assistive-text
           span {{ item.id }}
-          span(v-if="installationContext.isAdmin")  • {{ item.owner.id }}
+          span(v-if="installationContext.isAdmin && item.owner")  • {{ item.owner.id }}
 
     template(#description="{ value }")
       .assistive-text {{ value }}
@@ -59,7 +59,7 @@ div
 
 <script>
 import {
-  mapState,
+  mapGetters,
 } from 'vuex';
 
 import {
@@ -100,7 +100,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['installationContext']),
+    ...mapGetters(['installationContext']),
 
     placeholderIcon: () => googleStorageBaseline,
 

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "DBaaS",`
`3`	`3`	`"description": "On-demand provisioning of cloud-based database storages as a service.",`
`4`		`- "version": "0.4.0",`
	`4`	`+ "version": "0.4.1",`
`5`	`5`	`"audience": ["reseller", "distributor", "vendor"],`
`6`		`- "readme_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.0/README.md",`
`7`		`- "changelog_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.0/CHANGELOG.md",`
	`6`	`+ "readme_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.1/README.md",`
	`7`	`+ "changelog_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.4.1/CHANGELOG.md",`
`8`	`8`	`"icon": "googleExtensionBaseline"`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +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="7cace99224d3d55c5b00.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>`
	`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="5e8a3053c924195caa3d.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@cloudblueconnect/eaas-database-extension",`
`3`		`- "version": "0.4.0",`
	`3`	`+ "version": "0.4.1",`
`4`	`4`	`"description": "On-demand provisioning of cloud-based database storages as a service.",`
`5`	`5`	`"author": "Ingram Micro",`
`6`	`6`	`"license": "Apache Software License 2.0",`