Remove namespaces caching, fix showing removed namespaces (#76)

client/components/namespace-navigation.vue

@@ -30,14 +30,17 @@
         <a
           :href="namespaceLink(namespace)"
           :data-namespace="namespace"
-          @click="recordNamespaceFromClick"
+          @click="navigateFromClick"
           @mouseover="showNamespaceDesc(namespace)"
           >{{ namespace }}</a
         >
       </li>
     </ul>
     <div
-      :class="{ 'namespace-description': true, pending: !!namespaceDescRequest }"
+      :class="{
+        'namespace-description': true,
+        pending: !!namespaceDescRequest,
+      }"
       v-if="namespaceDesc"
     >
       <span class="namespace-name">{{ namespaceDescName }}</span>
@@ -54,9 +57,9 @@ import { getKeyValuePairs, mapNamespaceDescription } from '~helpers';
 import { DetailList } from '~components';
 
 const validationMessages = {
-  valid: d => `${d} exists`,
-  invalid: d => `${d} does not exist`,
-  error: d => `An error occoured while querying for ${d}`,
+  valid: (d) => `${d} exists`,
+  invalid: (d) => `${d} does not exist`,
+  error: (d) => `An error occoured while querying for ${d}`,
 };
 
 export default {
@@ -66,8 +69,7 @@ export default {
       d: this.$props.namespace,
       validation: 'unknown',
       validationMessage: undefined,
-      recentNamespaces:
-        JSON.tryParse(localStorage.getItem('recent-namespaces')) || [],
+      recentNamespaces: [],
       namespaceDesc: undefined,
       namespaceDescName: undefined,
       namespaceDescRequest: undefined,
@@ -79,10 +81,6 @@ export default {
   created() {
     this.namespaceDescCache = {};
 
-    if (this.$route && this.$route.params && this.$route.params.namespace) {
-      this.recordNamespace(this.$route.params.namespace);
-    }
-
     this.getNamespaces().then(() => {
       if (this.recentNamespaces.length == 1) {
         const namespace = this.recentNamespaces[0];
@@ -93,18 +91,6 @@ export default {
     });
   },
   methods: {
-    recordNamespace(namespace) {
-      if (namespace) {
-        this.recentNamespaces = this.recentNamespaces
-          .filter(d => d && d !== namespace)
-          .slice(0, 15);
-        this.recentNamespaces.unshift(namespace);
-        localStorage.setItem(
-          'recent-namespaces',
-          JSON.stringify(this.recentNamespaces)
-        );
-      }
-    },
     changeNamespace() {
       if (this.validation === 'valid') {
         this.$router.push({
@@ -116,7 +102,6 @@ export default {
             'workflowName'
           ),
         });
-        this.recordNamespace(this.d);
         this.$emit('navigate', this.d);
       }
     },
@@ -125,56 +110,48 @@ export default {
         this.$router.currentRoute.query
       )}`;
     },
-    recordNamespaceFromClick(e) {
+    navigateFromClick(e) {
       const namespace = e.target.getAttribute('data-namespace');
-
-      this.recordNamespace(namespace);
       this.$emit('navigate', namespace);
     },
     getNamespaceDesc(d) {
       if (this.namespaceDescCache[d]) {
         return Promise.resolve(this.namespaceDescCache[d]);
       }
 
-      return this.$http(`/api/namespaces/${d}`).then(r => {
+      return this.$http(`/api/namespaces/${d}`).then((r) => {
         this.namespaceDescCache[d] = mapNamespaceDescription(r);
 
         return this.namespaceDescCache[d];
       });
     },
     getNamespaces(d) {
-      return this.$http(`/api/namespaces`).then(r => {
-        const namespaces = r.namespaces.map(n => n.namespaceInfo.name);
+      return this.$http(`/api/namespaces`).then((r) => {
+        const namespaces = r.namespaces.map((n) => n.namespaceInfo.name);
 
         const newNamespaces = namespaces
-          .filter(n => !this.recentNamespaces.includes(n))
-          .filter(n => n !== 'temporal-system');
-
-        this.recentNamespaces.push(...newNamespaces);
-        this.recentNamespaces = this.recentNamespaces.slice(0, 15);
+          .filter((n) => !this.recentNamespaces.includes(n))
+          .filter((n) => n !== 'temporal-system');
 
-        localStorage.setItem(
-          'recent-namespaces',
-          JSON.stringify(this.recentNamespaces)
-        );
+        this.recentNamespaces = newNamespaces;
       });
     },
     checkValidity: debounce(function checkValidity() {
-      const check = newNamespace => {
+      const check = (newNamespace) => {
         this.validation = 'pending';
         this.namespaceDescRequest = this.getNamespaceDesc(newNamespace)
           .then(
-            desc => {
+            (desc) => {
               this.namespaceDescName = newNamespace;
               this.namespaceDesc = {
                 kvps: getKeyValuePairs(desc),
               };
 
               return 'valid';
             },
-            res => (res.status === 404 ? 'invalid' : 'error')
+            (res) => (res.status === 404 ? 'invalid' : 'error')
           )
-          .then(v => {
+          .then((v) => {
             this.$emit('validate', this.d, v);
 
             if (v in validationMessages) {
@@ -201,10 +178,10 @@ export default {
     showNamespaceDesc(d) {
       this.namespaceDescName = d;
       this.namespaceDescRequest = this.getNamespaceDesc(d)
-        .catch(res => ({
+        .catch((res) => ({
           error: `${res.statusText || res.message} ${res.status}`,
         }))
-        .then(desc => {
+        .then((desc) => {
           if (this.namespaceDescName === d) {
             this.namespaceDesc = {
               kvps: getKeyValuePairs(desc),