refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

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

@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from '@/composables/useI18n';
+import type { ResourceType } from '@/utils/projects.utils';
+import { splitName } from '@/utils/projects.utils';
+import type { Project, ProjectIcon as BadgeIcon } from '@/types/projects.types';
+import { ProjectTypes } from '@/types/projects.types';
+import type { CredentialsResource, WorkflowResource } from '../layouts/ResourcesListLayout.vue';
+
+type Props = {
+	resource: WorkflowResource | CredentialsResource;
+	resourceType: ResourceType;
+	resourceTypeLabel: string;
+	personalProject: Project | null;
+};
+
+const enum ProjectState {
+	SharedPersonal = 'shared-personal',
+	SharedOwned = 'shared-owned',
+	Owned = 'owned',
+	Personal = 'personal',
+	Team = 'team',
+	SharedTeam = 'shared-team',
+	Unknown = 'unknown',
+}
+
+const props = defineProps<Props>();
+
+const i18n = useI18n();
+
+const projectState = computed(() => {
+	if (
+		(props.resource.homeProject &&
+			props.personalProject &&
+			props.resource.homeProject.id === props.personalProject.id) ||
+		!props.resource.homeProject
+	) {
+		if (props.resource.sharedWithProjects?.length) {
+			return ProjectState.SharedOwned;
+		}
+		return ProjectState.Owned;
+	} else if (props.resource.homeProject?.type !== ProjectTypes.Team) {
+		if (props.resource.sharedWithProjects?.length) {
+			return ProjectState.SharedPersonal;
+		}
+		return ProjectState.Personal;
+	} else if (props.resource.homeProject?.type === ProjectTypes.Team) {
+		if (props.resource.sharedWithProjects?.length) {
+			return ProjectState.SharedTeam;
+		}
+		return ProjectState.Team;
+	}
+	return ProjectState.Unknown;
+});
+
+const numberOfMembersInHomeTeamProject = computed(
+	() => props.resource.sharedWithProjects?.length ?? 0,
+);
+
+const badgeText = computed(() => {
+	if (
+		projectState.value === ProjectState.Owned ||
+		projectState.value === ProjectState.SharedOwned
+	) {
+		return i18n.baseText('projects.menu.personal');
+	} else {
+		const { name, email } = splitName(props.resource.homeProject?.name ?? '');
+		return name ?? email ?? '';
+	}
+});
+const badgeIcon = computed<BadgeIcon>(() => {
+	switch (projectState.value) {
+		case ProjectState.Owned:
+		case ProjectState.SharedOwned:
+			return { type: 'icon', value: 'user' };
+		case ProjectState.Team:
+		case ProjectState.SharedTeam:
+			return props.resource.homeProject?.icon ?? { type: 'icon', value: 'layer-group' };
+		default:
+			return { type: 'icon', value: 'layer-group' };
+	}
+});
+const badgeTooltip = computed(() => {
+	switch (projectState.value) {
+		case ProjectState.SharedOwned:
+			return i18n.baseText('projects.badge.tooltip.sharedOwned', {
+				interpolate: {
+					resourceTypeLabel: props.resourceTypeLabel,
+					count: numberOfMembersInHomeTeamProject.value,
+				},
+			});
+		case ProjectState.SharedPersonal:
+			return i18n.baseText('projects.badge.tooltip.sharedPersonal', {
+				interpolate: {
+					resourceTypeLabel: props.resourceTypeLabel,
+					name: badgeText.value,
+					count: numberOfMembersInHomeTeamProject.value,
+				},
+			});
+		case ProjectState.Personal:
+			return i18n.baseText('projects.badge.tooltip.personal', {
+				interpolate: {
+					resourceTypeLabel: props.resourceTypeLabel,
+					name: badgeText.value,
+				},
+			});
+		case ProjectState.Team:
+			return i18n.baseText('projects.badge.tooltip.team', {
+				interpolate: {
+					resourceTypeLabel: props.resourceTypeLabel,
+					name: badgeText.value,
+				},
+			});
+		case ProjectState.SharedTeam:
+			return i18n.baseText('projects.badge.tooltip.sharedTeam', {
+				interpolate: {
+					resourceTypeLabel: props.resourceTypeLabel,
+					name: badgeText.value,
+					count: numberOfMembersInHomeTeamProject.value,
+				},
+			});
+		default:
+			return '';
+	}
+});
+</script>
+<template>
+	<N8nTooltip :disabled="!badgeTooltip" placement="top">
+		<div :class="$style.wrapper" v-bind="$attrs">
+			<N8nBadge
+				v-if="badgeText"
+				:class="[$style.badge, $style.projectBadge]"
+				theme="tertiary"
+				bold
+				data-test-id="card-badge"
+			>
+				<ProjectIcon :icon="badgeIcon" :border-less="true" size="mini" />
+				<span v-n8n-truncate:20>{{ badgeText }}</span>
+			</N8nBadge>
+			<N8nBadge
+				v-if="numberOfMembersInHomeTeamProject"
+				:class="[$style.badge, $style.countBadge]"
+				theme="tertiary"
+				bold
+			>
+				+ {{ numberOfMembersInHomeTeamProject }}
+			</N8nBadge>
+		</div>
+		<template #content>
+			{{ badgeTooltip }}
+		</template>
+	</N8nTooltip>
+</template>
+
+<style lang="scss" module>
+.wrapper {
+	margin-right: var(--spacing-xs);
+}
+
+.badge {
+	padding: var(--spacing-4xs) var(--spacing-2xs);
+	background-color: var(--color-background-xlight);
+	border-color: var(--color-foreground-base);
+
+	z-index: 1;
+	position: relative;
+	height: 23px;
+	:global(.n8n-text) {
+		color: var(--color-text-base);
+	}
+}
+
+.projectBadge {
+	& > span {
+		display: flex;
+		gap: var(--spacing-3xs);
+	}
+}
+
+.countBadge {
+	margin-left: -5px;
+	z-index: 0;
+	position: relative;
+	height: 23px;
+	:global(.n8n-text) {
+		color: var(--color-text-light);
+	}
+}
+</style>