Merge branch '444857-setup-required-data-for-allow-block-action-in-agent-auth-ui' into 'master'

Expose required parameters in Agent Authorization UI

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/154341



Merged-by: Jacques Erasmus <jerasmus@gitlab.com>
Approved-by: Thomas Hutterer <thutterer@gitlab.com>
Approved-by: Jacques Erasmus <jerasmus@gitlab.com>
Reviewed-by: Thomas Hutterer <thutterer@gitlab.com>
Co-authored-by: Enrique Alcantara <ealcantara@gitlab.com>

ee/app/assets/javascripts/workspaces/agent_mapping/components/agent_mapping.vue

@@ -31,6 +31,7 @@ export default {
     return {
       agents: [],
       errorMessage: '',
+      namespaceId: '',
     };
   },
   computed: {
@@ -48,7 +49,8 @@ export default {
     },
   },
   methods: {
-    onQueryResult({ agents }) {
+    onQueryResult({ agents, namespaceId }) {
+      this.namespaceId = namespaceId;
       this.agents = agents;
     },
     onErrorResult() {
@@ -80,6 +82,7 @@ export default {
               v-if="!errorMessage"
               data-testid="allowed-agents-table"
               :agents="allowedAgents"
+              :namespace-id="namespaceId"
               :is-loading="loading"
               :empty-state-message="allowedAgentsTableEmptyMessage"
             />
@@ -93,9 +96,10 @@ export default {
             <agents-table
               v-if="!errorMessage"
               data-testid="all-agents-table"
+              display-mapping-status
               :agents="agents"
+              :namespace-id="namespaceId"
               :is-loading="loading"
-              display-mapping-status
               :empty-state-message="$options.NO_AGENTS_MESSAGE"
             />
           </gl-tab>

ee/app/assets/javascripts/workspaces/agent_mapping/components/agents_table.vue

@@ -35,6 +35,11 @@ export default {
       type: Array,
       required: true,
     },
+    namespaceId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     emptyStateMessage: {
       type: String,
       required: true,

ee/app/assets/javascripts/workspaces/agent_mapping/components/get_agents_with_mapping_status_query.vue

@@ -34,7 +34,11 @@ export default {
           return;
         }
 
-        const { remoteDevelopmentClusterAgents, clusterAgents } = result.data.group;
+        const {
+          remoteDevelopmentClusterAgents,
+          clusterAgents,
+          id: namespaceId,
+        } = result.data.group;
 
         const agents =
           clusterAgents?.nodes.map(({ id, name }) => {
@@ -51,7 +55,7 @@ export default {
             };
           }) || [];
 
-        this.$emit('result', { agents });
+        this.$emit('result', { namespaceId, agents });
       },
     },
   },

ee/app/assets/javascripts/workspaces/settings/init_settings_app.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
 import App from './pages/app.vue';
 
 Vue.use(VueApollo);
@@ -19,7 +19,7 @@ const initWorkspacesSettingsApp = () => {
     return null;
   }
 
-  const { namespace } = convertObjectPropsToCamelCase(el.dataset);
+  const { namespace, canAdminClusterAgentMapping } = convertObjectPropsToCamelCase(el.dataset);
 
   return new Vue({
     el,
@@ -27,6 +27,7 @@ const initWorkspacesSettingsApp = () => {
     apolloProvider: createApolloProvider(),
     provide: {
       namespace,
+      canAdminClusterAgentMapping: parseBoolean(canAdminClusterAgentMapping),
     },
     render: (createElement) => createElement(App),
   });

ee/app/views/groups/settings/remote_development/workspaces/show.html.haml

 - page_title s_('Workspaces|Workspaces Settings')
 - breadcrumb_title s_("Workspaces|Workspaces Settings")
 
-#js-workspaces-settings{ data: { namespace: @group.full_path } }
+#js-workspaces-settings{ data: {
+  namespace: @group.full_path,
+  can_admin_cluster_agent_mapping: can?(current_user, :admin_remote_development_cluster_agent_mapping, @group).to_s } }

ee/spec/frontend/workspaces/agent_mapping/components/agent_mapping_spec.js

 import { nextTick } from 'vue';
 import { GlAlert, GlTabs, GlTab, GlBadge } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-
-import {
-  AGENT_MAPPING_STATUS_MAPPED,
-  AGENT_MAPPING_STATUS_UNMAPPED,
-} from 'ee/workspaces/agent_mapping/constants';
 import AgentMapping from 'ee_component/workspaces/agent_mapping/components/agent_mapping.vue';
 import GetAgentsWithMappingStatusQuery from 'ee_component/workspaces/agent_mapping/components/get_agents_with_mapping_status_query.vue';
+import { AGENT_MAPPING_STATUS_MAPPED } from 'ee/workspaces/agent_mapping/constants';
 import { stubComponent } from 'helpers/stub_component';
+import { NAMESPACE_ID, MAPPED_CLUSTER_AGENT, UNMAPPED_CLUSTER_AGENT } from '../../mock_data';
 
-describe('workspaces/agent_mapping/components/agent_mapping.vue', () => {
+describe('workspaces/agent_mapping/components/agent_mapping', () => {
   let wrapper;
   const NAMESPACE = 'foo/bar';
 
@@ -38,6 +35,12 @@ describe('workspaces/agent_mapping/components/agent_mapping.vue', () => {
   const findErrorAlert = () => wrapper.findComponent(GlAlert);
   const findAllowedAgentsTab = () => wrapper.findByTestId('allowed-agents-tab');
   const findAllAgentsTab = () => wrapper.findByTestId('all-agents-tab');
+  const triggerQueryResultEvent = (result) => {
+    findGetAgentsWithMappingStatusQuery().vm.$emit('result', {
+      namespaceId: NAMESPACE_ID,
+      ...result,
+    });
+  };
 
   describe('default', () => {
     beforeEach(() => {
@@ -64,26 +67,18 @@ describe('workspaces/agent_mapping/components/agent_mapping.vue', () => {
         buildWrapper();
 
         agents = [
+          MAPPED_CLUSTER_AGENT,
+          UNMAPPED_CLUSTER_AGENT,
           {
-            id: 'agent-1',
-            name: 'agent one',
-            mappingStatus: AGENT_MAPPING_STATUS_MAPPED,
-          },
-          {
-            id: 'agent-2',
-            name: 'agent two',
-            mappingStatus: AGENT_MAPPING_STATUS_UNMAPPED,
-          },
-          {
+            ...UNMAPPED_CLUSTER_AGENT,
             id: 'agent-3',
             name: 'agent three',
-            mappingStatus: AGENT_MAPPING_STATUS_UNMAPPED,
           },
         ];
         allowedAgents = agents.filter(
           (agent) => agent.mappingStatus === AGENT_MAPPING_STATUS_MAPPED,
         );
-        findGetAgentsWithMappingStatusQuery().vm.$emit('result', { agents });
+        triggerQueryResultEvent({ agents });
         await nextTick();
       });
 
@@ -99,6 +94,11 @@ describe('workspaces/agent_mapping/components/agent_mapping.vue', () => {
         );
       });
 
+      it('passes namespaceId to all tables', () => {
+        expect(findAllowedAgentsTable().props('namespaceId')).toEqual(NAMESPACE_ID);
+        expect(findAllAgentsTable().props('namespaceId')).toEqual(NAMESPACE_ID);
+      });
+
       it('passes allowed agents to the allowed agents table', () => {
         expect(findAllowedAgentsTable().props('agents')).toEqual(allowedAgents);
       });
@@ -116,18 +116,14 @@ describe('workspaces/agent_mapping/components/agent_mapping.vue', () => {
           buildWrapper();
 
           agents = [
+            UNMAPPED_CLUSTER_AGENT,
             {
-              id: 'agent-2',
-              name: 'agent two',
-              mappingStatus: AGENT_MAPPING_STATUS_UNMAPPED,
-            },
-            {
+              ...UNMAPPED_CLUSTER_AGENT,
               id: 'agent-3',
               name: 'agent three',
-              mappingStatus: AGENT_MAPPING_STATUS_UNMAPPED,
             },
           ];
-          findGetAgentsWithMappingStatusQuery().vm.$emit('result', { agents });
+          triggerQueryResultEvent({ agents });
           await nextTick();
         });
 
@@ -143,7 +139,7 @@ describe('workspaces/agent_mapping/components/agent_mapping.vue', () => {
           buildWrapper();
 
           agents = [];
-          findGetAgentsWithMappingStatusQuery().vm.$emit('result', { agents });
+          triggerQueryResultEvent({ agents });
           await nextTick();
         });
 

ee/spec/frontend/workspaces/agent_mapping/components/get_agents_with_mapping_status_query_spec.js

@@ -85,6 +85,7 @@ describe('workspaces/agent_mapping/components/get_agents_with_mapping_status_que
         expect(wrapper.emitted('result')).toEqual([
           [
             {
+              namespaceId: GET_AGENTS_WITH_MAPPING_STATUS_QUERY_RESULT.data.group.id,
               agents: [
                 {
                   id: 'gid://gitlab/Clusters::Agent/1',

ee/spec/frontend/workspaces/mock_data/index.js

 import { cloneDeep } from 'lodash';
 import { TEST_HOST } from 'helpers/test_constants';
 import { WORKSPACE_DESIRED_STATES, WORKSPACE_STATES } from 'ee/workspaces/common/constants';
+import {
+  AGENT_MAPPING_STATUS_MAPPED,
+  AGENT_MAPPING_STATUS_UNMAPPED,
+} from 'ee/workspaces/agent_mapping/constants';
 
 export const WORKSPACE = {
   __typename: 'Workspace',
@@ -402,3 +406,33 @@ export const WORKSPACE_UPDATE_MUTATION_RESULT = {
     },
   },
 };
+
+export const CREATE_CLUSTER_AGENT_MAPPING_MUTATION_RESULT = {
+  data: {
+    namespaceCreateRemoteDevelopmentClusterAgentMapping: {
+      clientMutationId: null,
+    },
+  },
+};
+
+export const DELETE_CLUSTER_AGENT_MAPPING_MUTATION_RESULT = {
+  data: {
+    namespaceDeleteRemoteDevelopmentClusterAgentMapping: {
+      clientMutationId: null,
+    },
+  },
+};
+
+export const MAPPED_CLUSTER_AGENT = {
+  id: 'gid://gitlab/Clusters::Agent/1',
+  name: 'rootgroup-agent',
+  mappingStatus: AGENT_MAPPING_STATUS_MAPPED,
+};
+
+export const UNMAPPED_CLUSTER_AGENT = {
+  id: 'gid://gitlab/Clusters::Agent/2',
+  name: 'rootgroup-agent-2',
+  mappingStatus: AGENT_MAPPING_STATUS_UNMAPPED,
+};
+
+export const NAMESPACE_ID = 'gid://gitlab/Group/81';