Merge branch 'update-kubernates-empty-states' into 'master'

Update kubernates empty states

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



Merged-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Approved-by: Emily Bauman <ebauman@gitlab.com>
Approved-by: Anna Vovchenko <avovchenko@gitlab.com>
Approved-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Reviewed-by: Anna Vovchenko <avovchenko@gitlab.com>
Co-authored-by: Julia Miocene <jmiocene@gitlab.com>

app/assets/javascripts/environments/components/empty_state.vue

@@ -2,6 +2,7 @@
 import emptyEnvironmentsSvgPath from '@gitlab/svgs/dist/illustrations/empty-state/empty-environment-md.svg';
 import { GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import EmptyResult from '~/vue_shared/components/empty_result.vue';
 
 export default {
   components: {
@@ -9,6 +10,7 @@ export default {
     GlEmptyState,
     GlLink,
     GlSprintf,
+    EmptyResult,
   },
   inject: ['newEnvironmentPath'],
   props: {
@@ -31,9 +33,7 @@ export default {
     },
   },
   i18n: {
-    searchingTitle: s__('Environments|No results found'),
     title: s__('Environments|Get started with environments'),
-    searchingContent: s__('Environments|Edit your search and try again'),
     content: s__(
       'Environments|Environments are places where code gets deployed, such as staging or production. You can create an environment in the UI or in your .gitlab-ci.yml file. You can also enable review apps, which assist with providing an environment to showcase product changes. %{linkStart}Learn more%{linkEnd} about environments.',
     ),
@@ -44,13 +44,15 @@ export default {
 };
 </script>
 <template>
+  <empty-result v-if="hasTerm" type="search" />
   <gl-empty-state
+    v-else
     class="gl-mx-auto gl-max-w-limited"
-    :title="title"
+    :title="$options.i18n.title"
     :svg-path="$options.emptyEnvironmentsSvgPath"
   >
     <template #description>
-      <gl-sprintf :message="content">
+      <gl-sprintf :message="$options.i18n.content">
         <template #link="{ content: contentToDisplay }">
           <gl-link :href="helpPath">{{ contentToDisplay }}</gl-link>
         </template>

app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue

 <script>
 import { GlLoadingIcon, GlAlert, GlEmptyState, GlSprintf, GlIcon } from '@gitlab/ui';
-import EmptyStateSvg from '@gitlab/svgs/dist/illustrations/Dependency-list-empty-state.svg?url';
+import EmptyStateSvg from '@gitlab/svgs/dist/illustrations/status/status-nothing-md.svg';
 import k8sLogsQuery from '~/environments/graphql/queries/k8s_logs.query.graphql';
 import environmentClusterAgentQuery from '~/environments/graphql/queries/environment_cluster_agent.query.graphql';
 import { createK8sAccessConfiguration } from '~/environments/helpers/k8s_integration_helper';

app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_overview.vue

@@ -8,7 +8,7 @@ import {
   GlDisclosureDropdownItem,
   GlModalDirective,
 } from '@gitlab/ui';
-import CLUSTER_EMPTY_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-state-clusters.svg?url';
+import CLUSTER_EMPTY_SVG from '@gitlab/svgs/dist/illustrations/empty-state/empty-environment-md.svg';
 import { isEmpty } from 'lodash';
 import { s__, __ } from '~/locale';
 import { createAlert } from '~/alert';

app/assets/javascripts/environments/environment_details/empty_state.vue

 <script>
 import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import EMPTY_SVG from '@gitlab/svgs/dist/illustrations/status/status-nothing-md.svg';
 import { translations, environmentsLearnMorePath, environmentsHelpPagePath } from './constants';
 
 export default {
@@ -11,10 +12,12 @@ export default {
   translations,
   actionButtonUrl: environmentsHelpPagePath,
   learnMoreHelpPath: environmentsLearnMorePath,
+  EMPTY_SVG,
 };
 </script>
 <template>
   <gl-empty-state
+    :svg-path="$options.EMPTY_SVG"
     :title="$options.translations.emptyStateTitle"
     :primary-button-text="$options.translations.emptyStatePrimaryButton"
     :primary-button-link="$options.actionButtonUrl"

app/helpers/clusters_helper.rb

@@ -14,7 +14,7 @@ def js_clusters_list_data(clusterable)
         default: { path: image_path('illustrations/logos/kubernetes.svg'), text: _('Kubernetes Cluster') },
         gcp: { path: image_path('illustrations/logos/google_gke.svg'), text: s_('ClusterIntegration|Google GKE') }
       },
-      clusters_empty_state_image: image_path('illustrations/empty-state/empty-state-clusters.svg'),
+      clusters_empty_state_image: image_path('illustrations/empty-state/empty-cloud-md.svg'),
       empty_state_image: image_path('illustrations/empty-state/empty-environment-md.svg'),
       empty_state_help_text: clusterable.empty_state_help_text,
       add_cluster_path: clusterable.connect_path,

locale/gitlab.pot

@@ -21419,9 +21419,6 @@ msgstr ""
 msgid "Environments|Edit environment"
 msgstr ""
-msgid "Environments|Edit your search and try again"
-msgstr ""
-
 msgid "Environments|Enable Review Apps"
 msgstr ""
@@ -21473,9 +21470,6 @@ msgstr ""
 msgid "Environments|No deployments yet"
 msgstr ""
-msgid "Environments|No results found"
-msgstr ""
-
 msgid "Environments|No selection shows all authorized resources in the cluster. %{linkStart}Learn more.%{linkEnd}"
 msgstr ""

spec/frontend/environments/empty_state_spec.js

 import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import EmptyResult from '~/vue_shared/components/empty_result.vue';
 import EmptyState from '~/environments/components/empty_state.vue';
 import { ENVIRONMENTS_SCOPE } from '~/environments/constants';
 
@@ -58,9 +59,8 @@ describe('~/environments/components/empty_state.vue', () => {
       wrapper = createWrapper({ propsData: { hasTerm: true } });
     });
 
-    it('shows text about searching', () => {
-      expect(findEmptyState().props('title')).toBe('No results found');
-      expect(findEmptyState().text()).toBe('Edit your search and try again');
+    it('should show EmptyResult component', () => {
+      expect(wrapper.findComponent(EmptyResult).exists()).toBe(true);
     });
 
     it('hides the documentation link', () => {