Merge branch '218007-fix-incomplete-kubernetes-cluster-status-list' into 'master'

Resolve "Fix Incomplete Kubernetes Cluster Status List"

See merge request gitlab-org/gitlab!33344

app/assets/javascripts/clusters_list/components/clusters.vue

@@ -72,10 +72,7 @@ export default {
   },
   methods: {
     ...mapActions(['fetchClusters', 'setPage']),
-    statusClass(status) {
-      const iconClass = STATUSES[status] || STATUSES.default;
-      return iconClass.className;
-    },
+
     statusTitle(status) {
       const iconTitle = STATUSES[status] || STATUSES.default;
       return sprintf(__('Status: %{title}'), { title: iconTitle.title }, false);
@@ -96,19 +93,12 @@ export default {
           </gl-link>
 
           <gl-loading-icon
-            v-if="item.status === 'deleting'"
+            v-if="item.status === 'deleting' || item.status === 'creating'"
             v-tooltip
             :title="statusTitle(item.status)"
             size="sm"
             class="mr-2 ml-md-2"
           />
-          <div
-            v-else
-            v-tooltip
-            class="cluster-status-indicator rounded-circle align-self-center gl-w-4 gl-h-4 mr-2 ml-md-2"
-            :class="statusClass(item.status)"
-            :title="statusTitle(item.status)"
-          ></div>
         </div>
       </template>
 

app/assets/javascripts/clusters_list/constants.js

@@ -15,4 +15,5 @@ export const STATUSES = {
   unreachable: { className: 'bg-danger', title: __('Unreachable') },
   authentication_failure: { className: 'bg-warning', title: __('Authentication Failure') },
   deleting: { title: __('Deleting') },
+  creating: { title: __('Creating') },
 };

changelogs/unreleased/218007-fix-incomplete-kubernetes-cluster-status-list.yml

+---
+title: Resolve Fix Incomplete Kubernetes Cluster Status List
+merge_request: 33344
+author:
+type: fixed

locale/gitlab.pot

@@ -6636,6 +6636,9 @@ msgstr ""
 msgid "Creates branch '%{branch_name}' and a merge request to resolve this issue."
 msgstr ""
 
+msgid "Creating"
+msgstr ""
+
 msgid "Creating epic"
 msgstr ""
 

spec/frontend/clusters_list/components/clusters_spec.js

@@ -83,24 +83,21 @@ describe('Clusters', () => {
 
   describe('cluster status', () => {
     it.each`
-      statusName                  | className       | lineNumber
-      ${'disabled'}               | ${'disabled'}   | ${0}
-      ${'unreachable'}            | ${'bg-danger'}  | ${1}
-      ${'authentication_failure'} | ${'bg-warning'} | ${2}
-      ${'deleting'}               | ${null}         | ${3}
-      ${'created'}                | ${'bg-success'} | ${4}
-      ${'default'}                | ${'bg-white'}   | ${5}
-    `('renders a status for each cluster', ({ statusName, className, lineNumber }) => {
+      statusName    | lineNumber | result
+      ${'creating'} | ${0}       | ${true}
+      ${null}       | ${1}       | ${false}
+      ${null}       | ${2}       | ${false}
+      ${'deleting'} | ${3}       | ${true}
+      ${null}       | ${4}       | ${false}
+      ${null}       | ${5}       | ${false}
+    `(
+      'renders $result when status=$statusName and lineNumber=$lineNumber',
+      ({ lineNumber, result }) => {
         const statuses = findStatuses();
         const status = statuses.at(lineNumber);
-      if (statusName !== 'deleting') {
-        const statusIndicator = status.find('.cluster-status-indicator');
-        expect(statusIndicator.exists()).toBe(true);
-        expect(statusIndicator.classes()).toContain(className);
-      } else {
-        expect(status.find(GlLoadingIcon).exists()).toBe(true);
-      }
-    });
+        expect(status.find(GlLoadingIcon).exists()).toBe(result);
+      },
+    );
   });
 
   describe('nodes present', () => {

spec/frontend/clusters_list/mock_data.js

@@ -3,7 +3,7 @@ export const clusterList = [
     name: 'My Cluster 1',
     environment_scope: '*',
     cluster_type: 'group_type',
-    status: 'disabled',
+    status: 'creating',
     nodes: null,
   },
   {