web/satellite: routes and initial components for objects page

WHAT: routes and components for new upload file feature WHY: upload file from browser feature. Step 1 Change-Id: If517fd4513757aeaee64764d1894f1af3e463b55
2021-02-22 18:46:07 +02:00 · 2021-02-22 18:46:07 +02:00 · b5f83f463b
commit b5f83f463b
parent 9491df76e7
9 changed files with 125 additions and 9 deletions
--- a/web/satellite/src/components/navigation/NavigationArea.vue
+++ b/web/satellite/src/components/navigation/NavigationArea.vue
@ -12,7 +12,7 @@
            :to="navItem.path"
        >
            <div class="navigation-area__item-container__link">
-                <component :is="navItem.icon"></component>
+                <component class="navigation-area__item-container__link__icon" :is="navItem.icon"/>
                <p class="navigation-area__item-container__link__title">{{navItem.name}}</p>
            </div>
        </router-link>
@ -26,6 +26,7 @@ import EditProjectDropdown from '@/components/navigation/EditProjectDropdown.vue

 import AccessGrantsIcon from '@/../static/images/navigation/apiKeys.svg';
 import DashboardIcon from '@/../static/images/navigation/dashboard.svg';
+import ObjectsIcon from '@/../static/images/navigation/objects.svg';
 import TeamIcon from '@/../static/images/navigation/team.svg';

 import { RouteConfig } from '@/router';
@ -37,6 +38,7 @@ import { NavigationLink } from '@/types/navigation';
        AccessGrantsIcon,
        TeamIcon,
        EditProjectDropdown,
