Display category and scenario name as breadcrumbs on scenario list (#…

…6910)
TouK · Sep 20, 2024 · 838f5ce · 838f5ce
1 parent 4ddb086
commit 838f5ce
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 45 deletions.
diff --git a/...apshots__/electron/Linux/Processes list should filter by processing mode #0.png b/...apshots__/electron/Linux/Processes list should filter by processing mode #0.png
diff --git a/designer/client/src/components/toolbars/scenarioDetails/ScenarioLabels.tsx b/designer/client/src/components/toolbars/scenarioDetails/ScenarioLabels.tsx
@@ -60,6 +60,11 @@ const StyledAutocomplete = styled(Autocomplete)<{ isEdited: boolean }>(({ isEdit
     },
 }));
 
+const StyledLabelChip = styled(Chip)({
+    borderRadius: "16px",
+    margin: "2px",
+});
+
 const filter = createFilterOptions<string | LabelOption>();
 
 type LabelOption = {
@@ -332,7 +337,7 @@ export const ScenarioLabels = ({ readOnly }: Props) => {
                                 const props = isEdited ? { ...tagProps } : {};
                                 const labelError = labelOptionsErrors.find((error) => error.label === toLabelValue(option));
                                 return (
-                                    <Chip
+                                    <StyledLabelChip
                                         key={key}
                                         data-testid={`scenario-label-${index}`}
                                         color={labelError ? "error" : "default"}

diff --git a/designer/submodules/packages/components/src/common/categoryChip.tsx b/designer/submodules/packages/components/src/common/categoryChip.tsx
@@ -1,23 +1,56 @@
 import React, { useCallback, useMemo } from "react";
-import { Chip } from "@mui/material";
+import { Button, Chip, Typography } from "@mui/material";
 
 interface Props {
-    value: string;
-    filterValue: string[];
+    category: string;
+    filterValues: string[];
     setFilter: (value: string[]) => void;
 }
 
-export function CategoryChip({ value, filterValue, setFilter }: Props): JSX.Element {
-    const isSelected = useMemo(() => filterValue.includes(value), [filterValue, value]);
+export function CategoryChip({ category, filterValues, setFilter }: Props): JSX.Element {
+    const isSelected = useMemo(() => filterValues.includes(category), [filterValues, category]);
 
     const onClick = useCallback(
         (e) => {
-            setFilter(isSelected ? filterValue.filter((v) => v !== value) : [...filterValue, value]);
+            setFilter(isSelected ? filterValues.filter((v) => v !== category) : [...filterValues, category]);
             e.preventDefault();
             e.stopPropagation();
         },
-        [setFilter, isSelected, filterValue, value],
+        [setFilter, isSelected, filterValues, category],
     );
 
-    return <Chip tabIndex={0} label={value} size="small" color={isSelected ? "primary" : "default"} onClick={onClick} />;
+    return <Chip tabIndex={0} label={category} size="small" color={isSelected ? "primary" : "default"} onClick={onClick} />;
+}
+
+export function CategoryButton({ category, filterValues, setFilter }: Props): JSX.Element {
+    const isSelected = useMemo(() => filterValues.includes(category), [filterValues, category]);
+
+    const onClick = useCallback(
+        (e) => {
+            setFilter(isSelected ? filterValues.filter((v) => v !== category) : [...filterValues, category]);
+            e.preventDefault();
+            e.stopPropagation();
+        },
+        [setFilter, isSelected, filterValues, category],
+    );
+
+    return (
+        <Typography
+            component={Button}
+            color={isSelected ? "primary" : "inherit"}
+            sx={{
+                textTransform: "capitalize",
+                display: "flex",
+                gap: 1,
+                alignItems: "center",
+                minWidth: "unset",
+                p: 0,
+                mx: 0,
+            }}
+            onClick={onClick}
+            aria-selected={isSelected}
+        >
+            {category}
+        </Typography>
+    );
 }
diff --git a/designer/submodules/packages/components/src/common/index.ts b/designer/submodules/packages/components/src/common/index.ts
@@ -3,7 +3,7 @@ export { useDefaultTheme } from "./defaultTheme";
 export { HistoryProvider, useHistory, useBackHref } from "./historyContext";
 export { NuIcon } from "./nuIcon";
 export { TextFieldWithClear, InputWithClear } from "./forms";
-export { CategoryChip } from "./categoryChip";
+export { CategoryButton, CategoryChip } from "./categoryChip";
 export { useFilterContext, FiltersContextProvider, createFilterRules } from "./filters";
 export { ExternalLink, NavigationProvider } from "./parentNavigationProvider";
 export { nodeHref, fragmentNodeHref, scenarioHref, metricsHref } from "./scenarioHref";

diff --git a/designer/submodules/packages/components/src/common/labelChip.tsx b/designer/submodules/packages/components/src/common/labelChip.tsx
@@ -1,14 +1,18 @@
 import React, { useCallback, useMemo } from "react";
-import { Chip } from "@mui/material";
+import { Chip, styled } from "@mui/material";
 
 interface Props {
-    key: string;
+    id: string;
     value: string;
     filterValue: string[];
     setFilter: (value: string[]) => void;
 }
 
-export function LabelChip({ key, value, filterValue, setFilter }: Props): JSX.Element {
+const StyledLabelChip = styled(Chip)({
+    borderRadius: "16px",
+});
+
+export function LabelChip({ id, value, filterValue, setFilter }: Props): JSX.Element {
     const isSelected = useMemo(() => filterValue.includes(value), [filterValue, value]);
 
     const onClick = useCallback(
@@ -21,13 +25,13 @@ export function LabelChip({ key, value, filterValue, setFilter }: Props): JSX.El
     );
 
     return (
-        <Chip
+        <StyledLabelChip
+            key={id}
+            color={isSelected ? "primary" : "default"}
+            size="small"
             variant={"outlined"}
-            key={key}
-            tabIndex={0}
             label={value}
-            size="small"
-            color={isSelected ? "primary" : "default"}
+            tabIndex={0}
             onClick={onClick}
         />
     );

diff --git a/designer/submodules/packages/components/src/components/cellRenderers/categoriesCell.tsx b/designer/submodules/packages/components/src/components/cellRenderers/categoriesCell.tsx
@@ -12,7 +12,7 @@ export function CategoriesCell(props: CellRendererParams): JSX.Element {
     return (
         <TruncateWrapper>
             {value.map((name) => (
-                <CategoryChip key={name} value={name} filterValue={filterValue} setFilter={setFilter("CATEGORY")} />
+                <CategoryChip key={name} category={name} filterValues={filterValue} setFilter={setFilter("CATEGORY")} />
             ))}
         </TruncateWrapper>
     );

diff --git a/designer/submodules/packages/components/src/components/usages/filtersPart.tsx b/designer/submodules/packages/components/src/components/usages/filtersPart.tsx
@@ -3,14 +3,14 @@ import { useFilterContext } from "../../common";
 import { QuickFilter } from "../../scenarios/filters/quickFilter";
 import { FilterMenu } from "../../scenarios/filters/filterMenu";
 import { SimpleOptionsStack } from "../../scenarios/filters/simpleOptionsStack";
-import { StatusOptionsStack } from "../../scenarios/filters/otherOptionsStack";
+import { StatusOptionsStack } from "../../scenarios/filters/typeOptionsStack";
 import { OptionsStack } from "../../scenarios/filters/optionsStack";
 import { FilterListItem } from "../../scenarios/filters/filterListItem";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Divider, Stack } from "@mui/material";
 import { xor } from "lodash";
-import { EventTrackingType, EventTrackingSelector, getEventTrackingProps } from "nussknackerUi/eventTracking";
+import { EventTrackingSelector, getEventTrackingProps } from "nussknackerUi/eventTracking";
 
 interface FiltersPartProps {
     isLoading: boolean;

diff --git a/designer/submodules/packages/components/src/components/usages/usagesFiltersModel.ts b/designer/submodules/packages/components/src/components/usages/usagesFiltersModel.ts
@@ -1,4 +1,4 @@
-import { StatusFilterOption } from "../../scenarios/filters/otherOptionsStack";
+import { StatusFilterOption } from "../../scenarios/filters/typeOptionsStack";
 import { ProcessingMode } from "../../scenarios/list/processingMode";
 
 export interface UsagesFiltersModel {

diff --git a/designer/submodules/packages/components/src/scenarios/filters/filtersPart.tsx b/designer/submodules/packages/components/src/scenarios/filters/filtersPart.tsx
@@ -6,7 +6,7 @@ import { useScenarioLabelsQuery, useStatusDefinitions, useUserQuery } from "../u
 import { QuickFilter } from "./quickFilter";
 import { FilterMenu } from "./filterMenu";
 import { SimpleOptionsStack } from "./simpleOptionsStack";
-import { OtherOptionsStack, StatusOptionsStack } from "./otherOptionsStack";
+import { TypeOptionsStack, StatusOptionsStack } from "./typeOptionsStack";
 import { SortOptionsStack } from "./sortOptionsStack";
 import { ActiveFilters } from "./activeFilters";
 import { RowType } from "../list/listPart";
@@ -135,8 +135,8 @@ export function FiltersPart({ withSort, isLoading, data = [] }: { data: RowType[
                             })}
                         />
                     </FilterMenu>
-                    <FilterMenu label={t("table.filter.other", "Type")} count={getFilter("TYPE", true).length}>
-                        <OtherOptionsStack />
+                    <FilterMenu label={t("table.filter.TYPE", "Type")} count={getFilter("TYPE", true).length}>
+                        <TypeOptionsStack />
                     </FilterMenu>
                     {withSort ? (
                         <FilterMenu label={t("table.filter.SORT_BY", "Sort")}>

diff --git a/...c/scenarios/filters/otherOptionsStack.tsx → ...rc/scenarios/filters/typeOptionsStack.tsx b/...c/scenarios/filters/otherOptionsStack.tsx → ...rc/scenarios/filters/typeOptionsStack.tsx
@@ -11,15 +11,15 @@ import ScanarioIcon from "../../assets/icons/scenario.svg";
 import FragmentIcon from "../../assets/icons/fragment.svg";
 import { EventTrackingSelector, getEventTrackingProps } from "nussknackerUi/eventTracking";
 
-export function OtherOptionsStack(): JSX.Element {
+export function TypeOptionsStack(): JSX.Element {
     const { t } = useTranslation();
     const { getFilter, setFilter } = useFilterContext<ScenariosFiltersModel>();
     const otherFilters: Array<keyof ScenariosFiltersModel> = ["TYPE"];
     const getTypeFilter = () => getFilter("TYPE", true);
 
     return (
         <OptionsStack
-            label={t("table.filter.other", "Other")}
+            label={t("table.filter.TYPE", "Type")}
             options={otherFilters.map((name) => ({ name }))}
             value={otherFilters
                 .flatMap((k) => getFilter(k))

diff --git a/designer/submodules/packages/components/src/scenarios/list/item.tsx b/designer/submodules/packages/components/src/scenarios/list/item.tsx
@@ -1,8 +1,8 @@
 import { History } from "@mui/icons-material";
-import { Divider, Stack, Typography } from "@mui/material";
+import { Divider, Stack, styled, Typography } from "@mui/material";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { CategoryChip, Highlight, useFilterContext } from "../../common";
+import { CategoryButton, Highlight, useFilterContext, TruncateWrapper } from "../../common";
 import { Author } from "./author";
 import { ScenariosFiltersModel } from "../filters/scenariosFiltersModel";
 import { RowType } from "./listPart";
@@ -13,19 +13,24 @@ import { ScenarioStatus } from "./scenarioStatus";
 import { ProcessingModeItem } from "./processingMode";
 import { formatDateTime } from "nussknackerUi/DateUtils";
 import { LabelChip } from "../../common/labelChip";
-import { TruncateWrapper } from "../../common/utils";
 
-function Category({ value, filtersContext }: { value: string; filtersContext: FiltersContextType<ScenariosFiltersModel> }): JSX.Element {
+function Category({
+    category,
+    filtersContext,
+}: {
+    category: string;
+    filtersContext: FiltersContextType<ScenariosFiltersModel>;
+}): JSX.Element {
     const { setFilter, getFilter } = filtersContext;
     const filterValue = useMemo(() => getFilter("CATEGORY", true), [getFilter]);
-    return <CategoryChip value={value} filterValue={filterValue} setFilter={setFilter("CATEGORY")} />;
+    return <CategoryButton category={category} filterValues={filterValue} setFilter={setFilter("CATEGORY")} />;
 }
 
 function Labels({ values, filtersContext }: { values: string[]; filtersContext: FiltersContextType<ScenariosFiltersModel> }): JSX.Element {
     const { setFilter, getFilter } = filtersContext;
     const filterValue = useMemo(() => getFilter("LABEL", true), [getFilter]);
 
-    const elements = values.map((v) => <LabelChip key={v} value={v} filterValue={filterValue} setFilter={setFilter("LABEL")} />);
+    const elements = values.map((v) => <LabelChip key={v} id={v} value={v} filterValue={filterValue} setFilter={setFilter("LABEL")} />);
     return <TruncateWrapper>{elements}</TruncateWrapper>;
 }
 
@@ -47,14 +52,23 @@ export function LastAction({ lastAction }: { lastAction: ProcessActionType }): J
     ) : null;
 }
 
+const HighlightedName = styled(Highlight)({
+    fontWeight: "bold",
+    fontSize: "1rem",
+});
+
 export function FirstLine({ row }: { row: RowType }): JSX.Element {
     const { t } = useTranslation();
     const filtersContext = useFilterContext<ScenariosFiltersModel>();
 
     return (
-        <CopyTooltip text={row.name} title={t("scenario.copyName", "Copy name to clipboard")}>
-            <Highlight value={row.name} filterText={filtersContext.getFilter("NAME")} />
-        </CopyTooltip>
+        <div style={{ display: "flex" }}>
+            <Category category={row.processCategory} filtersContext={filtersContext} />
+            <span style={{ paddingLeft: 8, paddingRight: 8 }}>/</span>
+            <CopyTooltip text={row.name} title={t("scenario.copyName", "Copy name to clipboard")}>
+                <HighlightedName value={row.name} filterText={filtersContext.getFilter("NAME")} />
+            </CopyTooltip>
+        </div>
     );
 }
 
@@ -84,8 +98,7 @@ export function SecondLine({ row }: { row: RowType }): JSX.Element {
             </div>
             {!row.isFragment && !row.isArchived && <ScenarioStatus state={row.state} filtersContext={filtersContext} />}
             <ProcessingModeItem processingMode={row.processingMode} filtersContext={filtersContext} />
-            <Category value={row.processCategory} filtersContext={filtersContext} />
-            <Labels values={row.labels} filtersContext={filtersContext} />
+            {row.labels.length && <Labels values={row.labels} filtersContext={filtersContext} />}
         </Stack>
     );
 }

diff --git a/designer/submodules/packages/components/src/scenarios/list/tablePart.tsx b/designer/submodules/packages/components/src/scenarios/list/tablePart.tsx
@@ -49,7 +49,7 @@ export function TablePart(props: ListPartProps<RowType>): JSX.Element {
             {
                 field: "createdAt",
                 headerName: t("table.scenarios.title.CREATION_DATE", "Creation date"),
-                type: "dateTime",
+                type: "string",
                 flex: 2,
                 renderCell: (props) => <Highlight filterText={filterText} {...props} />,
                 hide: true,
@@ -72,7 +72,7 @@ export function TablePart(props: ListPartProps<RowType>): JSX.Element {
             {
                 field: "modificationDate",
                 headerName: t("table.scenarios.title.MODIFICATION_DATE", "Modification date"),
-                type: "dateTime",
+                type: "string",
                 flex: 2,
                 renderCell: (props) => <Highlight filterText={filterText} {...props} value={formatDateTime(props.value)} />,
                 sortingOrder: ["desc", "asc", null],
@@ -124,12 +124,14 @@ export function TablePart(props: ListPartProps<RowType>): JSX.Element {
                     const text = filter?.toString();
                     if (!text?.length) return true;
                     const segments = text.trim().split(/\s/);
-                    return segments.every((segment) =>
-                        ["id"]
-                            .map((field) => row[field]?.toString().toLowerCase())
+                    return segments.every((segment) => {
+                        return columns
+                            .filter((value) => visibleColumns[value.field])
+                            .filter((value) => ["id", "createdAt", "modificationDate"].includes(value.field))
+                            .map(({ field }) => row[field]?.toString().toLowerCase())
                             .filter(Boolean)
-                            .some((value) => value.includes(segment.toLowerCase())),
-                    );
+                            .some((value) => value.includes(segment.toLowerCase()));
+                    });
                 },
                 ARCHIVED: (row, filter) => (filter ? row.isArchived : !row.isArchived),
                 TYPE: (row, value) =>

diff --git a/designer/submodules/packages/components/src/scenarios/useScenariosQuery.tsx b/designer/submodules/packages/components/src/scenarios/useScenariosQuery.tsx
@@ -102,6 +102,7 @@ export function useScenariosWithStatus(): UseQueryResult<Scenario[]> {
             data: data.map((scenario) => ({
                 ...scenario,
                 state: statuses?.data?.[scenario.name] || scenario.state,
+                id: scenario.name, // required by DataGrid when table=true
             })),
         } as UseQueryResult<Scenario[]>;
     }, [scenarios, statuses]);