From 4dde772814c55e66efcc9b369ae443328af21b14 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Tue, 22 Oct 2024 10:19:01 +0200 Subject: [PATCH] fix(editor): Follow-up fixes to projects side menu (#11327) --- .../Projects/ProjectNavigation.test.ts | 23 +++++++++++++++---- .../components/Projects/ProjectNavigation.vue | 18 +++++++++------ .../components/Projects/ProjectTabs.test.ts | 15 +++++++++++- .../src/components/Projects/ProjectTabs.vue | 7 +++++- 4 files changed, 50 insertions(+), 13 deletions(-) diff --git a/packages/editor-ui/src/components/Projects/ProjectNavigation.test.ts b/packages/editor-ui/src/components/Projects/ProjectNavigation.test.ts index 29a30f8a0c..d6a760b1d9 100644 --- a/packages/editor-ui/src/components/Projects/ProjectNavigation.test.ts +++ b/packages/editor-ui/src/components/Projects/ProjectNavigation.test.ts @@ -147,7 +147,8 @@ describe('ProjectsNavigation', () => { expect(uiStore.goToUpgrade).toHaveBeenCalledWith('rbac', 'upgrade-rbac'); }); - it('should show "Projects" title and projects if the user has access to any team project', async () => { + it('should show "Projects" title and Personal project when the feature is enabled', async () => { + projectsStore.isTeamProjectFeatureEnabled = true; projectsStore.myProjects = [...personalProjects, ...teamProjects]; const { getByRole, getAllByTestId, getByTestId } = renderComponent({ @@ -158,11 +159,12 @@ describe('ProjectsNavigation', () => { expect(getByRole('heading', { level: 3, name: 'Projects' })).toBeVisible(); expect(getByTestId('project-personal-menu-item')).toBeVisible(); + expect(getByTestId('project-personal-menu-item').querySelector('svg')).toBeVisible(); expect(getAllByTestId('project-menu-item')).toHaveLength(teamProjects.length); }); it('should not show "Projects" title when the menu is collapsed', async () => { - projectsStore.myProjects = [...personalProjects, ...teamProjects]; + projectsStore.isTeamProjectFeatureEnabled = true; const { queryByRole } = renderComponent({ props: { @@ -173,8 +175,8 @@ describe('ProjectsNavigation', () => { expect(queryByRole('heading', { level: 3, name: 'Projects' })).not.toBeInTheDocument(); }); - it('should not show "Projects" title when there are no available projects', async () => { - projectsStore.myProjects = []; + it('should not show "Projects" title when the feature is not enabled', async () => { + projectsStore.isTeamProjectFeatureEnabled = false; const { queryByRole } = renderComponent({ props: { @@ -184,4 +186,17 @@ describe('ProjectsNavigation', () => { expect(queryByRole('heading', { level: 3, name: 'Projects' })).not.toBeInTheDocument(); }); + + it('should not show project icons when the menu is collapsed', async () => { + projectsStore.isTeamProjectFeatureEnabled = true; + + const { getByTestId } = renderComponent({ + props: { + collapsed: true, + }, + }); + + expect(getByTestId('project-personal-menu-item')).toBeVisible(); + expect(getByTestId('project-personal-menu-item').querySelector('svg')).not.toBeInTheDocument(); + }); }); diff --git a/packages/editor-ui/src/components/Projects/ProjectNavigation.vue b/packages/editor-ui/src/components/Projects/ProjectNavigation.vue index a4cde7ea8c..aa4fa6ab7c 100644 --- a/packages/editor-ui/src/components/Projects/ProjectNavigation.vue +++ b/packages/editor-ui/src/components/Projects/ProjectNavigation.vue @@ -45,7 +45,7 @@ const addProject = computed(() => ({ const getProjectMenuItem = (project: ProjectListItem) => ({ id: project.id, label: project.name, - icon: 'layer-group', + icon: props.collapsed ? undefined : 'layer-group', route: { to: { name: VIEWS.PROJECTS_WORKFLOWS, @@ -57,7 +57,7 @@ const getProjectMenuItem = (project: ProjectListItem) => ({ const personalProject = computed(() => ({ id: projectsStore.personalProject?.id ?? '', label: locale.baseText('projects.menu.personal'), - icon: 'user', + icon: props.collapsed ? undefined : 'user', route: { to: { name: VIEWS.PROJECTS_WORKFLOWS, @@ -119,16 +119,20 @@ onMounted(async () => { data-test-id="project-home-menu-item" /> -
+
{{ locale.baseText('projects.menu.title') }} - + { placement="right" :disabled="projectsStore.canCreateProjects" > - + { -
+
diff --git a/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts b/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts index e31e7caeef..45e4a74e1d 100644 --- a/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts +++ b/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts @@ -4,6 +4,7 @@ import { createComponentRenderer } from '@/__tests__/render'; import { createTestProject } from '@/__tests__/data/projects'; import ProjectTabs from '@/components/Projects/ProjectTabs.vue'; import { useProjectsStore } from '@/stores/projects.store'; +import { ProjectTypes } from '@/types/projects.types'; vi.mock('vue-router', () => { const params = {}; @@ -47,7 +48,7 @@ describe('ProjectTabs', () => { expect(queryByText('Project settings')).not.toBeInTheDocument(); }); - it('should render project tab Settings if user has permissions', () => { + it('should render project tab Settings if user has permissions and current project is of type Team', () => { route.params.projectId = '123'; projectsStore.setCurrentProject(createTestProject({ scopes: ['project:update'] })); const { getByText } = renderComponent(); @@ -66,4 +67,16 @@ describe('ProjectTabs', () => { expect(getByText('Credentials')).toBeInTheDocument(); expect(queryByText('Project settings')).not.toBeInTheDocument(); }); + + it('should render project tabs without Settings if project is the Personal project', () => { + route.params.projectId = '123'; + projectsStore.setCurrentProject( + createTestProject({ type: ProjectTypes.Personal, scopes: ['project:update'] }), + ); + const { queryByText, getByText } = renderComponent(); + + expect(getByText('Workflows')).toBeInTheDocument(); + expect(getByText('Credentials')).toBeInTheDocument(); + expect(queryByText('Project settings')).not.toBeInTheDocument(); + }); }); diff --git a/packages/editor-ui/src/components/Projects/ProjectTabs.vue b/packages/editor-ui/src/components/Projects/ProjectTabs.vue index ddacebdddd..3426f9de5f 100644 --- a/packages/editor-ui/src/components/Projects/ProjectTabs.vue +++ b/packages/editor-ui/src/components/Projects/ProjectTabs.vue @@ -6,6 +6,7 @@ import { VIEWS } from '@/constants'; import { useI18n } from '@/composables/useI18n'; import { useProjectsStore } from '@/stores/projects.store'; import { getResourcePermissions } from '@/permissions'; +import { ProjectTypes } from '@/types/projects.types'; const locale = useI18n(); const route = useRoute(); @@ -50,7 +51,11 @@ const options = computed(() => { }, ]; - if (projectId && projectPermissions.value.update) { + if ( + projectId && + projectPermissions.value.update && + projectsStore.currentProject?.type === ProjectTypes.Team + ) { tabs.push({ label: locale.baseText('projects.settings'), value: VIEWS.PROJECT_SETTINGS,