diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index 2d94723e5fc5ddb14389b6e83ed7614c7462cc4d..92b29b691abf9b9f0af679f1e726ff71bd836746 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/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>
diff --git a/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue b/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue
index 884e212b0087d0046c5c5e47914eca819132e0e4..11bbed54691ba7fdb4c2a7b1428d1f00d40d63fb 100644
--- a/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue
+++ b/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_logs.vue
@@ -1,6 +1,6 @@
<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';
diff --git a/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_overview.vue b/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_overview.vue
index 2b1755c44fac0b81cb525620cd1004cf602cb226..3d1ebce020e1c074ce2c2d7a5bc2cb2c49402db1 100644
--- a/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_overview.vue
+++ b/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';
diff --git a/app/assets/javascripts/environments/environment_details/empty_state.vue b/app/assets/javascripts/environments/environment_details/empty_state.vue
index 08927360c438260fbe947a7b7cf6946e0f430904..ef848e2436b5558eb2c3a5297ce7e7248d333206 100644
--- a/app/assets/javascripts/environments/environment_details/empty_state.vue
+++ b/app/assets/javascripts/environments/environment_details/empty_state.vue
@@ -1,5 +1,6 @@
<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"
diff --git a/app/helpers/clusters_helper.rb b/app/helpers/clusters_helper.rb
index 9371814e3701b37aaaa312ecffc030ed1fba2562..41b9dbe66253ad4ce095204dbc7c6e96e4579bcd 100644
--- a/app/helpers/clusters_helper.rb
+++ b/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,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index da0a1e439bb50ccab4089537d9226af0c6a6eae7..74fc5374a811ac45a5028cf36bbe28bd5fccc7cf 100644
--- a/locale/gitlab.pot
+++ b/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 ""
diff --git a/spec/frontend/environments/empty_state_spec.js b/spec/frontend/environments/empty_state_spec.js
index a5de3750b7e083f7b7cb8a3031842b99cf024838..f9a083bd039d4fc9364b4e4ea58c41fa56b94d42 100644
--- a/spec/frontend/environments/empty_state_spec.js
+++ b/spec/frontend/environments/empty_state_spec.js
@@ -1,5 +1,6 @@
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', () => {