Repository: hashicorp/vault
File: ui/app/components/namespace-picker.js (JavaScript)

Code before:
    const encodedNamespace = encodeURIComponent(namespace.path);

    let queryParams = '';
    if (namespace.path !== '') {
      queryParams = `?namespace=${encodedNamespace}`;
    }

    // The full URL/origin is required so that the page is reloaded.
    return `${origin}/ui/vault/dashboard${queryParams}`;
  }

  #getOrigin(location) {
    return location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
  }

  @action
  async fetchListCapability() {
    // TODO: Revist. This logic was carried over from previous component implmenetation.
    //  When the user doesn't have this capability, shouldn't we just hide the "Manage" button,
    //  instead of hiding both the "Manage" and "Refresh List" buttons?
    try {
      await this.store.findRecord('capabilities', 'sys/namespaces/');
      this.showAfterOptions = true;
    } catch (e) {
      // If error out on findRecord call it's because you don't have permissions
      // and therefore don't have permission to manage namespaces
      this.showAfterOptions = false;
    }
  }

  @action
  async loadOptions() {
    // TODO: namespace service's findNamespacesForUser will never throw an error.
    //  Check with design to determine if we should continue to ignore or handle an error situation here.
    await this.namespace?.findNamespacesForUser.perform();

    this.options = this.#getOptions(this.namespace);
    this.selected = this.#getSelected(this.options, this.namespace);

    await this.fetchListCapability();
  }

  @action
  async onChange(selected) {
    this.selected = selected;
    this.router.transitionTo('vault.cluster.dashboard', { queryParams: { namespace: selected.path } });
  }
}


Review comment (suggestion):
If the user doesn't have the ability to manage namespaces, would they need to refresh? That would be in case they add or delete namespaces right? But if it's possible for the list to change, I would agree that users should be able to refresh, regardless of manage capability. 

Code after:
  }

  // TODO make private when converting from js to ts
  #getNamespaceLink(location, namespace) {
    const origin = this.#getOrigin(location);

    let queryParams = '';
    if (!isEmpty(namespace.path)) {
      const encodedNamespace = encodeURIComponent(namespace.path);
      queryParams = `?namespace=${encodedNamespace}`;
    }

    // The full URL/origin is required so that the page is reloaded.
    return `${origin}/ui/vault/dashboard${queryParams}`;
  }

  // TODO make private when converting from js to ts
  #getOrigin(location) {
    return location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
  }

  @action
  async fetchListCapability() {
    // TODO: Revist. This logic was carried over from previous component implmenetation.
    //  When the user doesn't have this capability, shouldn't we just hide the "Manage" button,
    //  instead of hiding both the "Manage" and "Refresh List" buttons?
    try {
      await this.store.findRecord('capabilities', 'sys/namespaces/');
      this.showAfterOptions = true;
    } catch (e) {
      // If error out on findRecord call it's because you don't have permissions
      // and therefore don't have permission to manage namespaces
      this.showAfterOptions = false;
    }
  }

  @action
  async loadOptions() {
    // TODO: namespace service's findNamespacesForUser will never throw an error.
    //  Check with design to determine if we should continue to ignore or handle an error situation here.
    await this.namespace?.findNamespacesForUser.perform();

    this.options = this.#getOptions(this.namespace);
    this.selected = this.#getSelected(this.options, this.namespace);

    await this.fetchListCapability();
  }

  @action
  async onChange(selected) {
    this.selected = selected;