fix: resolve Super-linter errors throughout the codebase

wmo-im · Jul 26, 2024 · 1970e23 · 1970e23
1 parent f7b8ed7
commit 1970e23
Show file tree

Hide file tree

Showing 10 changed files with 219 additions and 211 deletions.
diff --git a/.github/linters/.stylelintrc.json b/.github/linters/.stylelintrc.json
@@ -0,0 +1,4 @@
+{
+    "extends": "stylelint-config-standard",
+    "customSyntax": "postcss-scss"
+  }
diff --git a/.github/workflows/release-app.yml b/.github/workflows/release-app.yml
@@ -5,6 +5,12 @@ on:
       - main
   workflow_dispatch:
 
+permissions:
+  contents: read
+  packages: write
+  issues: write
+  pull-requests: write
+
 jobs:
   build:
     # Run this job on the following operating systems

diff --git a/.github/workflows/test-code-quality.yml b/.github/workflows/test-code-quality.yml
@@ -28,5 +28,6 @@ jobs:
       - name: Super-linter
         uses: super-linter/[email protected] # x-release-please-version
         env:
+          VALIDATE_SCSS: true
           # To report GitHub Actions status checks
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/README.md b/README.md
@@ -1,55 +1,55 @@
+# The WIS2 Subscription Manager
 <a name="readme-top"></a>
