From 6ec1b8d93bddaa06afcd798787498682dc5bcdb1 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Mon, 26 May 2025 15:58:55 +0900
Subject: [PATCH 1/3] Pass organization ID to Vue app

- Pass organization ID to Vue app
- Refactor to use Settings Block Vue component
---
 .../admin_settings/init_admin_settings_app.js | 13 +++-
 .../workspaces/admin_settings/pages/app.vue   | 75 ++++++++++++-------
 .../workspaces/_agent_availability.html.haml  |  8 +-
 .../_agent_availability.html.haml_spec.rb     | 15 +++-
 4 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js b/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
index 54e81abaa3c02e..cdae7fe4c93d88 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
@@ -1,16 +1,25 @@
 import Vue from 'vue';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { TYPE_ORGANIZATION } from '~/graphql_shared/constants';
+
 import WorkspacesAgentAvailabilityApp from './pages/app.vue';
 
 const initWorkspacesAgentAvailabilityApp = () => {
-  const el = document.getElementById('js-workspaces-agent-availability-settings-body');
+  const el = document.getElementById('js-workspaces-agent-availability-settings');
+
+  if (!el?.dataset) return null;
 
-  if (!el) return null;
+  const { organizationId, defaultExpanded } = el.dataset;
 
   return new Vue({
     el,
     components: {
       WorkspacesAgentAvailabilityApp,
     },
+    provide: {
+      organizationId: convertToGraphQLId(TYPE_ORGANIZATION, organizationId),
+      defaultExpanded: defaultExpanded === 'true',
+    },
     render(createElement) {
       return createElement(WorkspacesAgentAvailabilityApp);
     },
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index f50a6239cf206f..bd2922502a0af1 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlBadge, GlTableLite, GlToggle } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
 import { AVAILABILITY_TEXT, CONNECTION_STATUS_TEXT, CONNECTION_STATUS } from '../constants';
 
@@ -10,6 +11,17 @@ export default {
     GlTableLite,
     GlBadge,
     GlToggle,
+    SettingsBlock,
+  },
+  inject: {
+    organizationId: {
+      type: String,
+      default: '',
+    },
+    defaultExpanded: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     getBadgeVariant(status) {
@@ -66,34 +78,45 @@ export default {
       label: s__('Workspaces|Availability'),
     },
   ],
+  SETTINGS_TITLE: s__('Workspaces|Workspaces Agent Availability'),
+  SETTINGS_DESCRIPTION: s__(
+    'Workspaces|Configure which Kubernetes agents are available for new workspaces. These settings do not affect existing workspaces.',
+  ),
 };
 </script>
 <template>
-  <div>
-    <gl-table-lite
-      v-if="$options.mockData.length"
-      responsive
-      :items="$options.mockData"
-      :fields="$options.fields"
-    >
-      <template #cell(status)="{ item }">
-        <gl-badge v-if="item.status" :variant="getBadgeVariant(item.status)">{{
-          getStatusText(item.status)
-        }}</gl-badge>
-      </template>
-      <template #cell(availability)="{ item }">
-        <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
-          <gl-toggle
-            :value="item.availability === 'available'"
-            :label="getAvailabilityText(item.availability)"
-            label-position="hidden"
-          />
-          <p class="gl-mb-0">{{ getAvailabilityText(item.availability) }}</p>
+  <settings-block :title="$options.SETTINGS_TITLE" :default-expanded="defaultExpanded">
+    <template #description>
+      {{ $options.SETTINGS_DESCRIPTION }}
+    </template>
+    <template #default>
+      <div>
+        <gl-table-lite
+          v-if="$options.mockData.length"
+          responsive
+          :items="$options.mockData"
+          :fields="$options.fields"
+        >
+          <template #cell(status)="{ item }">
+            <gl-badge v-if="item.status" :variant="getBadgeVariant(item.status)">{{
+              getStatusText(item.status)
+            }}</gl-badge>
+          </template>
+          <template #cell(availability)="{ item }">
+            <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
+              <gl-toggle
+                :value="item.availability === 'available'"
+                :label="getAvailabilityText(item.availability)"
+                label-position="hidden"
+              />
+              <p class="gl-mb-0">{{ getAvailabilityText(item.availability) }}</p>
+            </div>
+          </template>
+        </gl-table-lite>
+        <div v-else data-testid="workspaces-agent-availability-empty-state">
+          {{ s__('Workspaces|No agents available') }}
         </div>
-      </template>
-    </gl-table-lite>
-    <div v-else data-testid="workspaces-agent-availability-empty-state">
-      {{ s__('Workspaces|No agents available') }}
-    </div>
-  </div>
+      </div>
+    </template>
+  </settings-block>
 </template>
diff --git a/ee/app/views/admin/application_settings/workspaces/_agent_availability.html.haml b/ee/app/views/admin/application_settings/workspaces/_agent_availability.html.haml
index 3a41cf7eda62b1..7e7d9fd1448d54 100644
--- a/ee/app/views/admin/application_settings/workspaces/_agent_availability.html.haml
+++ b/ee/app/views/admin/application_settings/workspaces/_agent_availability.html.haml
@@ -1,9 +1,3 @@
 - return unless ::License.feature_available?(:remote_development) && ::Feature.enabled?(:workspaces_agents_availability_admin, current_user)
 
-= render ::Layouts::SettingsBlockComponent.new(s_('Workspaces|Workspaces Agent Availability'),
-  id: 'js-workspaces-agent-availability-settings',
-  expanded: expanded_by_default?) do |setting|
-  - setting.with_description do
-    = s_('Workspaces|Configure which Kubernetes agents are available for new workspaces. These settings do not affect existing workspaces.')
-  - setting.with_body do
-    #js-workspaces-agent-availability-settings-body
+#js-workspaces-agent-availability-settings{ data: { organization_id: Current.organization.id, default_expanded: expanded_by_default?.to_s } }
diff --git a/ee/spec/views/admin/application_settings/workspaces/_agent_availability.html.haml_spec.rb b/ee/spec/views/admin/application_settings/workspaces/_agent_availability.html.haml_spec.rb
index 2cf14d3ae22c9e..95c53d52f8041a 100644
--- a/ee/spec/views/admin/application_settings/workspaces/_agent_availability.html.haml_spec.rb
+++ b/ee/spec/views/admin/application_settings/workspaces/_agent_availability.html.haml_spec.rb
@@ -3,6 +3,7 @@
 require 'spec_helper'
 
 RSpec.describe 'admin/application_settings/_workspaces_agent_availability', feature_category: :workspaces do
+  let_it_be(:organization) { build_stubbed(:organization) }
   let_it_be(:user) { build_stubbed(:admin) }
   let_it_be(:app_settings) { build(:application_setting) }
 
@@ -12,7 +13,11 @@
 
   before do
     assign(:application_setting, app_settings)
-    allow(view).to receive(:current_user).and_return(user)
+    allow(view).to receive_messages(
+      current_user: user,
+      expanded_by_default?: true
+    )
+    ::Current.organization = organization
   end
 
   [true, false].each do |license_enabled|
@@ -34,4 +39,12 @@
       end
     end
   end
+
+  it "passes correct data to selector" do
+    stub_licensed_features(remote_development: true)
+    stub_feature_flags(workspaces_agents_availability_admin: true)
+
+    expect(rendered).to have_selector("[data-organization-id='#{organization.id}']")
+    expect(rendered).to have_selector("[data-default-expanded='true']")
+  end
 end
-- 
GitLab


From 46149cc9ba377983b4f530a6be6584ec13145313 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Tue, 27 May 2025 12:46:08 +0900
Subject: [PATCH 2/3] Add missing UI requirements

---
 .../components/availability_popover.vue       | 32 ++++++++++++++
 .../admin_settings/init_admin_settings_app.js |  3 +-
 .../workspaces/admin_settings/pages/app.vue   | 26 +++++++++--
 .../admin_settings/pages/app_spec.js          | 44 +++++++++++++++++++
 locale/gitlab.pot                             |  6 +++
 5 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
 create mode 100644 ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
new file mode 100644
index 00000000000000..90451805acf0ce
--- /dev/null
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlIcon, GlPopover } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  name: 'AvailabilityPopover',
+  components: {
+    GlIcon,
+    GlPopover,
+  },
+  AGENT_CONFIG_NOTE_POPOVER_CONTENT: s__(
+    "Workspaces|In order to make an agent available/blocked, workspaces must be enabled in the agent's configuration.",
+  ),
+  BLOCKING_AGENT_POPOVER_CONTENT: s__(
+    "Workspaces|Blocking an agent doesn't delete it. Agents can only be deleted in the project where they were created. In addition, existing workspaces using a blocked agent will continue to run.",
+  ),
+};
+</script>
+<template>
+  <div>
+    <gl-icon id="question-icon" name="question-o" />
+    <gl-popover
+      triggers="hover focus"
+      :show-close-button="false"
+      placement="top"
+      target="question-icon"
+    >
+      <p>{{ $options.AGENT_CONFIG_NOTE_POPOVER_CONTENT }}</p>
+      <p>{{ $options.BLOCKING_AGENT_POPOVER_CONTENT }}</p>
+    </gl-popover>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js b/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
index cdae7fe4c93d88..b340f8711455d3 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/init_admin_settings_app.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_ORGANIZATION } from '~/graphql_shared/constants';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 import WorkspacesAgentAvailabilityApp from './pages/app.vue';
 