+        ObjectsIcon,
    },
 })
 export default class NavigationArea extends Vue {
@ -45,6 +47,7 @@ export default class NavigationArea extends Vue {
     */
    public readonly navigation: NavigationLink[] = [
        RouteConfig.ProjectDashboard.withIcon(DashboardIcon),
+        RouteConfig.Objects.withIcon(ObjectsIcon),
        RouteConfig.AccessGrants.withIcon(AccessGrantsIcon),
        RouteConfig.Users.withIcon(TeamIcon),
    ];
@ -102,12 +105,16 @@ export default class NavigationArea extends Vue {
                justify-content: flex-start;
                align-items: center;

+                &__icon {
+                    min-width: 24px;
+                }
+
                &__title {
                    font-family: 'font_medium', sans-serif;
                    font-size: 16px;
                    line-height: 23px;
                    color: #1b2533;
-                    margin: 0 0 0 15px;
+                    margin: 0 0 0 18px;
                    white-space: nowrap;
                }
            }
--- a/web/satellite/src/components/objects/CreatePassphrase.vue
+++ b/web/satellite/src/components/objects/CreatePassphrase.vue
@ -0,0 +1,9 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class CreatePassphrase extends Vue {}
+</script>
--- a/web/satellite/src/components/objects/EnterPassphrase.vue
+++ b/web/satellite/src/components/objects/EnterPassphrase.vue
@ -0,0 +1,9 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class EnterPassphrase extends Vue {}
+</script>
--- a/web/satellite/src/components/objects/ObjectsArea.vue
+++ b/web/satellite/src/components/objects/ObjectsArea.vue
@ -0,0 +1,40 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="objects-area">
+        <div class="objects-area__header">
+            <h1 class="objects-area__header__title">File</h1>
+        </div>
+        <router-view/>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class ObjectsArea extends Vue {}
+</script>
+
+<style scoped lang="scss">
+    .objects-area {
+        padding: 20px 45px;
+
+        &__header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            &__title {
+                font-family: 'font_medium', sans-serif;
+                font-style: normal;
+                font-weight: bold;
+                font-size: 18px;
+                line-height: 26px;
+                color: #232B34;
+                margin: 0;
+            }
+        }
+    }
+</style>
--- a/web/satellite/src/components/objects/UploadFile.vue
+++ b/web/satellite/src/components/objects/UploadFile.vue
@ -0,0 +1,9 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class UploadFile extends Vue {}
+</script>
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@ -18,6 +18,10 @@ import DetailedHistory from '@/components/account/billing/depositAndBillingHisto
 import CreditsHistory from '@/components/account/billing/freeCredits/CreditsHistory.vue';
 import SettingsArea from '@/components/account/SettingsArea.vue';
 import Page404 from '@/components/errors/Page404.vue';
+import CreatePassphrase from '@/components/objects/CreatePassphrase.vue';
+import EnterPassphrase from '@/components/objects/EnterPassphrase.vue';
+import ObjectsArea from '@/components/objects/ObjectsArea.vue';
+import UploadFile from '@/components/objects/UploadFile.vue';
 import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
 import AddPaymentStep from '@/components/onboardingTour/steps/AddPaymentStep.vue';
 import CreateAccessGrantStep from '@/components/onboardingTour/steps/CreateAccessGrantStep.vue';
@ -53,8 +57,9 @@ export abstract class RouteConfig {
    public static OnboardingTour = new NavigationLink('/onboarding-tour', 'Onboarding Tour');
    public static CreateProject = new NavigationLink('/create-project', 'Create Project');
    public static EditProjectDetails = new NavigationLink('/edit-project-details', 'Edit Project Details');
-    public static AccessGrants = new NavigationLink('/access-grants', 'Access Grants');
+    public static AccessGrants = new NavigationLink('/access-grants', 'Access');
    public static ProjectsList = new NavigationLink('/projects', 'Projects');
+    public static Objects = new NavigationLink('/objects', 'Objects');

    // account child paths
    public static Settings = new NavigationLink('settings', 'Settings');
@ -81,6 +86,11 @@ export abstract class RouteConfig {
    public static AccessGrantCLI = new NavigationLink('cli', 'Onboarding Access Grant CLI');
    public static AccessGrantPassphrase = new NavigationLink('create-passphrase', 'Onboarding Access Grant Create Passphrase');
    public static AccessGrantResult = new NavigationLink('result', 'Onboarding Access Grant Result');
+
+    // objects child paths.
+    public static CreatePassphrase = new NavigationLink('create-passphrase', 'Objects Create Passphrase');
+    public static EnterPassphrase = new NavigationLink('enter-passphrase', 'Objects Enter Passphrase');
+    public static UploadFile = new NavigationLink('upload', 'Objects Upload');
 }

 export const notProjectRelatedRoutes = [
@ -283,6 +293,28 @@ export const router = new Router({
                    name: RouteConfig.ProjectsList.name,
                    component: ProjectsList,
                },
+                {
+                    path: RouteConfig.Objects.path,
+                    name: RouteConfig.Objects.name,
+                    component: ObjectsArea,
+                    children: [
+                        {
+                            path: RouteConfig.CreatePassphrase.path,
+                            name: RouteConfig.CreatePassphrase.name,
+                            component: CreatePassphrase,
+                        },
+                        {
+                            path: RouteConfig.EnterPassphrase.path,
+                            name: RouteConfig.EnterPassphrase.name,
+                            component: EnterPassphrase,
+                        },
+                        {
+                            path: RouteConfig.UploadFile.path,
+                            name: RouteConfig.UploadFile.name,
+                            component: UploadFile,
+                        },
+                    ],
+                },
            ],
        },
        {
--- a/web/satellite/static/images/navigation/objects.svg
+++ b/web/satellite/static/images/navigation/objects.svg
@ -0,0 +1,3 @@
+<svg class="svg" width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="navigation-svg-path" d="M0 3C0 1.34315 1.34315 0 3 0H10.5C11.3284 0 12 0.671573 12 1.5C12 2.32843 12.6716 3 13.5 3H21C22.6569 3 24 4.34315 24 6V18C24 19.6569 22.6569 21 21 21H3C1.34315 21 0 19.6569 0 18V3Z" fill="#768394"/>
+</svg>
--- a/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts
+++ b/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts
@ -28,6 +28,7 @@ const store = new Vuex.Store({ modules: { projectsModule } });

 const expectedLinks: NavigationLink[] = [
    RouteConfig.ProjectDashboard,
+    RouteConfig.Objects,
    RouteConfig.AccessGrants,
    RouteConfig.Users,
 ];
@ -80,7 +81,7 @@ describe('NavigationArea', () => {

        const navigationElements = wrapper.findAll('.navigation-area__item-container');

-        expect(navigationElements.length).toBe(3);
+        expect(navigationElements.length).toBe(4);
        expect(wrapper).toMatchSnapshot();
    });

--- a/web/satellite/tests/unit/navigationArea/snapshots/NavigationArea.spec.ts.snap
+++ b/web/satellite/tests/unit/navigationArea/snapshots/NavigationArea.spec.ts.snap
@ -7,19 +7,25 @@ exports[`NavigationArea snapshot not changed with project 1`] = `
  <editprojectdropdown-stub></editprojectdropdown-stub>
  <router-link-stub to="/project-dashboard" tag="a" ariacurrentvalue="page" event="click" aria-label="Dashboard" class="navigation-area__item-container">
    <div class="navigation-area__item-container__link">
-      <anonymous-stub></anonymous-stub>
+      <anonymous-stub class="navigation-area__item-container__link__icon"></anonymous-stub>
      <p class="navigation-area__item-container__link__title">Dashboard</p>
    </div>
  </router-link-stub>
-  <router-link-stub to="/access-grants" tag="a" ariacurrentvalue="page" event="click" aria-label="Access Grants" class="navigation-area__item-container">
+  <router-link-stub to="/objects" tag="a" ariacurrentvalue="page" event="click" aria-label="Objects" class="navigation-area__item-container">
    <div class="navigation-area__item-container__link">
-      <anonymous-stub></anonymous-stub>
-      <p class="navigation-area__item-container__link__title">Access Grants</p>
+      <anonymous-stub class="navigation-area__item-container__link__icon"></anonymous-stub>
+      <p class="navigation-area__item-container__link__title">Objects</p>
+    </div>
+  </router-link-stub>
+  <router-link-stub to="/access-grants" tag="a" ariacurrentvalue="page" event="click" aria-label="Access" class="navigation-area__item-container">
+    <div class="navigation-area__item-container__link">
+      <anonymous-stub class="navigation-area__item-container__link__icon"></anonymous-stub>
+      <p class="navigation-area__item-container__link__title">Access</p>
    </div>
  </router-link-stub>
  <router-link-stub to="/project-members" tag="a" ariacurrentvalue="page" event="click" aria-label="Users" class="navigation-area__item-container">
    <div class="navigation-area__item-container__link">
-      <anonymous-stub></anonymous-stub>
+      <anonymous-stub class="navigation-area__item-container__link__icon"></anonymous-stub>
      <p class="navigation-area__item-container__link__title">Users</p>
    </div>
  </router-link-stub>