Update environment page to use status icons instead of pipeline status icons
Release notes
Problem to solve
The environments currently uses pipeline status icon with a badge to represent success status for the environments. According to our https://gitlab-org-gitlab-services-design-gitlab-com.design.gitlab.com/product-foundations/iconography#status-icons, the usage of pipeline icons should stay limited to pipeline related use-cases.
Intended users
User experience goal
Be consistent in our icon usage to avoid confusing users.
Proposal
Use status icons to denote the status of an Environment, Sync Status and Agent Connection:
Further details
gitlab-org/gitlab-services/design.gitlab.com#1744 (comment 1633233766)
Implementation guide
-
To update the Flux sync status icons:
-
Update the
SYNC_STATUS_BADGES
constant object here. -
Use the following values for the
icon
property:Before After status_success status-success status_running status-running status_pending status-paused status_failed status-failed status_notfound status-waiting
-
-
To update the agent status badges:
-
Add a
variant
property to theAGENT_STATUSES
constant object here. -
Use values of 'success', 'danger', 'neutral' respectively.
-
Update
kubernetes_agent_info
component to use theGlBadge
component.<gl-badge :icon="$options.AGENT_STATUSES[agentStatus].icon" :variant="$options.AGENT_STATUSES[agentStatus].variant" data-testid="agent-status" class="gl-mr-3" >{{ $options.AGENT_STATUSES[agentStatus].name }} </gl-badge>
-
Update the spacings using GitLab UI utility classes 'gl-display-flex', 'gl-align-items-center', 'gl-flex-wrap', and 'gl-mr-2'.
-
Update the related spec here.
it('displays correct status badge', () => { expect(findAgentStatusBadge().props()).toMatchObject({ icon: AGENT_STATUSES[status].icon, variant: AGENT_STATUSES[status].variant, }); });
-
-
To update the environment status badges:
-
Add an
icon
property to theHEALTH_BADGES
constant object here. -
Use values of 'status-success' and 'status-alert' respectively.
-
Update
kubernetes_status_bar
component to use the icon property<gl-badge v-else-if="healthBadge" :variant="healthBadge.variant" :icon="healthBadge.icon" data-testid="health-badge" > {{ healthBadge.text }} </gl-badge>
-
Update the related spec here.
it.each([ ['success', 'success', 'status-success', CLUSTER_STATUS_HEALTHY_TEXT], ['error', 'danger', 'status-alert', CLUSTER_STATUS_UNHEALTHY_TEXT], ])( 'when clusterHealthStatus is %s shows health badge with variant %s, icon %s, and text %s', (status, variant, icon, text) => { createWrapper({ clusterHealthStatus: status });expect(findLoadingIcon().exists()).toBe(false); expect(findHealthBadge().props()).toMatchObject({ variant, icon }); expect(findHealthBadge().text()).toBe(text); }, );
-
Permissions and Security
Documentation
Availability & Testing
Available Tier
Feature Usage Metrics
What does success look like, and how can we measure that?
What is the type of buyer?
Is this a cross-stage feature?
What is the competitive advantage or differentiation for this feature?
Links / references
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.