From cef357c32e2cdd6dcea082622e4ae0a052a1c8c2 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Thu, 16 Jan 2025 12:44:20 +0100 Subject: [PATCH] Integration: Item changes Changes the Avatar to use a bigger size to make integration options more discoverable, also updates headings to use a semantic h3 with h4-alike styling for better visual hierarchy and replaces the configure button with a chevron. Changelog: changed --- .../index/components/integrations_table.vue | 78 +++++++++++++------ app/assets/stylesheets/framework/images.scss | 12 +-- .../settings/integrations/_form.html.haml | 4 +- app/views/shared/integrations/edit.html.haml | 2 +- locale/gitlab.pot | 3 + .../components/integrations_table_spec.js | 25 ++++-- 6 files changed, 85 insertions(+), 39 deletions(-) diff --git a/app/assets/javascripts/integrations/index/components/integrations_table.vue b/app/assets/javascripts/integrations/index/components/integrations_table.vue index dd54c380da9384..cb9bad18c96eb2 100644 --- a/app/assets/javascripts/integrations/index/components/integrations_table.vue +++ b/app/assets/javascripts/integrations/index/components/integrations_table.vue @@ -1,19 +1,13 @@ @@ -114,7 +111,10 @@ export default { :empty-text="emptyText" show-empty fixed + hover class="gl-mb-0" + tbody-tr-class="gl-cursor-pointer hover:!gl-bg-strong" + @row-clicked="navigateToItemSettings" > diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index dda80caf37b3f5..07db5563b76de3 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -56,12 +56,12 @@ svg { } .integration-logo { - &[entity-name='Diffblue Cover'] img, - &[entity-name='Drone'] img, - &[entity-name='GitHub'] img, - &[entity-name='Mattermost notifications'] img, - &[entity-name='Mattermost slash commands'] img, - &[entity-name='Phorge'] img { + &[alt='Diffblue Cover'], + &[alt='Drone'], + &[alt='GitHub'], + &[alt='Mattermost notifications'], + &[alt='Mattermost slash commands'], + &[alt='Phorge'] { .gl-dark & { filter: invert(1) brightness(2); } diff --git a/app/views/projects/settings/integrations/_form.html.haml b/app/views/projects/settings/integrations/_form.html.haml index 0d7ce917a2fa70..c42a3ad44600de 100644 --- a/app/views/projects/settings/integrations/_form.html.haml +++ b/app/views/projects/settings/integrations/_form.html.haml @@ -16,8 +16,8 @@ = render ::Layouts::PageHeadingComponent.new(@integration.title) do |c| - c.with_heading do - .gl-flex.gl-items-center.gl-gap-4.integration-logo{ 'entity-name': integration.title } - = render Pajamas::AvatarComponent.new(integration, size: 48, alt: '') + .gl-flex.gl-items-center.gl-gap-4 + = render Pajamas::AvatarComponent.new(integration, size: 48, alt: integration.title, class: 'integration-logo') = integration.title - if integration.operating? = render Pajamas::BadgeComponent.new(_('Active'), variant: 'success', icon: 'status-success', class: 'gl-pl-2') diff --git a/app/views/shared/integrations/edit.html.haml b/app/views/shared/integrations/edit.html.haml index 98ea676c7e2ced..5fd2a2287f678f 100644 --- a/app/views/shared/integrations/edit.html.haml +++ b/app/views/shared/integrations/edit.html.haml @@ -5,7 +5,7 @@ = render ::Layouts::PageHeadingComponent.new(@integration.title) do |c| - c.with_heading do .gl-flex.gl-items-center.gl-gap-4 - = render Pajamas::AvatarComponent.new(@integration, size: 48, alt: '') + = render Pajamas::AvatarComponent.new(@integration, size: 48, alt: @integration.title, class: 'integration-logo') = @integration.title = render 'shared/integrations/tabs', integration: @integration, active_tab: 'edit' do diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 16bbcf42340e29..2bdf5586fc2b86 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -30312,6 +30312,9 @@ msgstr "" msgid "Integrations|Add exclusions" msgstr "" +msgid "Integrations|Add integration" +msgstr "" + msgid "Integrations|All details" msgstr "" diff --git a/spec/frontend/integrations/index/components/integrations_table_spec.js b/spec/frontend/integrations/index/components/integrations_table_spec.js index 2f0c44d27ed2d9..707890b5146f19 100644 --- a/spec/frontend/integrations/index/components/integrations_table_spec.js +++ b/spec/frontend/integrations/index/components/integrations_table_spec.js @@ -1,4 +1,4 @@ -import { GlTable, GlIcon, GlLink } from '@gitlab/ui'; +import { GlTable, GlLink, GlButton } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import IntegrationsTable from '~/integrations/index/components/integrations_table.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; @@ -37,16 +37,18 @@ describe('IntegrationsTable', () => { }); describe.each` - scenario | integrations | shouldRenderActiveIcon + scenario | integrations | expectActiveIcon ${'when integration is active'} | ${[mockActiveIntegrations[0]]} | ${true} ${'when integration is inactive'} | ${[mockInactiveIntegrations[0]]} | ${false} - `('$scenario', ({ shouldRenderActiveIcon, integrations }) => { + `('$scenario', ({ expectActiveIcon, integrations }) => { beforeEach(() => { createComponent({ integrations }); }); - it(`${shouldRenderActiveIcon ? 'renders' : 'does not render'} icon in first column`, () => { - expect(findTable().findComponent(GlIcon).exists()).toBe(shouldRenderActiveIcon); + it(`${expectActiveIcon ? 'renders' : 'does not render'} icon in first column`, () => { + expect(findTable().find('[data-testid="integration-active-icon"]').exists()).toBe( + expectActiveIcon, + ); }); }); @@ -74,6 +76,8 @@ describe('IntegrationsTable', () => { }); describe.each([true, false])('when integrations inactive property is %p', (inactive) => { + const findEditButton = () => findTable().findComponent(GlButton); + beforeEach(() => { createComponent({ integrations: mockInactiveIntegrations, inactive }); }); @@ -81,5 +85,16 @@ describe('IntegrationsTable', () => { it(`${inactive ? 'does not render' : 'render'} updated_at field`, () => { expect(findTable().find('[aria-label="Updated At"]').exists()).toBe(!inactive); }); + + if (inactive) { + it('renders Edit button as "Add integration"', () => { + expect(findEditButton().props('icon')).toBe('plus'); + expect(findEditButton().text()).toBe('Add'); + }); + } else { + it('renders Edit button as "Configure"', () => { + expect(findEditButton().props('icon')).toBe('settings'); + }); + } }); }); -- GitLab