[ui] Support SBoM formats

.github/workflows/tests.yml

@@ -56,3 +56,27 @@ jobs:
     - name: Tests
       run: |
         poetry run python manage.py test --settings=config.settings.testing
+
+  frontend:
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    runs-on: ubuntu-latest
+    name: Node ${{ matrix.node-version }}
+    steps:
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+      - name: Setup Node ${{ matrix.node-version }}
+        uses: actions/setup-node@b39b52d1213e96004bfcb1c61a8a6fa8ab84f3e8 # 4.0.1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        working-directory: ./ui
+        run: yarn install
+      - name: Run ESLint
+        working-directory: ./ui
+        run: yarn lint
+      - name: Run unit tests
+        working-directory: ./ui
+        run: yarn test:unit

ui/package.json

@@ -7,7 +7,7 @@
     "serve": "vite",
     "build": "vite build --emptyOutDir",
     "preview": "vite preview",
-    "test:unit": "vitest",
+    "test:unit": "vitest run",
     "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",

ui/src/assets/main.css

@@ -11,3 +11,9 @@
   font-weight: 400;
   font-style: normal;
 }
+
+a {
+  color: #1f2328;
+  font-weight: 500;
+  text-decoration: none;
+}

ui/src/components/TaskList/FormDialog.vue → ui/src/components/FormDialog.vue

@@ -1,14 +1,16 @@
 <template>
   <v-dialog v-model="isOpen" max-width="600">
     <template #activator="{ props: activatorProps }">
-      <v-btn
-        class="ml-auto"
-        color="secondary"
-        prepend-icon="mdi-plus"
-        text="Add"
-        variant="flat"
-        v-bind="activatorProps"
-      ></v-btn>
+      <slot name="activator" v-bind="{ props: activatorProps }">
+        <v-btn
+          class="ml-auto"
+          color="secondary"
+          prepend-icon="mdi-plus"
+          text="Add"
+          variant="flat"
+          v-bind="activatorProps"
+        ></v-btn>
+      </slot>
     </template>
 
     <v-card title="Schedule task">
@@ -47,29 +49,10 @@
           </v-col>
         </v-row>
         <v-row>
-          <v-col cols="6">
-            <v-radio-group
-              v-model="formData.scheduler.job_interval"
-              density="comfortable"
-              size="small"
-            >
-              <template #label>
-                <span class="text-subtitle-2">Interval</span>
-              </template>
-              <v-radio :value="86400" label="Every day"></v-radio>
-              <v-radio :value="604800" label="Every week"></v-radio>
-              <v-radio value="custom" label="Custom"></v-radio>
-            </v-radio-group>
-            <v-text-field
-              v-model="customInterval"
-              class="ml-8"
-              label="Every"
-              type="number"
-              suffix="seconds"
-              hide-details
-              required
-            >
-            </v-text-field>
+          <v-col>
+            <p class="text-subtitle-2 mb-4">Schedule</p>
+            <interval-selector v-model="formData.scheduler.job_interval" density="comfortable">
+            </interval-selector>
           </v-col>
         </v-row>
       </v-card-text>
@@ -83,8 +66,11 @@
   </v-dialog>
 </template>
 <script>
+import IntervalSelector from './IntervalSelector.vue'
+
 export default {
   name: 'FormDialog',
+  components: { IntervalSelector },
   emits: ['create'],
   data() {
     return {
@@ -99,7 +85,7 @@ export default {
           }
         },
         scheduler: {
-          job_interval: 604800,
+          job_interval: '604800',
           job_max_retries: 1
         }
       },
@@ -108,9 +94,6 @@ export default {
   },
   methods: {
     onSave() {
-      if (this.formData.scheduler.job_interval === 'custom') {
-        this.formData.scheduler.job_interval = this.customInterval
-      }
       this.$emit('create', this.formData)
       this.isOpen = false
     }

ui/src/components/IntervalSelector.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <v-btn-toggle
+      :model-value="selected"
+      :density
+      mandatory
+      shaped
+      divided
+      variant="outlined"
+      base-color="#898B8E"
+      height="40"
+      block
+      @update:model-value="handleToggle"
+    >
+      <v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="86400">
+        Daily
+      </v-btn>
+      <v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="604800">
+        Weekly
+      </v-btn>
+      <v-btn class="text-subtitle-2 text-medium-emphasis" color="primary" value="2629746">
+        Monthly
+      </v-btn>
+      <v-btn
+        class="text-subtitle-2 text-medium-emphasis"
+        color="primary"
+        value="custom"
+        data-test="selector-custom"
+      >
+        Custom interval
+      </v-btn>
+    </v-btn-toggle>
+    <div v-if="selected == 'custom'" class="pt-3 reduced-input">
+      <v-text-field
+        v-model="custom"
+        :density
+        data-test="input"
+        label="Every"
+        variant="outlined"
+        hide-details
+        @update:model-value="handleInput"
+      >
+        <template #append-inner>
+          <span class="text-medium-emphasis">seconds</span>
+        </template>
+      </v-text-field>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'IntervalSelector',
+  emits: ['update:model-value'],
+  props: {
+    modelValue: {
+      type: [String, Number],
+      required: false,
+      default: ''
+    },
+    density: {
+      type: String,
+      required: false,
+      default: 'compact'
+    }
+  },
+  data() {
+    return {
+      selected: this.modelValue,
+      custom: ''
+    }
+  },
+  methods: {
+    handleToggle(event) {
+      const value = event === 'custom' ? this.custom : event
+      this.selected = event
+      this.$emit('update:model-value', value)
+    },
+    handleInput(event) {
+      if (this.selected === 'custom') {
+        this.$emit('update:model-value', event)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.reduced-input {
+  max-width: 366px;
+}
+</style>