#1127 Add Message Ids filter to Layout component

opral · Feb 28, 2024 · cda1f2a · cda1f2a
1 parent 313e738
commit cda1f2a
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 23 deletions.
diff --git a/inlang/source-code/editor/src/pages/@host/@owner/@repository/Layout.tsx b/inlang/source-code/editor/src/pages/@host/@owner/@repository/Layout.tsx
@@ -18,6 +18,7 @@ import IconSync from "~icons/material-symbols/sync-outline"
 import IconTranslate from "~icons/material-symbols/translate"
 import IconSettings from "~icons/material-symbols/settings-outline"
 import IconDescription from "~icons/material-symbols/description-outline"
+import IconTag from "~icons/material-symbols/tag"
 import { WarningIcon } from "./components/Notification/NotificationHint.jsx"
 import { showToast } from "#src/interface/components/Toast.jsx"
 import { isValidLanguageTag, type LanguageTag } from "@inlang/sdk"
@@ -46,6 +47,8 @@ export function Layout(props: { children: JSXElement }) {
 		setFilteredMessageLintRules,
 		filteredLanguageTags,
 		setFilteredLanguageTags,
+		filteredIds,
+		setFilteredIds,
 		languageTags,
 		currentBranch,
 		activeProject,
@@ -86,6 +89,11 @@ export function Layout(props: { children: JSXElement }) {
 				/>
 			),
 		},
+		{
+			name: "Message Ids",
+			icon: <IconTag class="w-5 h-5" />,
+			component: <IdsFilter clearFunction={removeFilter("Message Ids")} />,
+		},
 	])
 
 	const [selectedFilters, setSelectedFilters] = createSignal<Filter[]>([])
