Ability to store & remove server owner & deployment entries in dropdowns

src/components/cylc/Header.vue

@@ -60,21 +60,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <template v-slot:item="{ item, props }">
             <!-- HTML that describe how select should render items when the select is open -->
-            <div class="d-flex">
-              <v-list-item
-                class="flex-grow-1"
-                :title="item.title"
-                v-bind="props"
-                >
-                <template v-slot:append v-if="item.title !== ownerOnLoad">
-                    <v-icon
-                      @click.stop="removeOwner(item.title)"
-                      color="pink-accent-4"
-                      :icon="mdiClose"
-                    />
-                </template>
-              </v-list-item>
-            </div>
+            <v-list-item
+              :title="item.title"
+              v-bind="props"
+              >
+              <template v-slot:append v-if="item.title !== ownerOnLoad">
+                  <v-icon
+                    @click.stop="removeOwner(item.title)"
+                    color="pink-accent-4"
+                    :icon="mdiClose"
+                  />
+              </template>
+            </v-list-item>
           </template>
         </v-combobox>
         <!-- Deployment combobox -->
@@ -90,21 +87,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         >
           <template v-slot:item="{ item, props }">
             <!-- HTML that describe how select should render items when the select is open -->
-            <div class="d-flex">
-              <v-list-item
-                class="flex-grow-1"
-                :title="item.title"
-                v-bind="props"
-                >
-                <template v-slot:append v-if="item.title !== deploymentOnLoad">
-                    <v-icon
-                      @click.stop="removeDeployment(item.title)"
-                      color="pink-accent-4"
-                      :icon="mdiClose"
-                    />
-                </template>
-              </v-list-item>
-            </div>
+            <v-list-item
+              :title="item.title"
+              v-bind="props"
+              >
+              <template v-slot:append v-if="item.title !== deploymentOnLoad">
+                  <v-icon
+                    @click.stop="removeDeployment(item.title)"
+                    color="pink-accent-4"
+                    :icon="mdiClose"
+                  />
+              </template>
+            </v-list-item>
           </template>
         </v-combobox>
         <v-btn

src/composables/useLocalStorage.js

@@ -1,5 +1,18 @@
 import { ref } from 'vue'
 
+/**
+ * Function for initialising, adding to and removing from local storage.
+ * Values are stored in arrays with and can be accessed
+ * via a key which specified by the 'key' parameter.
+ * The local storage array is initialized with a value
+ * specified by the 'initialValue' parameter.
+ * Note: this could be replaced by a VueUse composable in the future
+ * https://vueuse.org/core/useLocalStorage/
+ *
+ * @param {string} key
+ * @param {*} initialValue
+ * @returns {function}
+ */
 export default function useLocalStorage (key, initialValue) {
   const itemOnLoad = initialValue
   const item = ref(itemOnLoad)

tests/unit/composables/useLocalStorage.spec.js

@@ -14,6 +14,11 @@ describe('useLocalStorage composable', () => {
     expect(Array.from(items.value)).toStrictEqual(['test initial item', 'test item'])
   })
 
+  it('should not add more than one of the same value to the local store', () => {
+    addToLocalStorage('test item')
+    expect(Array.from(items.value)).toStrictEqual(['test initial item', 'test item'])
+  })
+
   it('should remove a value to the local store', () => {
     removeFromLocalStorage('test item')
     expect(Array.from(items.value)).toStrictEqual(['test initial item'])