feat(onboarding) change loader and overall adjustments

Signed-off-by: Tomasz Wylężek <tomwylezek@gmail.com>
kumahq · Sep 23, 2021 · 3db8f49 · 3db8f49
1 parent 95976c9
commit 3db8f49
Show file tree

Hide file tree

Showing 19 changed files with 187 additions and 212 deletions.
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="loading"
+    data-testid="loading"
+  >
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Loading',
+}
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  display: flex;
+  justify-content: space-between;
+  width: 200px;
+
+  > div {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: linear-gradient(90deg, rgba(130, 45, 197, 0.3) 0%, rgba(130, 45, 197, 0.3) 107.42%);
+    animation: loadingAnimation 0.5s infinite linear alternate;
+
+    &:nth-of-type(2) {
+      animation-delay: 0.25s;
+    }
+
+    &:nth-of-type(3) {
+      animation-delay: 0.5s;
+    }
+    &:nth-of-type(4) {
+      animation-delay: 0.75s;
+    }
+    &:nth-of-type(5) {
+      animation-delay: 1s;
+    }
+  }
+}
+
+@keyframes loadingAnimation {
+  0%,
+  50% {
+    background: linear-gradient(90deg, rgba(130, 45, 197, 0.3) 0%, rgba(130, 45, 197, 0.3) 107.42%);
+  }
+
+  75% {
+    background: linear-gradient(90deg, rgba(130, 45, 197, 0.6) 0%, rgba(130, 45, 197, 0.6) 107.42%);
+  }
+
+  100% {
+    background: linear-gradient(90deg, #822dc5 0%, #822dc5 107.42%);
+  }
+}
+</style>
diff --git a/src/router.ts b/src/router.ts
@@ -471,6 +471,7 @@ export default (store: Store<RootInterface>) => {
    * so that they're not sent through it again.
    */
 
+  // TODO uncomment before merge
   // router.beforeEach(async (to, from, next) => {
   //   // eslint-disable-next-line no-unmodified-loop-condition
   //   // This below is to make sure the inital calls have been fulfilled and it does not try to

diff --git a/src/views/Onboarding/AddingNewServices.spec.ts b/src/views/Onboarding/AddingNewServices.spec.ts
@@ -13,15 +13,16 @@ describe('AddingNewServices.vue', () => {
   it('changes selected box', async () => {
     renderWithVuex(AddingNewServices)
 
-    const demoRadio = <HTMLInputElement>screen.getByLabelText(/Demo/)
-    const manuallyRadio = <HTMLInputElement>screen.getByLabelText(/Manually/)
+    const demoRadio = screen.getAllByTestId('box')[0]
+    const manuallyRadio = screen.getAllByTestId('box')[1]
 
-    expect(demoRadio.checked).toBe(true)
-    expect(manuallyRadio.checked).toBe(false)
+    expect(demoRadio.className).toMatch('box--active')
+    expect(manuallyRadio.className).not.toMatch('box--active')
 
     await userEvent.click(screen.getByText(/Custom Config/))
 
-    expect(demoRadio.checked).toBe(false)
-    expect(manuallyRadio.checked).toBe(true)
+    expect(demoRadio.className).not.toMatch('box--active')
+
+    expect(manuallyRadio.className).toMatch('box--active')
   })
 })
diff --git a/src/views/Onboarding/AddingNewServices.vue b/src/views/Onboarding/AddingNewServices.vue
@@ -41,24 +41,7 @@
       <OnboardingNavigation
         next-step="onboarding-adding-dpp-code"
         previous-step="onboarding-populating-mesh"
-      >
-        <template #selector>
-          <KRadio
-            v-model="mode"
-            name="deployment"
-            value="demo"
-          >
-            Demo
-          </KRadio>
-          <KRadio
-            v-model="mode"
-            name="deployment"
-            value="manually"
-          >
-            Manually
-          </KRadio>
-        </template>
-      </OnboardingNavigation>
+      />
     </template>
   </OnboardingPage>
 </template>

diff --git a/src/views/Onboarding/BackendTypes.vue b/src/views/Onboarding/BackendTypes.vue
@@ -4,39 +4,38 @@
       <OnboardingHeading title="2. Choose Backend Types" />
     </template>
     <template #content>
-      <div class="h-full w-full flex items-center justify-center">
+      <div class="h-full w-full flex items-center justify-center mb-10">
         <component :is="currentGraph" />
       </div>
+      <div class="radio flex text-base justify-between w-full sm:w-3/4 md:w-3/5 lg:w-1/2 absolute bottom-0 right-0 left-0 mb-10 mx-auto">
+        <KRadio
+          v-model="mode"
+          name="deployment"
+          value="kubernetess"
+        >
+          Kubernetess
+        </KRadio>
+        <KRadio
+          v-model="mode"
+          name="deployment"
+          value="postgres"
+        >
+          Postgres
+        </KRadio>
+        <KRadio
+          v-model="mode"
+          name="deployment"
+          value="memory"
+        >
+          Memory
+        </KRadio>
+      </div>
     </template>
     <template #navigation>
       <OnboardingNavigation
         next-step="onboarding-populating-mesh"
         previous-step="onboarding-deployment-types"
-      >
-        <template #selector>
-          <KRadio
-            v-model="mode"
-            name="deployment"
-            value="kubernetess"
-          >
-            Kubernetess
-          </KRadio>
-          <KRadio
-            v-model="mode"
-            name="deployment"
-            value="postgres"
-          >
-            Postgres
-          </KRadio>
-          <KRadio
-            v-model="mode"
-            name="deployment"
-            value="memory"
-          >
-            Memory
-          </KRadio>
-        </template>
-      </OnboardingNavigation>
+      />
     </template>
   </OnboardingPage>
 </template>

diff --git a/src/views/Onboarding/DataplanesOverview.vue b/src/views/Onboarding/DataplanesOverview.vue
@@ -8,13 +8,7 @@
     </template>
     <template #content>
       <div class="justify-center flex my-4">
-        <KIcon
-          v-if="!tableData.data.length"
-          data-testid="loading"
-          icon="spinner"
-          color="rgba(0, 0, 0, 0.2)"
-          size="42"
-        />
+        <Loading v-if="!tableData.data.length" />
 
         <div v-else>
           <p class="font-bold mb-4">
@@ -52,6 +46,7 @@
 import { getItemStatusFromInsight } from '@/dataplane'
 import Kuma from '@/services/kuma'
 import debounce from 'lodash/debounce'
+import Loading from '@/components/Loading'
 import OnboardingNavigation from '@/views/Onboarding/components/OnboardingNavigation'
 import OnboardingHeading from '@/views/Onboarding/components/OnboardingHeading'
 import OnboardingPage from '@/views/Onboarding/components/OnboardingPage'
@@ -62,6 +57,7 @@ export default {
     OnboardingNavigation,
     OnboardingHeading,
     OnboardingPage,
+    Loading,
   },
   data() {
     return {
@@ -100,7 +96,10 @@ export default {
     }, 1000),
   },
   created() {
-    this.getAllDataplanes()
+    // TODO remove before merge
+    setTimeout(() => {
+      this.getAllDataplanes()
+    }, 2000)
   },
   methods: {
     async getAllDataplanes() {

diff --git a/src/views/Onboarding/DeploymentTypes.vue b/src/views/Onboarding/DeploymentTypes.vue
@@ -9,33 +9,32 @@
       />
     </template>
     <template #content>
-      <div class="h-full w-full flex items-center justify-center">
+      <div class="h-full w-full flex items-center justify-center mb-10">
         <component :is="currentGraph" />
       </div>
+      <div class="radio flex text-base justify-between w-full sm:w-3/4 md:w-3/5 lg:w-1/2 absolute bottom-0 right-0 left-0 mb-10 mx-auto">
+        <KRadio
+          v-model="mode"
+          name="mode"
+          value="standalone"
+        >
+          Standalone Deployment
+        </KRadio>
+        <KRadio
+          v-model="mode"
+          name="mode"
+          value="multi-zone"
+        >
+          Multi-Zone deployment
+        </KRadio>
+      </div>
     </template>
 
     <template #navigation>
       <OnboardingNavigation
         next-step="onboarding-backend-types"
         previous-step="onboarding-welcome"
-      >
-        <template #selector>
-          <KRadio
-            v-model="mode"
-            name="mode"
-            value="standalone"
-          >
-            Standalone Deployment
-          </KRadio>
-          <KRadio
-            v-model="mode"
-            name="mode"
-            value="multi-zone"
-          >
-            Multi-Zone deployment
-          </KRadio>
-        </template>
-      </OnboardingNavigation>
+      />
     </template>
   </OnboardingPage>
 </template>

diff --git a/src/views/Onboarding/Welcome.vue b/src/views/Onboarding/Welcome.vue
@@ -34,15 +34,14 @@
     </template>
 
     <template #navigation>
-      <OnboardingNavigation
-        next-step="onboarding-deployment-types"
-      />
+      <OnboardingNavigation next-step="onboarding-deployment-types" />
     </template>
   </OnboardingPage>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { PRODUCT_NAME } from '@/consts'
 import OnboardingNavigation from '@/views/Onboarding/components/OnboardingNavigation'
 import OnboardingPage from '@/views/Onboarding/components/OnboardingPage'
 import OnboardingHeading from '@/views/Onboarding/components/OnboardingHeading'
@@ -56,7 +55,8 @@ export default {
   },
   metaInfo() {
     return {
-      title: `Welcome to ${this.$productName}!`,
+      // TODO CHANGE
+      title: `Welcome to ${PRODUCT_NAME}!`,
     }
   },
   computed: {

diff --git a/src/views/Onboarding/__snapshots__/AddingNewServices.spec.ts.snap b/src/views/Onboarding/__snapshots__/AddingNewServices.spec.ts.snap
@@ -48,6 +48,7 @@ exports[`AddingNewServices.vue renders snapshot 1`] = `
         >
           <div
             class="cursor-pointer box box--active"
+            data-testid="box"
           >
             <div>
               <img
@@ -74,6 +75,7 @@ exports[`AddingNewServices.vue renders snapshot 1`] = `
            
           <div
             class="cursor-pointer box"
+            data-testid="box"
           >
             <div
               class="cursor-pointer"
@@ -118,52 +120,6 @@ exports[`AddingNewServices.vue renders snapshot 1`] = `
   
       </a>
        
-      <div
-        class="radio flex justify-between w-full sm:w-3/5 md:w-1/2 lg:w-2/5"
-      >
-        <label
-          class="k-radio d-inline-block"
-          data-v-b7148f78=""
-          name="deployment"
-        >
-          <input
-            class="k-input float-left"
-            data-v-b7148f78=""
-            name="deployment"
-            type="radio"
-          />
-          <span
-            class="float-left"
-            data-v-b7148f78=""
-          >
-            
-          Demo
-        
-          </span>
-        </label>
-         
-        <label
-          class="k-radio d-inline-block"
-          data-v-b7148f78=""
-          name="deployment"
-        >
-          <input
-            class="k-input float-left"
-            data-v-b7148f78=""
-            name="deployment"
-            type="radio"
-          />
-          <span
-            class="float-left"
-            data-v-b7148f78=""
-          >
-            
-          Manually
-        
-          </span>
-        </label>
-      </div>
-       
       <a
         aria-current="page"
         class="k-button navigation-button navigation-button--next router-link-exact-active router-link-active primary"