feat(editor): Implement 'Shared with you' section in the main navigation (#15140)

packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue

@@ -13,7 +13,7 @@ import { VIEWS } from '@/constants';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import ProjectCreateResource from '@/components/Projects/ProjectCreateResource.vue';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useOverview } from '@/composables/useOverview';
+import { useProjectPages } from '@/composables/useProjectPages';
 
 const route = useRoute();
 const router = useRouter();
@@ -21,7 +21,7 @@ const i18n = useI18n();
 const projectsStore = useProjectsStore();
 const sourceControlStore = useSourceControlStore();
 const settingsStore = useSettingsStore();
-const overview = useOverview();
+const projectPages = useProjectPages();
 
 const emit = defineEmits<{
 	createFolder: [];
@@ -39,7 +39,12 @@ const headerIcon = computed((): ProjectIconType => {
 
 const projectName = computed(() => {
 	if (!projectsStore.currentProject) {
-		return i18n.baseText('projects.menu.overview');
+		if (projectPages.isOverviewSubPage) {
+			return i18n.baseText('projects.menu.overview');
+		} else if (projectPages.isSharedSubPage) {
+			return i18n.baseText('projects.header.shared.title');
+		}
+		return null;
 	} else if (projectsStore.currentProject.type === ProjectTypes.Personal) {
 		return i18n.baseText('projects.menu.personal');
 	} else {
@@ -60,6 +65,10 @@ const showSettings = computed(
 
 const homeProject = computed(() => projectsStore.currentProject ?? projectsStore.personalProject);
 
+const isPersonalProject = computed(() => {
+	return homeProject.value?.type === ProjectTypes.Personal;
+});
+
 const showFolders = computed(() => {
 	return (
 		settingsStore.isFoldersFeatureEnabled &&
@@ -83,6 +92,7 @@ const createWorkflowButton = computed(() => ({
 		sourceControlStore.preferences.branchReadOnly ||
 		!getResourcePermissions(homeProject.value?.scopes).workflow.create,
 }));
+
 const menu = computed(() => {
 	const items: UserAction[] = [
 		{
@@ -105,6 +115,12 @@ const menu = computed(() => {
 	return items;
 });
 
+const showProjectIcon = computed(() => {
+	return (
+		!projectPages.isOverviewSubPage && !projectPages.isSharedSubPage && !isPersonalProject.value
+	);
+});
+
 const actions: Record<ActionTypes, (projectId: string) => void> = {
 	[ACTION_TYPES.WORKFLOW]: (projectId: string) => {
 		void router.push({
@@ -129,6 +145,27 @@ const actions: Record<ActionTypes, (projectId: string) => void> = {
 	},
 } as const;
 
+const pageType = computed(() => {
+	if (projectPages.isOverviewSubPage) {
+		return 'overview';
+	} else if (projectPages.isSharedSubPage) {
+		return 'shared';
+	} else {
+		return 'project';
+	}
+});
+
+const subtitle = computed(() => {
+	if (projectPages.isOverviewSubPage) {
+		return i18n.baseText('projects.header.overview.subtitle');
+	} else if (projectPages.isSharedSubPage) {
+		return i18n.baseText('projects.header.shared.subtitle');
+	} else if (isPersonalProject.value) {
+		return i18n.baseText('projects.header.personal.subtitle');
+	}
+	return null;
+});
+
 const onSelect = (action: string) => {
 	const executableAction = actions[action as ActionTypes];
 	if (!homeProject.value) {
@@ -142,19 +179,16 @@ const onSelect = (action: string) => {
 	<div>
 		<div :class="$style.projectHeader">
 			<div :class="$style.projectDetails">
-				<ProjectIcon
-					v-if="!overview.isOverviewSubPage"
-					:icon="headerIcon"
-					:border-less="true"
-					size="medium"
-				/>
+				<ProjectIcon v-if="showProjectIcon" :icon="headerIcon" :border-less="true" size="medium" />
 				<div :class="$style.headerActions">
-					<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
+					<N8nHeading v-if="projectName" bold tag="h2" size="xlarge" data-test-id="project-name">{{
+						projectName
+					}}</N8nHeading>
 					<N8nText color="text-light">
 						<slot name="subtitle">
-							<span v-if="!projectsStore.currentProject">{{
-								i18n.baseText('projects.header.subtitle')
-							}}</span>
+							<N8nText v-if="subtitle" color="text-light" data-test-id="project-subtitle">{{
+								subtitle
+							}}</N8nText>
 						</slot>
 					</N8nText>
 				</div>
@@ -181,7 +215,11 @@ const onSelect = (action: string) => {
 		</div>
 		<slot></slot>
 		<div :class="$style.actions">
-			<ProjectTabs :show-settings="showSettings" />
+			<ProjectTabs
+				:page-type="pageType"
+				:show-executions="!projectPages.isSharedSubPage"
+				:show-settings="showSettings"
+			/>
 		</div>
 	</div>
 </template>