Merge branch '327854-empty-state-frontend' into 'master'

Empty state frontend

See merge request gitlab-org/gitlab!65198

app/assets/stylesheets/pages/clusters.scss

@@ -87,6 +87,20 @@
     width: 145px;
   }
 
+  .empty-state--agent {
+    .text-content {
+      @include gl-max-w-full;
+      @include media-breakpoint-up(lg) {
+        max-width: 70%;
+      }
+    }
+
+    .gl-alert-actions {
+      @include gl-mt-0;
+      @include gl-flex-wrap;
+    }
+  }
+
   .top-area .nav-controls > .btn.btn-add-cluster {
     margin-right: 0;
   }

ee/app/assets/javascripts/clusters_list/components/agent_empty_state.vue

 <script>
-import { GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
 
 export default {
   components: {
@@ -7,12 +7,26 @@ export default {
     GlEmptyState,
     GlLink,
     GlSprintf,
+    GlAlert,
   },
   props: {
     image: {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    hasConfigurations: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    repositoryPath() {
+      return `/${this.projectPath}`;
+    },
   },
 };
 </script>
@@ -21,9 +35,10 @@ export default {
   <gl-empty-state
     :svg-path="image"
     :title="s__('ClusterAgents|Integrate Kubernetes with a GitLab Agent')"
+    class="empty-state--agent"
   >
     <template #description>
-      <p>
+      <p class="mw-460 gl-mx-auto">
         <gl-sprintf
           :message="
             s__(
@@ -39,7 +54,7 @@ export default {
         </gl-sprintf>
       </p>
 
-      <p>
+      <p class="mw-460 gl-mx-auto">
         <gl-sprintf
           :message="
             s__(
@@ -57,10 +72,40 @@ export default {
           </template>
         </gl-sprintf>
       </p>
+
+      <gl-alert
+        v-if="!hasConfigurations"
+        variant="warning"
+        class="gl-mb-5 text-left"
+        :dismissible="false"
+      >
+        {{
+          s__(
+            'ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process.',
+          )
+        }}
+
+        <template #actions>
+          <gl-button
+            category="primary"
+            variant="info"
+            href="https://docs.gitlab.com/ee/user/clusters/agent/#define-a-configuration-repository"
+            target="_blank"
+            class="gl-ml-0!"
+          >
+            {{ s__('ClusterAgents|Read more about getting started') }}
+          </gl-button>
+          <gl-button category="secondary" variant="info" :href="repositoryPath">
+            {{ s__('ClusterAgents|Go to the repository') }}
+          </gl-button>
+        </template>
+      </gl-alert>
     </template>
 
     <template #actions>
       <gl-button
+        :disabled="!hasConfigurations"
+        data-testid="integration-primary-button"
         category="primary"
         variant="success"
         href="https://docs.gitlab.com/ee/user/clusters/agent/#get-started-with-gitops-and-the-gitlab-agent"

ee/app/assets/javascripts/clusters_list/components/agents.vue

@@ -78,6 +78,9 @@ export default {
     treePageInfo() {
       return this.agents?.project?.repository?.tree?.trees?.pageInfo || {};
     },
+    hasConfigurations() {
+      return Boolean(this.agents?.project?.repository?.tree?.trees?.nodes?.length);
+    },
   },
   methods: {
     nextPage() {
@@ -121,7 +124,12 @@ export default {
       </div>
     </div>
 
-    <AgentEmptyState v-else :image="emptyStateImage" />
+    <AgentEmptyState
+      v-else
+      :image="emptyStateImage"
+      :project-path="projectPath"
+      :has-configurations="hasConfigurations"
+    />
   </section>
 
   <gl-alert v-else variant="danger" :dismissible="false">

ee/spec/frontend/clusters_list/components/agent_empty_state_spec.js

-import { GlEmptyState, GlSprintf } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlEmptyState, GlSprintf } from '@gitlab/ui';
 import AgentEmptyState from 'ee/clusters_list/components/agent_empty_state.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('AgentEmptyStateComponent', () => {
   let wrapper;
 
   const propsData = {
     image: '/image/path',
+    projectPath: 'path/to/project',
+    hasConfigurations: false,
   };
 
+  const findConfigurationsAlert = () => wrapper.findComponent(GlAlert);
+  const findIntegrationButton = () => wrapper.findByTestId('integration-primary-button');
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+
   beforeEach(() => {
-    wrapper = shallowMount(AgentEmptyState, { propsData, stubs: { GlEmptyState, GlSprintf } });
+    wrapper = shallowMountExtended(AgentEmptyState, {
+      propsData,
+      stubs: { GlEmptyState, GlSprintf },
+    });
   });
 
   afterEach(() => {
@@ -20,8 +29,27 @@ describe('AgentEmptyStateComponent', () => {
     }
   });
 
-  it('should render content', () => {
-    expect(wrapper.find(GlEmptyState).exists()).toBe(true);
-    expect(wrapper.text()).toContain('Integrate with the GitLab Agent');
+  describe('when there are no agent configurations in repository', () => {
+    it('should render notification message box', () => {
+      expect(findConfigurationsAlert().exists()).toBe(true);
+    });
+
+    it('should disable integration button', () => {
+      expect(findIntegrationButton().attributes('disabled')).toBe('true');
+    });
+  });
+
+  describe('when there is a list of agent configurations', () => {
+    beforeEach(() => {
+      propsData.hasConfigurations = true;
+      wrapper = shallowMountExtended(AgentEmptyState, {
+        propsData,
+      });
+    });
+    it('should render content without notification message box', () => {
+      expect(findEmptyState().exists()).toBe(true);
+      expect(findConfigurationsAlert().exists()).toBe(false);
+      expect(findIntegrationButton().attributes('disabled')).toBeUndefined();
+    });
   });
 });

ee/spec/frontend/clusters_list/components/agents_spec.js

@@ -138,6 +138,28 @@ describe('Agents', () => {
       expect(findAgentTable().exists()).toBe(false);
       expect(findEmptyState().exists()).toBe(true);
     });
+
+    it('should pass the correct project path to empty state component', () => {
+      expect(findEmptyState().props('projectPath')).toEqual('path/to/project');
+    });
+  });
+
+  describe('when the agent configurations are present', () => {
+    const trees = [
+      {
+        name: 'agent-1',
+        path: '.gitlab/agents/agent-1',
+        webPath: '/project/path/.gitlab/agents/agent-1',
+      },
+    ];
+
+    beforeEach(() => {
+      return createWrapper({ agents: [], trees });
+    });
+
+    it('should pass the correct hasConfigurations boolean value to empty state component', () => {
+      expect(findEmptyState().props('hasConfigurations')).toEqual(true);
+    });
   });
 
   describe('when agents query has errored', () => {

locale/gitlab.pot

@@ -6958,6 +6958,9 @@ msgstr ""
 msgid "ClusterAgents|Description"
 msgstr ""
 
+msgid "ClusterAgents|Go to the repository"
+msgstr ""
+
 msgid "ClusterAgents|Integrate Kubernetes with a GitLab Agent"
 msgstr ""
 
@@ -6979,6 +6982,9 @@ msgstr ""
 msgid "ClusterAgents|Never"
 msgstr ""
 
+msgid "ClusterAgents|Read more about getting started"
+msgstr ""
+
 msgid "ClusterAgents|The GitLab Agent also requires %{linkStart}enabling the Agent Server%{linkEnd}"
 msgstr ""
 
@@ -6988,6 +6994,9 @@ msgstr ""
 msgid "ClusterAgents|This agent has no tokens"
 msgstr ""
 
+msgid "ClusterAgents|To install an Agent you should create an agent directory in the Repository first. We recommend that you add the Agent configuration to the directory before you start the installation process."
+msgstr ""
+
 msgid "ClusterAgents|Unknown user"
 msgstr ""