@@ -121,14 +129,25 @@ export function Layout(props: { children: JSXElement }) {
 	//add initial language filter
 	createEffect(
 		on(project, () => {
-			if (lixErrors().length === 0 && project()) {
+			if (project()) {
 				addFilter("Language")
 				if (filteredLanguageTags().length === 0 && project()!.settings())
 					setFilteredLanguageTags(project()!.settings()!.languageTags)
 			}
 		})
 	)
 
+	//add initial language filter
+	createEffect(
+		on(project, () => {
+			if (project() && filteredIds().length > 0) {
+				addFilter("Message Ids")
+				if (filteredLanguageTags().length === 0 && project()!.settings())
+					setFilteredIds(project()!.query.messages.includedMessageIds())
+			}
+		})
+	)
+
 	//add initial lintRule filter
 	createEffect(
 		on(project, () => {
@@ -720,7 +739,7 @@ function LintFilter(props: { clearFunction: any }) {
 				</p>
 				<Show when={filteredMessageLintRules().length === 0} fallback={<div />}>
 					<sl-tag prop:size="small" class="font-medium text-sm">
-						everyMessage
+						not selected
 					</sl-tag>
 					<button
 						class="hover:text-on-surface hover:bg-surface-variant rounded-sm"
@@ -779,3 +798,98 @@ function LintFilter(props: { clearFunction: any }) {
 		</sl-select>
 	)
 }
+
+function IdsFilter(props: { clearFunction: any }) {
+	const { project, filteredIds, setFilteredIds } = useEditorState()
+	return (
+		<sl-select
+			prop:name="Ids Filter Select"
+			prop:size="small"
+			prop:multiple={true}
+			prop:clearable={true}
+			prop:value={filteredIds()}
+			on:sl-change={(event: any) => {
+				setFilteredIds(event.target.value ?? [])
+			}}
+			on:sl-clear={() => {
+				props.clearFunction
+			}}
+			class="ids-filter filter border-0 focus:ring-background/100 p-0 m-0 text-sm animate-blendIn"
+		>
+			<div class={"flex items-center gap-2 ml-1 mr-0"} slot="prefix">
+				<p class="flex-grow-0 flex-shrink-0 text-sm font-medium text-left text-on-surface-variant">
+					Id
+				</p>
+				<p class="flex-grow-0 flex-shrink-0 text-sm font-medium text-left text-on-surface-variant/60">
+					is
+				</p>
+				<Show
+					when={filteredIds().length === 0}
+					fallback={
+						<div class="flex gap-1">
+							<sl-tag slot="label" prop:size="small" class="font-medium text-sm">
+								{filteredIds()[0]}
+							</sl-tag>
+							<Show when={filteredIds().length > 1}>
+								<sl-tag slot="label" prop:size="small" class="font-medium text-sm">
+									+{filteredIds().length - 1}
+								</sl-tag>
+							</Show>
+						</div>
+					}
+				>
+					<sl-tag prop:size="small" class="font-medium text-sm">
+						not selected
+					</sl-tag>
+					<button
+						class="hover:text-on-surface hover:bg-surface-variant rounded-sm ml-1 mr-0.5"
+						onClick={() => {
+							setFilteredIds(setFilteredIds(project()?.query.messages.includedMessageIds() ?? []))
+							props.clearFunction
+						}}
+					>
+						<IconClose />
+					</button>
+				</Show>
+			</div>
+			<button slot="clear-icon" class="p-0.5">
+				<IconClose class="w-4 h-4" />
+			</button>
+
+			<div class="flex px-3 gap-2 text-sm font-medium">
+				<span class="text-left text-outline-variant grow">Select</span>
+				<Link
+					class="cursor-pointer link link-primary opacity-75"
+					onClick={() => setFilteredIds(project()?.query.messages.includedMessageIds() ?? [])}
+				>
+					All
+				</Link>
+				<Link
+					class="cursor-pointer link link-primary opacity-75"
+					onClick={() => setFilteredIds([])}
+				>
+					None
+				</Link>
+			</div>
+			<sl-divider class="mt-2 mb-0 h-[1px] bg-surface-3" />
+			<div class="max-h-[300px] overflow-y-auto">
+				<For each={project()?.query.messages.includedMessageIds() ?? []}>
+					{(id) => (
+						<sl-tooltip
+							prop:content={id}
+							prop:placement="top"
+							prop:trigger="hover"
+							prop:disabled={id.length < 28}
+							class="small"
+							style={{ "--show-delay": "1s" }}
+						>
+							<sl-option prop:value={id} class="ids-filter text-ellipsis">
+								{id}
+							</sl-option>
+						</sl-tooltip>
+					)}
+				</For>
+			</div>
+		</sl-select>
+	)
+}
diff --git a/inlang/source-code/editor/src/pages/@host/@owner/@repository/components/Listheader.tsx b/inlang/source-code/editor/src/pages/@host/@owner/@repository/components/Listheader.tsx
@@ -1,7 +1,6 @@
 import { useEditorState } from "../State.jsx"
 import { For, Show, createMemo } from "solid-js"
 import { TourHintWrapper } from "./Notification/TourHintWrapper.jsx"
-import IconArrowLeft from "~icons/material-symbols/arrow-back-rounded"
 import IconAdd from "~icons/material-symbols/add"
 import { type InstalledMessageLintRule, type MessageLintRule } from "@inlang/sdk"
 import { messageCount } from "../+Page.jsx"
@@ -13,7 +12,6 @@ export const ListHeader = () => {
 		filteredMessageLintRules,
 		filteredLanguageTags,
 		filteredIds,
-		setFilteredIds,
 		setTourStep,
 		tourStep,
 	} = useEditorState()
@@ -54,24 +52,7 @@ export const ListHeader = () => {
 
 	return (
 		<div class="w-full bg-background border border-surface-3 rounded-t-md flex flex-wrap items-center justify-between gap-2 p-4 animate-blendIn z-[1] relative">
-			<Show
-				when={filteredIds().length === 0}
-				fallback={
-					<div class="flex gap-2 items-center">
-						<sl-button prop:size="small" onClick={() => setFilteredIds([])}>
-							{/* @ts-ignore */}
-							<IconArrowLeft slot="prefix" />
-							Back to all messages
-						</sl-button>
-						<div class="h-[30px] px-3 flex gap-2 font-medium items-center rounded-md text-xs bg-hover-primary/10 text-primary">
-							Isolated view
-						</div>
-					</div>
-				}
-			>
-				<div class="font-medium text-on-surface">{messageCount() + " Messages"}</div>
-			</Show>
-
+			<div class="font-medium text-on-surface">{messageCount() + " Messages"}</div>
 			<div class="flex flex-wrap gap-2">
 				<For each={Object.keys(getLintSummary()) as MessageLintRule["id"][]}>
 					{(lintRule) => (

diff --git a/inlang/source-code/editor/src/renderer/app.css b/inlang/source-code/editor/src/renderer/app.css
@@ -205,13 +205,13 @@ sl-option::part(checked-icon) {
 }
 
 sl-option::part(base) {
+	padding-block: 0.375rem;
 	padding-inline: 0.75rem;
 }
 
 sl-option::part(label) {
 	display: flex;
 	align-items: center;
-	line-height: 1;
 }
 
 sl-select::part(tag) {
@@ -303,3 +303,13 @@ sl-details::part(content) {
 sl-button::part(caret) {
 	width: 1rem;
 }
+
+sl-select.ids-filter::part(tags) {
+	display: none;
+}
+
+sl-option.ids-filter::part(label) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}