-![rounded-toolbar](https://github.com/user-attachments/assets/6b62a099-d346-48ed-921d-e1c1263950d1)
 
-# The WIS2 Subscription Manager
-### The desktop application for managing your WIS2 Downloader
+## The desktop application for managing your WIS2 Downloader
+
+<div align="center">
+
+  <a href="https://github.com/wmo-im/wis2-subscription-manager/blob/main/LICENSE" alt="License" ><img src="https://img.shields.io/badge/License-Apache_2.0-blue" alt="License Badge"></img></a>
+  [![Super-Linter](https://github.com/wmo-im/wis2-subscription-manager/actions/workflows/test-code-quality.yml/badge.svg)](https://github.com/marketplace/actions/super-linter)
+  ![Release-App](https://github.com/wmo-im/wis2-subscription-manager/actions/workflows/release-app.yml/badge.svg)
 
-<a href="https://github.com/wmo-im/wis2-subscription-manager/blob/main/LICENSE" alt="License" ><img src="https://img.shields.io/badge/License-Apache_2.0-blue"></img></a>
-[![Super-Linter](https://github.com/wmo-im/wis2-subscription-manager/actions/workflows/test-code-quality.yml/badge.svg)](https://github.com/marketplace/actions/super-linter)
-![Release-App](https://github.com/wmo-im/wis2-subscription-manager/actions/workflows/release-app.yml/badge.svg)
+</div>
 
 The WIS2 Subscription Manager is an Electron application that allows you to easily maintain your on-going subscriptions, as well as explore new topics of interest on a Global Discovery Catalogue.
 
 **Note**: This repository does *not* contain the downloader which actually enables the subscription process. <a href="https://github.com/wmo-im/wis2downloader">The WIS2 Downloader can be found here.</a>
 
 <!-- TABLE OF CONTENTS -->
 <details>
-  <summary>Table of Contents</summary>
-  <ol>
-    <li>
-      <a href="#features">Features</a>
-      <ul>
-        <li><a href="#built-with">Built With</a></li>
-        <li><a href="#examples">Examples</a></li>
-      </ul>
-    </li>
-    <li><a href="#demos">Demos</a>
-      <ul>
-        <li><a href="#adding-and-configuring-topics">Adding and Configuring Topics</a></li>
-      </ul>
-    </li>
-    <li>
-      <a href="#getting-started">Getting Started</a>
-      <ul>
-        <li><a href="#1-download">Download</a></li>
-        <li><a href="#2-install">Extract and Install</a></li>
-      </ul>
-    </li>
-    <li>
-      <a href="#development">Development</a>
-      <ul>
-        <li><a href="#how-to-run-the-application">How to run the application</a></li>
-        <li><a href="#how-to-package-the-application">How to package the application</a></li>
-        <li><a href="#understanding-the-structure-of-this-repository">Understanding the structure of this repository</a></li>
-      </ul>
-    </li>
-    <li><a href="#bugs-and-issues">Bugs and Issues</a></li>
-    <li><a href="#contact">Contract</a></li>
-  </ol>
+<summary>Table of Contents</summary>
+<ol>
+<li><a href="#features">Features</a>
+<ul>
+<li><a href="#built-with">Built With</a></li>
+<li><a href="#examples">Examples</a></li>
+</ul>
+</li>
+<li><a href="#demos">Demos</a>
+<ul>
+<li><a href="#adding-and-configuring-topics">Adding and Configuring Topics</a></li>
+</ul>
+</li>
+<li><a href="#getting-started">Getting Started</a>
+<ul>
+<li><a href="#1-download">Download</a></li>
+<li><a href="#2-install">Extract and Install</a></li>
+</ul>
+</li>
+<li><a href="#development">Development</a>
+<ul>
+<li><a href="#how-to-run-the-application">How to run the application</a></li>
+<li><a href="#how-to-package-the-application">How to package the application</a></li>
+<li><a href="#understanding-the-structure-of-this-repository">Understanding the structure of this repository</a></li>
+</ul>
+</li>
+<li><a href="#bugs-and-issues">Bugs and Issues</a></li>
+<li><a href="#contact">Contract</a></li>
+</ol>
 </details>
 
 ## Features
-
+![rounded-toolbar](https://github.com/user-attachments/assets/6b62a099-d346-48ed-921d-e1c1263950d1)
 - **Configure Your Subscriptions**: Easily view and configure topics through a user-friendly interface, built with <a href="https://vuetifyjs.com/en/">Vuetify 3</a>.
 - **Explore the Global Discovery Catalogue (GDC)**: Browse a GDC of your choice and seamlessly add new topics to your subscription.
 - **Visualize Download Metrics**: Just click on a subscribed topic to see the number of files/bytes downloaded, file types, and failed downloads.
@@ -75,7 +75,7 @@ The WIS2 Subscription Manager is an Electron application that allows you to easi
 ## Getting Started
 
 ### 1. Download
-In the <a href="https://github.com/wmo-im/wis2-subscription-manager/releases">releases section</a>, expand the 'Assets' drop-down and download the zip file for your operating system.
+In the <a href="https://github.com/wmo-im/wis2-subscription-manager/releases">releases section</a>, expand the 'Assets' drop-down and download the ZIP file for your operating system.
 
 ### 2. Install
 Extract this folder and double click on the install file. This should open the application and you're ready to go.
@@ -95,19 +95,19 @@ Extract this folder and double click on the install file. This should open the a
 
 Firstly, clone this repository to your local directory
 
-```
+```bash
 git clone https://github.com/wmo-im/wis2-subscription-manager
 ```
 
 In this directory, install the required libraries with `npm`:
 
-```
+```bash
 npm install
 ```
 
 Lastly, to start the application
 
-```
+```bash
 npm run start
 ```
 
@@ -120,13 +120,13 @@ This is already done automatically by the GitHub Actions workflow when there is
 
 Firstly, the Vue 3 frontend should be built using
 
-```
+```bash
 npm run build
 ```
 
 Then, we can Electron Forge's `make` command to package the application which will use the built frontend
 
-```
+```bash
 npm run make
 ```
 
@@ -138,16 +138,17 @@ To package this application for Linux on a Windows computer, you will need to us
 
 Inside this environment, you can run the same commands as you would when making the Windows application.
 
-*(Note: Ensure you are working on a new git clone of this repository, as the Windows `node_modules` folder may conflict with the Linux version, and vice versa.)*
+*(Note: Ensure you are working on a new Git clone of this repository, as the Windows `node_modules` folder may conflict with the Linux version, and vice versa.)*
 
 This will create the application installer (`.deb`) in the `out/make/deb/x64` folder in your project root.
 
-#### MacOS
+#### macOS
 
-It is not recommend to use a virtual machine to package this application for MacOS, as there will likely be compatibility issues. We recommend to run the commands on a genuine Macbook.
+It is not recommend to use a virtual machine to package this application for macOS, as there will likely be compatibility issues. We recommend to run the commands on a genuine MacBook.
 
 The only difference here is the application must be made for both the x64 and arm64 architectures, the latter of which is used by the Apple silicon chips (M1 and above). This is done by running:
-```
+
+```bash
 npm run make -- --arch=universal --platform=darwin
 ```
 

diff --git a/src/frontend/components/CatalogueView.vue b/src/frontend/components/CatalogueView.vue
@@ -28,34 +28,13 @@
                     </v-row>
 
                     <!-- Most screens -->
-                    <v-row align="center" v-if="mdAndUp">
-                        <v-col cols="4">
-                            <v-divider />
-                        </v-col>
-                        <v-col cols="4">
-                            <v-btn @click="searchCatalogue" append-icon="mdi-cloud-search" color="#003DA5"
-                                variant="flat" size="large" block :disabled="!catalogueBoolean"
-                                :loading="loadingBoolean">Browse the Catalogue</v-btn>
-                        </v-col>
-                        <v-col cols="4">
-                            <v-divider />
-                        </v-col>
-                    </v-row>
+                    <SearchBar v-if="mdAndUp" :searchCatalogue="searchCatalogue" :catalogueBoolean="catalogueBoolean"
+                        :loadingBoolean="loadingBoolean" barSize="4" />
 
                     <!-- Very small screens -->
-                    <v-row align="center" v-if="!mdAndUp">
-                        <v-col cols="3">
-                            <v-divider />
-                        </v-col>
-                        <v-col cols="6">
-                            <v-btn @click="searchCatalogue" append-icon="mdi-cloud-search" color="#003DA5"
-                                variant="flat" size="large" block :disabled="!catalogueBoolean"
-                                :loading="loadingBoolean">Browse the Catalogue</v-btn>
-                        </v-col>
-                        <v-col cols="3">
-                            <v-divider />
-                        </v-col>
-                    </v-row>
+                    <SearchBar v-if="!mdAndUp"
+                        :searchCatalogue="searchCatalogue" :catalogueBoolean="catalogueBoolean"
+                        :loadingBoolean="loadingBoolean" barSize="6" />
 
                 </v-card-item>
 
@@ -238,6 +217,7 @@ import { VCard, VCardTitle, VCardText, VCardItem, VForm, VBtn, VListGroup, VSele
 import { useDisplay } from 'vuetify';
 
 // Sub-components
+import SearchBar from '@/components/sub-components/SearchBar.vue';
 import BboxView from "@/components/sub-components/BboxView.vue";
 
 // Utilities
@@ -259,6 +239,7 @@ export default defineComponent({
         VTable,
         VDatePicker,
         VDivider,
+        SearchBar,
         BboxView
     },
     setup() {
@@ -275,7 +256,7 @@ export default defineComponent({
         const limitOptions = [10, 100, 500, 1000];
 
         // Breakpoints
-        const { smAndUp, mdAndUp, lgAndUp } = useDisplay();
+        const { mdAndUp } = useDisplay();
 
         // Reactive variables
 
@@ -696,9 +677,7 @@ export default defineComponent({
             // Static variables
             catalogueList,
             limitOptions,
-            smAndUp,
             mdAndUp,
-            lgAndUp,
 
             // Reactive variables
             offsetTop,

diff --git a/src/frontend/components/sub-components/SearchBar.vue b/src/frontend/components/sub-components/SearchBar.vue
@@ -0,0 +1,26 @@
+<template>
+    <v-row align="center">
+        <v-col :cols="(12 - barSize) / 2">
+            <v-divider />
+        </v-col>
+        <v-col :cols="barSize">
+            <v-btn @click="searchCatalogue" append-icon="mdi-cloud-search" color="#003DA5" variant="flat" size="large"
+                block :disabled="!catalogueBoolean" :loading="loadingBoolean">Browse the Catalogue</v-btn>
+        </v-col>
+        <v-col :cols="(12 - barSize) / 2">
+            <v-divider />
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+export default {
+    name: 'SearchBar',
+    props: {
+        searchCatalogue: Function,
+        catalogueBoolean: Boolean,
+        loadingBoolean: Boolean,
+        barSize: Number
+    }
+}
+</script>
diff --git a/src/frontend/styles/settings.scss b/src/frontend/styles/settings.scss
@@ -1,13 +1,3 @@
-/**
- * src/styles/settings.scss
- *
- * Configures SASS variables and Vuetify overwrites
- */
-
-// https://vuetifyjs.com/features/sass-variables/`
-// @use 'vuetify/settings' with (
-//   $color-pack: false
-// );
 .max-form-width {
     max-width: 1500px;
 }

diff --git a/src/frontend/utils/constants.js b/src/frontend/utils/constants.js
@@ -1,17 +1,17 @@
 export const HTTP_CODES = {
-    200: 'OK',
-    201: 'Created',
-    202: 'Accepted',
-    204: 'No Content',
-    400: 'Bad Request',
-    401: 'Unauthorized',
-    403: 'Forbidden',
-    404: 'Not Found',
-    405: 'Method Not Allowed',
-    406: 'Not Acceptable',
-    409: 'Conflict',
-    500: 'Internal Server Error',
-    501: 'Not Implemented',
-    503: 'Service Unavailable',
-    504: 'Gateway Timeout'
-};
+  200: "OK",
+  201: "Created",
+  202: "Accepted",
+  204: "No Content",
+  400: "Bad Request",
+  401: "Unauthorized",
+  403: "Forbidden",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  406: "Not Acceptable",
+  409: "Conflict",
+  500: "Internal Server Error",
+  501: "Not Implemented",
+  503: "Service Unavailable",
+  504: "Gateway Timeout",
+};