UI: Namespace area fixes (#19799) (#20024)

* UI: Namespace area fixes (#19799)

* Revert model changes due to unavailable decorator

changelog/19799.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix bad link to namespace when namespace name includes `.`
+```

ui/app/adapters/namespace.js

@@ -1,37 +1,37 @@
 import ApplicationAdapter from './application';
 
-export default ApplicationAdapter.extend({
+export default class NamespaceAdapter extends ApplicationAdapter {
   pathForType() {
     return 'namespaces';
-  },
+  }
   urlForFindAll(modelName, snapshot) {
     if (snapshot.adapterOptions && snapshot.adapterOptions.forUser) {
       return `/${this.urlPrefix()}/internal/ui/namespaces`;
     }
     return `/${this.urlPrefix()}/namespaces?list=true`;
-  },
+  }
 
   urlForCreateRecord(modelName, snapshot) {
     const id = snapshot.attr('path');
     return this.buildURL(modelName, id);
-  },
+  }
 
   createRecord(store, type, snapshot) {
     const id = snapshot.attr('path');
-    return this._super(...arguments).then(() => {
+    return super.createRecord(...arguments).then(() => {
       return { id };
     });
-  },
+  }
 
   findAll(store, type, sinceToken, snapshot) {
     if (snapshot.adapterOptions && typeof snapshot.adapterOptions.namespace !== 'undefined') {
       return this.ajax(this.urlForFindAll('namespace', snapshot), 'GET', {
         namespace: snapshot.adapterOptions.namespace,
       });
     }
-    return this._super(...arguments);
-  },
+    return super.findAll(...arguments);
+  }
   query() {
     return this.ajax(`/${this.urlPrefix()}/namespaces?list=true`);
-  },
-});
+  }
+}

ui/app/components/namespace-link.js

@@ -11,10 +11,13 @@ export default Component.extend({
   //public api
   targetNamespace: null,
   showLastSegment: false,
+  // set to true if targetNamespace is passed in unmodified
+  // otherwise, this assumes it is parsed as in namespace-picker
+  unparsed: false,
 
-  normalizedNamespace: computed('targetNamespace', function () {
-    const ns = this.targetNamespace;
-    return (ns || '').replace(/\.+/g, '/').replace(/☃/g, '.');
+  normalizedNamespace: computed('targetNamespace', 'unparsed', function () {
+    const ns = this.targetNamespace || '';
+    return this.unparsed ? ns : ns.replace(/\.+/g, '/').replace(/☃/g, '.');
   }),
 
   namespaceDisplay: computed('normalizedNamespace', 'showLastSegment', function () {

ui/app/serializers/namespace.js

@@ -1,6 +1,10 @@
 import ApplicationSerializer from './application';
 
-export default ApplicationSerializer.extend({
+export default class NamespaceSerializer extends ApplicationSerializer {
+  attrs = {
+    path: { serialize: false },
+  };
+
   normalizeList(payload) {
     const data = payload.data.keys
       ? payload.data.keys.map((key) => ({
@@ -11,14 +15,14 @@ export default ApplicationSerializer.extend({
       : payload.data;
 
     return data;
-  },
+  }
 
   normalizeResponse(store, primaryModelClass, payload, id, requestType) {
     const nullResponses = ['deleteRecord', 'createRecord'];
     const cid = (id || payload.id || '').replace(/\/$/, '');
     const normalizedPayload = nullResponses.includes(requestType)
       ? { id: cid, path: cid }
       : this.normalizeList(payload);
-    return this._super(store, primaryModelClass, normalizedPayload, id, requestType);
-  },
-});
+    return super.normalizeResponse(store, primaryModelClass, normalizedPayload, id, requestType);
+  }
+}

ui/app/templates/vault/cluster/access/namespaces/index.hbs

@@ -35,7 +35,7 @@
           {{#let (concat this.currentNamespace (if this.currentNamespace "/") list.item.id) as |targetNamespace|}}
             {{#if (includes targetNamespace this.accessibleNamespaces)}}
               <li class="action">
-                <NamespaceLink @targetNamespace={{targetNamespace}} @class="is-block">
+                <NamespaceLink @targetNamespace={{targetNamespace}} @unparsed={{true}} @class="is-block">
                   Switch to Namespace
                 </NamespaceLink>
               </li>