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

Code before:
    }
    // Simulate typing into the search input
    await fillIn(GENERAL.inputByAttr('Search namespaces'), 'child1');

    // Verify that only namespaces matching the search input are displayed
    assert.strictEqual(
      findAll(GENERAL.inputByAttr('Search namespaces')).length,
      1,
      'Only matching namespaces are displayed after filtering'
    );

    // Clear the search input
    await fillIn(GENERAL.inputByAttr('Search namespaces'), '');

    // Verify all namespaces are displayed after clearing the search input
    assert.dom(GENERAL.button('root')).exists('Namespace "root" is displayed');
    assert.dom(GENERAL.button('parent1')).exists('Namespace "parent1" is displayed');
    assert.dom(GENERAL.button('parent1/child1')).exists('Namespace "parent1/child1" is displayed');
    assert.strictEqual(
      findAll(`ul ${GENERAL.button()}`).length,
      3,
      'Three namespaces are displayed after clearing the search input'
    );
  });

  test('it shows both "Manage" and "Refresh list" action buttons when canList is true', async function (assert) {
    const storeStub = this.owner.lookup('service:store');
    sinon.stub(storeStub, 'findRecord').callsFake((modelType, id) => {
      if (modelType === 'capabilities' && id === 'sys/namespaces/') {
        return Promise.resolve(getMockCapabilitiesModel(true));
      }
      return Promise.reject();
    });

    await render(hbs`<NamespacePicker />`);
    await click(GENERAL.button('namespace-picker'));

    // Verify that the "Refresh List" button is visible
    assert.dom(GENERAL.button('Refresh list')).exists('Refresh List button is visible');
    assert.dom(GENERAL.button('Manage')).exists('Manage button is visible');
  });

  test('it hides the refresh button when canList is false', async function (assert) {
    const storeStub = this.owner.lookup('service:store');
    sinon.stub(storeStub, 'findRecord').callsFake((modelType, id) => {
      if (modelType === 'capabilities' && id === 'sys/namespaces/') {
        return Promise.resolve(getMockCapabilitiesModel(false));
      }
      return Promise.reject();
    });


Review comment (suggestion):
diff looks bigger than it actually is, i recommend reviewing with ✔️ hide whitespace
<img width="266" height="240" alt="Screenshot 2025-07-16 at 5 27 36 PM" src="https://github.com/user-attachments/assets/fe228161-d704-48ba-b9d1-a46c2414075a" />


Code after:
    });

    test('it shows the "Manage" action when user has canList permissions', async function (assert) {
      this.server.post('/sys/capabilities-self', () => capabilitiesStub('sys/namespaces', ['list']));

      await render(hbs`<NamespacePicker />`);
      await click(GENERAL.button('namespace-picker'));

      assert.dom(GENERAL.button('Manage')).exists('Manage button is visible');
    });

    test('it hides the "Manage" button when canList is false', async function (assert) {
      this.server.post('/sys/capabilities-self', capabilitiesStub(`sys/namespaces`, ['deny']));
      await render(hbs`<NamespacePicker />`);
      await click(GENERAL.button('namespace-picker'));

      // Verify that the buttons are hidden
      assert.dom(GENERAL.button('Manage')).doesNotExist('Manage button is hidden');
    });

    test('it shows "Manage" button when the capabilities request throws an error', async function (assert) {
      // It's rare for the capabilities request to fail (if it does, it's usually because the request is made in the wrong namespace context).
      // If it fails, the UI should show resources and rely on the API to gate them appropriately.
      this.server.post('/sys/capabilities-self', () => overrideResponse(403));

      await render(hbs`<NamespacePicker />`);
      await click(GENERAL.button('namespace-picker'));
      assert.dom(GENERAL.button('Manage')).exists();
    });
  });

  test('it updates the namespace list after clicking "Refresh list"', async function (assert) {
    await render(hbs`<NamespacePicker />`);
    await click(GENERAL.button('namespace-picker'));

    // Verify initial namespaces are displayed
    assert.dom(GENERAL.button('parent1')).exists('Namespace "parent1" is displayed');
    assert.dom(GENERAL.button('parent1/child1')).exists('Namespace "parent1/child1" is displayed');
    assert.dom(GENERAL.button('root')).exists('Namespace "root" is displayed');
    assert
      .dom(GENERAL.button('new-namespace'))
      .doesNotExist('Namespace "new-namespace" is not displayed initially');

    // Re-stub request from beforeEach hook with a new namespace
    this.server.get('/sys/internal/ui/namespaces', () => {
      return {
        data: { keys: ['parent1/', 'parent1/child1/', 'new-namespace/'] },
      };
    });
    // Click the "Refresh list" button
    await click(GENERAL.button('Refresh list'));