From 2477f00d1c2e39bb3f802d7db05c698a8f692b6c Mon Sep 17 00:00:00 2001 From: RCKT <3314891+orangecoloured@users.noreply.github.com> Date: Wed, 23 Oct 2024 18:13:33 +0200 Subject: [PATCH] fix: fix custom task icon (#1560) Co-authored-by: Po Chun Chiu <57251712+EiffelFly@users.noreply.github.com> --- .../src/new-ui/ComplicateIcons/TaskCustom.tsx | 34 +++++++++++++++++++ .../src/new-ui/ComplicateIcons/index.ts | 2 ++ .../src/new-ui/Icons/TaskCustom.tsx | 28 --------------- .../design-system/src/new-ui/Icons/index.ts | 2 -- .../getModelInstanceTaskToolkit.tsx | 8 ++++- .../src/components/card-model/Stats.tsx | 4 ++- .../src/view/model/CreateModelForm.tsx | 4 +-- .../toolkit/src/view/model/ModelsTable.tsx | 8 ++++- .../src/view/model/view-model/ModelHead.tsx | 2 +- 9 files changed, 55 insertions(+), 37 deletions(-) create mode 100644 packages/design-system/src/new-ui/ComplicateIcons/TaskCustom.tsx delete mode 100644 packages/design-system/src/new-ui/Icons/TaskCustom.tsx diff --git a/packages/design-system/src/new-ui/ComplicateIcons/TaskCustom.tsx b/packages/design-system/src/new-ui/ComplicateIcons/TaskCustom.tsx new file mode 100644 index 0000000000..8061b2d514 --- /dev/null +++ b/packages/design-system/src/new-ui/ComplicateIcons/TaskCustom.tsx @@ -0,0 +1,34 @@ +"use client"; + +import * as React from "react"; + +import { + ComplicateIconBase, + ComplicateIconBaseProps, +} from "./ComplicateIconBase"; + +export const TaskCustom = React.forwardRef< + SVGSVGElement, + Omit & { + pathColor: string; + } +>((props, ref) => { + const { className, pathColor, ...passThrough } = props; + return ( + + + + ); +}); +TaskCustom.displayName = "TaskCustomIcon"; diff --git a/packages/design-system/src/new-ui/ComplicateIcons/index.ts b/packages/design-system/src/new-ui/ComplicateIcons/index.ts index 85cd164498..05804ba95e 100644 --- a/packages/design-system/src/new-ui/ComplicateIcons/index.ts +++ b/packages/design-system/src/new-ui/ComplicateIcons/index.ts @@ -10,6 +10,7 @@ import { Number } from "./Number"; import { ObjectDetection } from "./ObjectDetection"; import { OpticalCharacterRecognition } from "./OpticalCharacterRecognition"; import { SemanticSegmentation } from "./SemanticSegmentation"; +import { TaskCustom } from "./TaskCustom"; import { TextEmbedding } from "./TextEmbedding"; import { TextGeneration } from "./TextGeneration"; import { TextToImage } from "./TextToImage"; @@ -32,4 +33,5 @@ export const ComplicateIcons = { TextGeneration, TextToImage, Drag, + TaskCustom, }; diff --git a/packages/design-system/src/new-ui/Icons/TaskCustom.tsx b/packages/design-system/src/new-ui/Icons/TaskCustom.tsx deleted file mode 100644 index 2af969635b..0000000000 --- a/packages/design-system/src/new-ui/Icons/TaskCustom.tsx +++ /dev/null @@ -1,28 +0,0 @@ -"use client"; - -import * as React from "react"; - -import { IconBase, IconBaseProps } from "./IconBase"; - -export const TaskCustom = React.forwardRef< - SVGSVGElement, - Omit ->((props, ref) => { - const { className, ...passThrough } = props; - return ( - - - - ); -}); -TaskCustom.displayName = "IconTaskCustom"; diff --git a/packages/design-system/src/new-ui/Icons/index.ts b/packages/design-system/src/new-ui/Icons/index.ts index b62f1f53e2..b4b5fadc8d 100644 --- a/packages/design-system/src/new-ui/Icons/index.ts +++ b/packages/design-system/src/new-ui/Icons/index.ts @@ -147,7 +147,6 @@ import { SpeechRecognition } from "./SpeechRecognition"; import { Star06 } from "./Star06"; import { Stop } from "./Stop"; import { Tag01 } from "./Tag01"; -import { TaskCustom } from "./TaskCustom"; import { TextA } from "./TextA"; import { TextGenerationChat } from "./TextGenerationChat"; import { ThumbsDown } from "./ThumbsDown"; @@ -326,7 +325,6 @@ export const Icons = { SortLinesUp, Star06, Tag01, - TaskCustom, TextA, TextGenerationChat, ThumbsDown, diff --git a/packages/design-system/src/ui-helpers/getModelInstanceTaskToolkit.tsx b/packages/design-system/src/ui-helpers/getModelInstanceTaskToolkit.tsx index 1269aaf2de..2287ec3aaa 100644 --- a/packages/design-system/src/ui-helpers/getModelInstanceTaskToolkit.tsx +++ b/packages/design-system/src/ui-helpers/getModelInstanceTaskToolkit.tsx @@ -1,3 +1,4 @@ +import { cn } from ".."; import { ComplicateIcons, Icons } from "../new-ui"; export const getModelInstanceTaskToolkit = (task: string) => { @@ -177,7 +178,12 @@ export const getModelInstanceTaskToolkit = (task: string) => { case "TASK_CUSTOM": return { getIcon: (className?: string) => { - return ; + return ( + + ); }, label: "Custom", }; diff --git a/packages/toolkit/src/components/card-model/Stats.tsx b/packages/toolkit/src/components/card-model/Stats.tsx index c4903b9521..525014cdf0 100644 --- a/packages/toolkit/src/components/card-model/Stats.tsx +++ b/packages/toolkit/src/components/card-model/Stats.tsx @@ -23,7 +23,9 @@ export const Stats = (props: StatsProps) => {
- {getIcon("w-4 h-4 stroke-semantic-secondary-hover")} + {getIcon( + `w-4 h-4 ${["TASK_CUSTOM"].includes(task) ? "[&>*]:!stroke-semantic-secondary-on-bg" : ""}`, + )} {label}
diff --git a/packages/toolkit/src/view/model/CreateModelForm.tsx b/packages/toolkit/src/view/model/CreateModelForm.tsx index 37ed9e3318..af5d998d96 100644 --- a/packages/toolkit/src/view/model/CreateModelForm.tsx +++ b/packages/toolkit/src/view/model/CreateModelForm.tsx @@ -390,9 +390,7 @@ export const CreateModelForm = () => { - {InstillModelTask.filter( - (task) => task !== "TASK_CUSTOM", - ).map((task) => { + {InstillModelTask.map((task) => { const { label } = getModelInstanceTaskToolkit(task); diff --git a/packages/toolkit/src/view/model/ModelsTable.tsx b/packages/toolkit/src/view/model/ModelsTable.tsx index f9d91b1e7f..cf9974480b 100644 --- a/packages/toolkit/src/view/model/ModelsTable.tsx +++ b/packages/toolkit/src/view/model/ModelsTable.tsx @@ -4,6 +4,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { Button, + cn, DataTable, getModelInstanceTaskToolkit, } from "@instill-ai/design-system"; @@ -61,7 +62,12 @@ export const ModelsTable = (props: ModelsTableProps) => { secondaryLink={null} secondaryText={label} iconElement={getIcon( - `w-4 h-4 ${["TASK_CHAT"].includes(row.original.task || "") ? "stroke-semantic-fg-primary [&>*]:!stroke-semantic-fg-primary" : "[&>*]:!fill-semantic-fg-primary"}`, + cn( + "w-4 h-4", + ["TASK_CHAT", "TASK_CUSTOM"].includes(row.original.task || "") + ? "stroke-semantic-fg-primary [&>*]:!stroke-semantic-fg-primary" + : "[&>*]:!fill-semantic-fg-primary", + ), )} />
diff --git a/packages/toolkit/src/view/model/view-model/ModelHead.tsx b/packages/toolkit/src/view/model/view-model/ModelHead.tsx index 4f540dacd3..06bfcb6af0 100644 --- a/packages/toolkit/src/view/model/view-model/ModelHead.tsx +++ b/packages/toolkit/src/view/model/view-model/ModelHead.tsx @@ -162,7 +162,7 @@ export const ModelHead = ({ size="sm" > {task.getIcon( - `w-3 h-3 ${["TASK_CHAT"].includes(model?.task || "") ? "stroke-semantic-secondary-on-bg [&>*]:!stroke-semantic-secondary-on-bg" : "[&>*]:!fill-semantic-secondary-on-bg"}`, + `w-3 h-3 ${["TASK_CHAT", "TASK_CUSTOM"].includes(model?.task || "") ? "stroke-semantic-secondary-on-bg [&>*]:!stroke-semantic-secondary-on-bg" : "[&>*]:!fill-semantic-secondary-on-bg"}`, )} {task.label}