web/satellite: lint Vuetify files

This change enables linting for the Vuetify proof of concept code and fixes the linting errors that were detected. Additionally, it migrates the Vuetify components to the composition API. Change-Id: Id8cc083954e3f4cb66a00ad2715a96c8747b592c
storj · Jul 17, 2023 · df9a6e9 · df9a6e9
1 parent abe1463
commit df9a6e9
Show file tree

Hide file tree

Showing 53 changed files with 2,958 additions and 3,205 deletions.
diff --git a/web/satellite/.eslintignore b/web/satellite/.eslintignore
@@ -2,3 +2,5 @@ dist
 dist_vuetify_poc
 node_modules
 coverage
+tests/unit/ignore
+static/wasm
diff --git a/web/satellite/.eslintrc.js b/web/satellite/.eslintrc.js
@@ -44,7 +44,7 @@ module.exports = {
                 },
                 {
                     'group': 'internal',
-                    'pattern': '@/components/**',
+                    'pattern': '@?(poc)/components/**',
                     'position': 'after',
                 },
                 {
@@ -80,6 +80,7 @@ module.exports = {
         'vue/no-unused-refs': ['warn'],
         'vue/no-unused-vars': ['warn'],
         'vue/no-useless-v-bind': ['warn'],
+        'vue/valid-v-slot': ['error', { 'allowModifiers': true }],
 
         'vue/no-useless-template-attributes': ['off'], // TODO: fix later
         'vue/no-multiple-template-root': ['off'], // it's possible to have multiple roots in template in Vue 3

diff --git a/web/satellite/package.json b/web/satellite/package.json
@@ -9,8 +9,8 @@
     "build-watch": "NODE_ENV=development vite build -c vite.config.js --watch",
     "build-vuetify": "vite build -c vite.config-vuetify.js",
     "build-vuetify-watch": "NODE_ENV=development vite build -c vite.config-vuetify.js --watch",
-    "lint": "eslint --ext .js,.ts,.vue src --fix && stylelint . --max-warnings 0 --fix",
-    "lint-ci": "eslint --ext .js,.ts,.vue src --no-fix && stylelint . --max-warnings 0 --no-fix",
+    "lint": "eslint **/*.{js,ts,vue} --fix && stylelint . --max-warnings 0 --fix",
+    "lint-ci": "eslint **/*.{js,ts,vue} --no-fix && stylelint . --max-warnings 0 --no-fix",
     "wasm": "chmod +x ./scripts/build-wasm.sh && ./scripts/build-wasm.sh",
     "wasm-dev": "chmod +x ./scripts/build-wasm-dev.sh && ./scripts/build-wasm-dev.sh",
     "test": "vitest run"

diff --git a/web/satellite/vite.config-vuetify.js b/web/satellite/vite.config-vuetify.js
@@ -1,55 +1,53 @@
 // Copyright (C) 2023 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-// Plugins
-import vue from '@vitejs/plugin-vue'
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import { fileURLToPath, URL } from 'node:url';
 
-// Utilities
-import { defineConfig } from 'vite'
-import { fileURLToPath, URL } from 'node:url'
+import vue from '@vitejs/plugin-vue';
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '/static/dist_vuetify_poc',
-  plugins: [
-    vue({
-      template: { transformAssetUrls }
-    }),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
-    vuetify({
-      autoImport: true,
-      styles: {
-        configFile: 'vuetify-poc/src/styles/settings.scss',
-      },
-    }),
-  ],
-  define: { 'process.env': {} },
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@poc': fileURLToPath(new URL('./vuetify-poc/src', import.meta.url)),
-    },
-    extensions: [
-      '.js',
-      '.json',
-      '.jsx',
-      '.mjs',
-      '.ts',
-      '.tsx',
-      '.vue',
+    base: '/static/dist_vuetify_poc',
+    plugins: [
+        vue({
+            template: { transformAssetUrls },
+        }),
+        // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+        vuetify({
+            autoImport: true,
+            styles: {
+                configFile: 'vuetify-poc/src/styles/settings.scss',
+            },
+        }),
     ],
-  },
-  build: {
-    outDir: fileURLToPath(new URL('dist_vuetify_poc', import.meta.url)),
-    emptyOutDir: true,
-    rollupOptions: {
-      input: {
-        'vuetify-poc': fileURLToPath(new URL('./index-vuetify.html', import.meta.url)),
-      },
+    define: { 'process.env': {} },
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+            '@poc': fileURLToPath(new URL('./vuetify-poc/src', import.meta.url)),
+        },
+        extensions: [
+            '.js',
+            '.json',
+            '.jsx',
+            '.mjs',
+            '.ts',
+            '.tsx',
+            '.vue',
+        ],
+    },
+    build: {
+        outDir: fileURLToPath(new URL('dist_vuetify_poc', import.meta.url)),
+        emptyOutDir: true,
+        rollupOptions: {
+            input: {
+                'vuetify-poc': fileURLToPath(new URL('./index-vuetify.html', import.meta.url)),
+            },
+        },
+    },
+    server: {
+        port: 3000,
     },
-  },
-  server: {
-    port: 3000,
-  }
-})
+});
diff --git a/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue b/web/satellite/vuetify-poc/src/components/AccessTableComponent.vue
@@ -2,105 +2,94 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-card variant="flat" :border="true" class="rounded-xlg">
-    <v-text-field
-      v-model="search"
-      label="Search"
-      prepend-inner-icon="mdi-magnify"
-      single-line
-      hide-details
-    ></v-text-field>
+    <v-card variant="flat" :border="true" class="rounded-xlg">
+        <v-text-field
+            v-model="search"
+            label="Search"
+            prepend-inner-icon="mdi-magnify"
+            single-line
+            hide-details
+        />
 
