diff options
| -rw-r--r-- | app/views/admin/system_info/show.html.haml | 81 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | spec/frontend/repository/components/breadcrumbs_spec.js | 107 | ||||
| -rw-r--r-- | yarn.lock | 8 |
4 files changed, 115 insertions, 83 deletions
diff --git a/app/views/admin/system_info/show.html.haml b/app/views/admin/system_info/show.html.haml index 049f3d61294..097329a027c 100644 --- a/app/views/admin/system_info/show.html.haml +++ b/app/views/admin/system_info/show.html.haml @@ -3,45 +3,46 @@ .gl-mt-3 .row .col-sm - .bg-light.info-well.p-3 - %h4.page-title.d-flex - .gl-display-flex.gl-align-items-center.gl-justify-content-center - = sprite_icon('pod', size: 18, css_class: 'pod-icon gl-mr-3') - = _('CPU') - .data - - if @cpus - %h2= _('%{cores} cores') % { cores: @cpus.length } - - else - = sprite_icon('warning-solid', css_class: 'text-warning') - = _('Unable to collect CPU info') - .bg-light.info-well.p-3.gl-mt-3 - %h4.page-title.d-flex - .gl-display-flex.gl-align-items-center.gl-justify-content-center - = sprite_icon('status-health', size: 18, css_class: 'pod-icon gl-mr-3') - = _('Memory Usage') - .data - - if @memory - %h2 #{number_to_human_size(@memory.active_bytes)} / #{number_to_human_size(@memory.total_bytes)} - - else - = sprite_icon('warning-solid', css_class: 'text-warning') - = _('Unable to collect memory info') - .bg-light.info-well.p-3.gl-mt-3 - %h4.page-title.d-flex - .gl-display-flex.gl-align-items-center.gl-justify-content-center - = sprite_icon('clock', size: 18, css_class: 'pod-icon gl-mr-3') - = _('System started') - .data - %h2= time_ago_with_tooltip(Rails.application.config.booted_at) + = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-3' }) do |c| + = c.body do + %h4 + = sprite_icon('pod', size: 18, css_class: 'gl-text-gray-700') + = s_('CPU') + .data + - if @cpus + %h2= _('%{cores} cores') % { cores: @cpus.length } + - else + = sprite_icon('warning-solid', css_class: 'text-warning') + = _('Unable to collect CPU info') + + = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-3' }) do |c| + = c.body do + %h4 + = sprite_icon('status-health', size: 18, css_class: 'gl-text-gray-700') + = s_('Memory Usage') + .data + - if @memory + %h2 #{number_to_human_size(@memory.active_bytes)} / #{number_to_human_size(@memory.total_bytes)} + - else + = sprite_icon('warning-solid', css_class: 'text-warning') + = _('Unable to collect memory info') + + = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-3' }) do |c| + = c.body do + %h4 + = sprite_icon('clock', size: 18, css_class: 'gl-text-gray-700') + = s_('System started') + .data + %h2= time_ago_with_tooltip(Rails.application.config.booted_at) .col-sm - .bg-light.info-well.p-3 - %h4.page-title.d-flex - .gl-display-flex.gl-align-items-center.gl-justify-content-center - = sprite_icon('disk', size: 18, css_class: 'pod-icon gl-mr-3') - = _('Disk Usage') - .data - %ul + = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-3' }) do |c| + = c.body do + %h4 + = sprite_icon('disk', size: 18, css_class: 'gl-text-gray-700') + = s_('Disk Usage') + .data - @disks.each do |disk| - %li - %h2 #{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])} - %p= disk[:disk_name] - %p= disk[:mount_path] + %h2 #{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])} + %ul + %li= disk[:disk_name] + %li= disk[:mount_path] diff --git a/package.json b/package.json index 0bcc0eaa74e..27bfe88b2b4 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "@gitlab/at.js": "1.5.7", "@gitlab/favicon-overlay": "2.0.0", "@gitlab/fonts": "^1.2.0", - "@gitlab/svgs": "3.30.0", + "@gitlab/svgs": "3.31.0", "@gitlab/ui": "58.4.0", "@gitlab/visual-review-tools": "1.7.3", "@gitlab/web-ide": "0.0.1-dev-20230323132525", diff --git a/spec/frontend/repository/components/breadcrumbs_spec.js b/spec/frontend/repository/components/breadcrumbs_spec.js index 8b7a7d91125..f4baa817d32 100644 --- a/spec/frontend/repository/components/breadcrumbs_spec.js +++ b/spec/frontend/repository/components/breadcrumbs_spec.js @@ -1,27 +1,60 @@ +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; import { GlDropdown } from '@gitlab/ui'; import { shallowMount, RouterLinkStub } from '@vue/test-utils'; -import { nextTick } from 'vue'; import Breadcrumbs from '~/repository/components/breadcrumbs.vue'; import UploadBlobModal from '~/repository/components/upload_blob_modal.vue'; import NewDirectoryModal from '~/repository/components/new_directory_modal.vue'; +import waitForPromises from 'helpers/wait_for_promises'; + +import permissionsQuery from 'shared_queries/repository/permissions.query.graphql'; +import projectPathQuery from '~/repository/queries/project_path.query.graphql'; + +import createApolloProvider from 'helpers/mock_apollo_helper'; const defaultMockRoute = { name: 'blobPath', }; +const TEST_PROJECT_PATH = 'test-project/path'; + +Vue.use(VueApollo); + describe('Repository breadcrumbs component', () => { let wrapper; - - const factory = (currentPath, extraProps = {}, mockRoute = {}) => { - const $apollo = { - queries: { + let permissionsQuerySpy; + + const createPermissionsQueryResponse = ({ + pushCode = false, + forkProject = false, + createMergeRequestIn = false, + } = {}) => ({ + data: { + project: { + id: 1, + __typename: '__typename', userPermissions: { - loading: true, + __typename: '__typename', + pushCode, + forkProject, + createMergeRequestIn, }, }, - }; + }, + }); + + const factory = (currentPath, extraProps = {}, mockRoute = {}) => { + const apolloProvider = createApolloProvider([[permissionsQuery, permissionsQuerySpy]]); + + apolloProvider.clients.defaultClient.cache.writeQuery({ + query: projectPathQuery, + data: { + projectPath: TEST_PROJECT_PATH, + }, + }); wrapper = shallowMount(Breadcrumbs, { + apolloProvider, propsData: { currentPath, ...extraProps, @@ -34,13 +67,29 @@ describe('Repository breadcrumbs component', () => { defaultMockRoute, ...mockRoute, }, - $apollo, }, }); }; + const findDropdown = () => wrapper.findComponent(GlDropdown); const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal); const findNewDirectoryModal = () => wrapper.findComponent(NewDirectoryModal); + const findRouterLink = () => wrapper.findAllComponents(RouterLinkStub); + + beforeEach(() => { + permissionsQuerySpy = jest.fn().mockResolvedValue(createPermissionsQueryResponse()); + }); + + it('queries for permissions', async () => { + factory('/'); + + // We need to wait for the projectPath query to resolve + await waitForPromises(); + + expect(permissionsQuerySpy).toHaveBeenCalledWith({ + projectPath: TEST_PROJECT_PATH, + }); + }); it.each` path | linkCount @@ -51,7 +100,7 @@ describe('Repository breadcrumbs component', () => { `('renders $linkCount links for path $path', ({ path, linkCount }) => { factory(path); - expect(wrapper.findAllComponents(RouterLinkStub).length).toEqual(linkCount); + expect(findRouterLink().length).toEqual(linkCount); }); it.each` @@ -64,36 +113,27 @@ describe('Repository breadcrumbs component', () => { 'links to the correct router path when routeName is $routeName', ({ routeName, path, linkTo }) => { factory(path, {}, { name: routeName }); - expect(wrapper.findAllComponents(RouterLinkStub).at(3).props('to')).toEqual(linkTo); + expect(findRouterLink().at(3).props('to')).toEqual(linkTo); }, ); it('escapes hash in directory path', () => { factory('app/assets/javascripts#'); - expect(wrapper.findAllComponents(RouterLinkStub).at(3).props('to')).toEqual( - '/-/tree/app/assets/javascripts%23', - ); + expect(findRouterLink().at(3).props('to')).toEqual('/-/tree/app/assets/javascripts%23'); }); it('renders last link as active', () => { factory('app/assets'); - expect(wrapper.findAllComponents(RouterLinkStub).at(2).attributes('aria-current')).toEqual( - 'page', - ); + expect(findRouterLink().at(2).attributes('aria-current')).toEqual('page'); }); it('does not render add to tree dropdown when permissions are false', async () => { - factory('/', { canCollaborate: false }); - - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } }); - + factory('/', { canCollaborate: false }, {}); await nextTick(); - expect(wrapper.findComponent(GlDropdown).exists()).toBe(false); + expect(findDropdown().exists()).toBe(false); }); it.each` @@ -107,20 +147,19 @@ describe('Repository breadcrumbs component', () => { 'does render add to tree dropdown $isRendered when route is $routeName', ({ routeName, isRendered }) => { factory('app/assets/javascripts.js', { canCollaborate: true }, { name: routeName }); - expect(wrapper.findComponent(GlDropdown).exists()).toBe(isRendered); + expect(findDropdown().exists()).toBe(isRendered); }, ); it('renders add to tree dropdown when permissions are true', async () => { - factory('/', { canCollaborate: true }); - - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } }); + permissionsQuerySpy.mockResolvedValue( + createPermissionsQueryResponse({ forkProject: true, createMergeRequestIn: true }), + ); + factory('/', { canCollaborate: true }); await nextTick(); - expect(wrapper.findComponent(GlDropdown).exists()).toBe(true); + expect(findDropdown().exists()).toBe(true); }); describe('renders the upload blob modal', () => { @@ -133,10 +172,6 @@ describe('Repository breadcrumbs component', () => { }); it('renders the modal once loaded', async () => { - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ $apollo: { queries: { userPermissions: { loading: false } } } }); - await nextTick(); expect(findUploadBlobModal().exists()).toBe(true); @@ -152,10 +187,6 @@ describe('Repository breadcrumbs component', () => { }); it('renders the modal once loaded', async () => { - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ $apollo: { queries: { userPermissions: { loading: false } } } }); - await nextTick(); expect(findNewDirectoryModal().exists()).toBe(true); diff --git a/yarn.lock b/yarn.lock index 7209f911abd..7515813b8c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1122,10 +1122,10 @@ stylelint-declaration-strict-value "1.8.0" stylelint-scss "4.2.0" -"@gitlab/svgs@3.30.0": - version "3.30.0" - resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.30.0.tgz#d49d7871ecebf65a71b3cc70afe1f1bd063fdb5d" - integrity sha512-XNXUhqpA03XlXWPTddFc+o6PfLDsc/DS7RMSwBW1WyeOwznjMVVVH1810TLbqcuk+ILcONtlUP3js3/gs/oHbQ== +"@gitlab/svgs@3.31.0": + version "3.31.0" + resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.31.0.tgz#37e0a189def22400758267a84b61840a74aaf937" + integrity sha512-VzbMlj7TSroWvHDBMvCF4EDOnozFah5wPSyI+YJ+eefQoX0Fzu6RIZ9h8+lhnRzffygcValdVNdnuzMbXB+Q/g== "@gitlab/ui@58.4.0": version "58.4.0" |