@@ -18,7 +19,7 @@ const initWorkspacesAgentAvailabilityApp = () => {
     },
     provide: {
       organizationId: convertToGraphQLId(TYPE_ORGANIZATION, organizationId),
-      defaultExpanded: defaultExpanded === 'true',
+      defaultExpanded: parseBoolean(defaultExpanded),
     },
     render(createElement) {
       return createElement(WorkspacesAgentAvailabilityApp);
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index bd2922502a0af1..f20f33f12e718b 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -1,17 +1,20 @@
 <script>
-import { GlBadge, GlTableLite, GlToggle } from '@gitlab/ui';
+import { GlBadge, GlTableLite, GlToggle, GlLink } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
 import { AVAILABILITY_TEXT, CONNECTION_STATUS_TEXT, CONNECTION_STATUS } from '../constants';
+import AvailabilityPopover from '../components/availability_popover.vue';
 
 export default {
   name: 'WorkspacesAgentAvailabilityApp',
   components: {
+    SettingsBlock,
+    AvailabilityPopover,
     GlTableLite,
     GlBadge,
     GlToggle,
-    SettingsBlock,
+    GlLink,
   },
   inject: {
     organizationId: {
@@ -45,8 +48,9 @@ export default {
       name: 'remotedev',
       group: 'GitLab.com',
       project: 'GitLab Shell',
-      status: 'connected',
       availability: 'available',
+      status: 'connected',
+      url: '',
     },
     {
       name: 'ws-agent',
@@ -54,6 +58,7 @@ export default {
       project: 'GitLab Shell',
       status: 'not_connected',
       availability: 'blocked',
+      url: '',
     },
   ],
   fields: [
@@ -97,6 +102,21 @@ export default {
           :items="$options.mockData"
           :fields="$options.fields"
         >
+          <template #head(availability)="{ label }">
+            <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
+              <span>{{ label }}</span>
+              <availability-popover />
+            </div>
+          </template>
+          <template #cell(name)="{ item }">
+            <gl-link
+              class="gl-font-bold"
+              data-test-id="agent-name"
+              :href="item.url"
+              target="_blank"
+              >{{ item.name }}</gl-link
+            >
+          </template>
           <template #cell(status)="{ item }">
             <gl-badge v-if="item.status" :variant="getBadgeVariant(item.status)">{{
               getStatusText(item.status)
diff --git a/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
new file mode 100644
index 00000000000000..aed43d2677fda1
--- /dev/null
+++ b/ee/spec/frontend/workspaces/admin_settings/pages/app_spec.js
@@ -0,0 +1,44 @@
+import { nextTick } from 'vue';
+import { GlTableLite, GlLink } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import WorkspacesAgentAvailabilityApp from 'ee_component/workspaces/admin_settings/pages/app.vue';
+import AvailabilityPopover from 'ee_component/workspaces/admin_settings/components/availability_popover.vue';
+
+const MOCK_ORG_ID = 'gid://gitlab/Organizations::Organization/1';
+
+describe('workspaces/admin_settings/pages/app.vue', () => {
+  let wrapper;
+
+  const buildWrapper = () => {
+    wrapper = mountExtended(WorkspacesAgentAvailabilityApp, {
+      provide: {
+        organizationId: MOCK_ORG_ID,
+        defaultExpanded: true,
+      },
+    });
+  };
+  const findAgentsTable = () => wrapper.findComponent(GlTableLite);
+  const findAvailabilityPopover = () => wrapper.findComponent(AvailabilityPopover);
+
+  describe('default', () => {
+    beforeEach(async () => {
+      buildWrapper();
+      await nextTick();
+    });
+
+    it('renders agents table', () => {
+      expect(findAgentsTable().exists()).toBe(true);
+    });
+
+    it('renders popover in availability header column', () => {
+      expect(findAvailabilityPopover().exists()).toBe(true);
+    });
+
+    it('renders agent name with link to the agent page', () => {
+      const nameElement = wrapper.findComponent(GlLink);
+      expect(nameElement.exists()).toBe(true);
+      // TODO: update once we implement query: https://gitlab.com/gitlab-org/gitlab/-/issues/513370
+      expect(nameElement.attributes('href')).toBe('#');
+    });
+  });
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 361752fcf7ccae..540cb18f2b61db 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -70304,6 +70304,9 @@ msgstr ""
 msgid "Workspaces|Blocking an agent doesn't delete it. Agents can only be deleted in the project where they were created."
 msgstr ""
 
+msgid "Workspaces|Blocking an agent doesn't delete it. Agents can only be deleted in the project where they were created. In addition, existing workspaces using a blocked agent will continue to run."
+msgstr ""
+
 msgid "Workspaces|Cancel"
 msgstr ""
 
@@ -70388,6 +70391,9 @@ msgstr ""
 msgid "Workspaces|If your devfile is not in the root directory of your project, specify a relative path."
 msgstr ""
 
+msgid "Workspaces|In order to make an agent available/blocked, workspaces must be enabled in the agent's configuration."
+msgstr ""
+
 msgid "Workspaces|Instant development environments"
 msgstr ""
 
-- 
GitLab


From 961d5ca3b064347ff4a994a3ba28d89e7027a42f Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Wed, 28 May 2025 12:34:39 +0900
Subject: [PATCH 3/3] Apply MR feedback

---
 .../components/availability_popover.vue              |  7 +------
 .../workspaces/admin_settings/pages/app.vue          |  2 +-
 ee/spec/features/admin/admin_settings_spec.rb        |  2 +-
 .../workspaces/_agent_availability.html.haml_spec.rb | 12 +++++++-----
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
index 90451805acf0ce..572d4a56a1c129 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/components/availability_popover.vue
@@ -19,12 +19,7 @@ export default {
 <template>
   <div>
     <gl-icon id="question-icon" name="question-o" />
-    <gl-popover
-      triggers="hover focus"
-      :show-close-button="false"
-      placement="top"
-      target="question-icon"
-    >
+    <gl-popover target="question-icon">
       <p>{{ $options.AGENT_CONFIG_NOTE_POPOVER_CONTENT }}</p>
       <p>{{ $options.BLOCKING_AGENT_POPOVER_CONTENT }}</p>
     </gl-popover>
diff --git a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
index f20f33f12e718b..0e083f8d9ce32c 100644
--- a/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
+++ b/ee/app/assets/javascripts/workspaces/admin_settings/pages/app.vue
@@ -103,7 +103,7 @@ export default {
           :fields="$options.fields"
         >
           <template #head(availability)="{ label }">
-            <div class="gl-flex gl-flex-row gl-items-center gl-gap-3">
+            <div class="gl-flex gl-items-center gl-gap-3">
               <span>{{ label }}</span>
               <availability-popover />
             </div>
diff --git a/ee/spec/features/admin/admin_settings_spec.rb b/ee/spec/features/admin/admin_settings_spec.rb
index e5261eefcad9e4..8185d5d906571e 100644
--- a/ee/spec/features/admin/admin_settings_spec.rb
+++ b/ee/spec/features/admin/admin_settings_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Admin updates EE-only settings', feature_category: :shared do
+RSpec.describe 'Admin updates EE-only settings', :with_current_organization, feature_category: :shared do
   include StubENV
   include Spec::Support::Helpers::ModalHelpers
   include ListboxHelpers
diff --git a/ee/spec/views/admin/application_settings/workspaces/_agent_availability.html.haml_spec.rb b/ee/spec/views/admin/application_settings/workspaces/_agent_availability.html.haml_spec.rb
index 95c53d52f8041a..f61bea144ac50f 100644
--- a/ee/spec/views/admin/application_settings/workspaces/_agent_availability.html.haml_spec.rb
+++ b/ee/spec/views/admin/application_settings/workspaces/_agent_availability.html.haml_spec.rb
@@ -40,11 +40,13 @@
     end
   end
 
-  it "passes correct data to selector" do
-    stub_licensed_features(remote_development: true)
-    stub_feature_flags(workspaces_agents_availability_admin: true)
+  context 'when settings is rendered' do
+    before do
+      stub_licensed_features(remote_development: true)
+      stub_feature_flags(workspaces_agents_availability_admin: true)
+    end
 
-    expect(rendered).to have_selector("[data-organization-id='#{organization.id}']")
-    expect(rendered).to have_selector("[data-default-expanded='true']")
+    it { is_expected.to have_selector("[data-organization-id='#{organization.id}']") }
+    it { is_expected.to have_selector("[data-default-expanded='true']") }
   end
 end
-- 
GitLab