-    <v-data-table
-      v-model="selected"
-      v-model:sort-by="sortBy"
-      :headers="headers"
-      :items="accesses"
-      :search="search"
-      class="elevation-1"
-      show-select
-      hover
-    >
-      <template v-slot:item.name="{ item }">
-          <v-list-item class="font-weight-bold pl-0">
-            {{ item.columns.name }}
-        </v-list-item>
-      </template>
-      <template v-slot:item.status="{ item }">
-        <v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
-          {{ item.raw.status }}
-        </v-chip>
-      </template>
-    </v-data-table>
-  </v-card>
+        <v-data-table
+            v-model="selected"
+            :sort-by="sortBy"
+            :headers="headers"
+            :items="accesses"
+            :search="search"
+            class="elevation-1"
+            show-select
+            hover
+        >
+            <template #item.name="{ item }">
+                <v-list-item class="font-weight-bold pl-0">
+                    {{ item.columns.name }}
+                </v-list-item>
+            </template>
+            <template #item.status="{ item }">
+                <v-chip :color="item.raw.status == 'Active' ? 'success' : 'warning'" variant="tonal" size="small" rounded="xl" class="font-weight-bold">
+                    {{ item.raw.status }}
+                </v-chip>
+            </template>
+        </v-data-table>
+    </v-card>
 </template>
 
-<script>
-export default {
-  name: 'AccessTableComponent',
-  data () {
-      return {
-        search: '',
-        selected: [],
-        sortBy: [{ key: 'date', order: 'asc' }],
-        headers: [
-          {
-            title: 'Name',
-            align: 'start',
-            key: 'name',
-          },
-          { title: 'Type', key: 'type' },
-          { title: 'Status', key: 'status' },
-          { title: 'Permissions', key: 'permissions' },
-          { title: 'Date Created', key: 'date' },
-        ],
-        accesses: [
-          {
-            name: 'Backup',
-            date: '02 Mar 2023',
-            type: 'Access Grant',
-            permissions: 'All',
-            status: 'Active',
-          },
-          {
-            name: 'S3 Test',
-            date: '03 Mar 2023',
-            type: 'S3 Credentials',
-            permissions: 'Read, Write',
-            status: 'Expired',
-          },
-          {
-            name: 'CLI Demo',
-            date: '04 Mar 2023',
-            type: 'CLI Access',
-            permissions: 'Read, Write, List',
-            status: 'Active',
-          },
-          {
-            name: 'Sharing',
-            date: '08 Mar 2023',
-            type: 'Access Grant',
-            permissions: 'Read, Delete',
-            status: 'Active',
-          },
-          {
-            name: 'Sync Int',
-            date: '12 Mar 2023',
-            type: 'S3 Credentials',
-            permissions: 'All',
-            status: 'Expired',
-          },
-        ],
-      }
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VCard, VTextField, VListItem, VChip } from 'vuetify/components';
+import { VDataTable } from 'vuetify/labs/components';
+
+const search = ref<string>('');
+const selected = ref([]);
+
+const sortBy = [{ key: 'date', order: 'asc' }];
+const headers = [
+    {
+        title: 'Name',
+        align: 'start',
+        key: 'name',
+    },
+    { title: 'Type', key: 'type' },
+    { title: 'Status', key: 'status' },
+    { title: 'Permissions', key: 'permissions' },
+    { title: 'Date Created', key: 'date' },
+];
+const accesses = [
+    {
+        name: 'Backup',
+        date: '02 Mar 2023',
+        type: 'Access Grant',
+        permissions: 'All',
+        status: 'Active',
+    },
+    {
+        name: 'S3 Test',
+        date: '03 Mar 2023',
+        type: 'S3 Credentials',
+        permissions: 'Read, Write',
+        status: 'Expired',
+    },
+    {
+        name: 'CLI Demo',
+        date: '04 Mar 2023',
+        type: 'CLI Access',
+        permissions: 'Read, Write, List',
+        status: 'Active',
+    },
+    {
+        name: 'Sharing',
+        date: '08 Mar 2023',
+        type: 'Access Grant',
+        permissions: 'Read, Delete',
+        status: 'Active',
     },
-    computed: {
-      getColor() {
-        return (role) => {
-          if (role === 'Owner') return 'purple2'
-          if (role === 'Invited') return 'warning'
-          return 'green'
-        }
-      }
+    {
+        name: 'Sync Int',
+        date: '12 Mar 2023',
+        type: 'S3 Credentials',
+        permissions: 'All',
+        status: 'Expired',
     },
-  }
-</script>
+];
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue b/web/satellite/vuetify-poc/src/components/BrowserBreadcrumbsComponent.vue
@@ -2,15 +2,13 @@
 // See LICENSE for copying information.
 
 <template>
-  <v-breadcrumbs :items="['Buckets', 'Demo']" active-class="font-weight-bold" class="pa-0">
-    <template v-slot:divider>
-      <img src="@poc/assets/icon-right.svg" alt="Breadcrumbs separator" width="10"/>
-    </template>
-  </v-breadcrumbs>
+    <v-breadcrumbs :items="['Buckets', 'Demo']" active-class="font-weight-bold" class="pa-0">
+        <template #divider>
+            <img src="@poc/assets/icon-right.svg" alt="Breadcrumbs separator" width="10">
+        </template>
+    </v-breadcrumbs>
 </template>
 
-<!-- <script>
-export default {
-  props: ['title']
-}
-</script> -->
+<script setup lang="ts">
+import { VBreadcrumbs } from 'vuetify/components';
+</script>