feat(pipeline-builder): revamp the style of select component dialog (#…

…1199)

Because

- revamp the style of select component dialog

This commit

- revamp the style of select component dialog

packages/toolkit/src/view/pipeline-builder/components/dialogs/select-component-dialog/AISection.tsx

@@ -0,0 +1,53 @@
+import { Icons } from "@instill-ai/design-system";
+import { ImageWithFallback } from "../../../../../components";
+import { Section } from "./Section";
+import { OnSelectComponent } from "./SelectComponentDialog";
+import {
+  InstillStore,
+  useConnectorDefinitions,
+  useInstillStore,
+  useShallow,
+} from "../../../../../lib";
+
+const selector = (store: InstillStore) => ({
+  accessToken: store.accessToken,
+  enabledQuery: store.enabledQuery,
+});
+
+export const AISection = ({ onSelect }: { onSelect: OnSelectComponent }) => {
+  const { accessToken, enabledQuery } = useInstillStore(useShallow(selector));
+
+  const aiDefinitions = useConnectorDefinitions({
+    connectorType: "CONNECTOR_TYPE_AI",
+    enabled: enabledQuery,
+    accessToken,
+  });
+
+  return (
+    <Section.Root title="AI">
+      {aiDefinitions.isSuccess
+        ? aiDefinitions.data.map((definition) => (
+            <Section.Item
+              key={definition.id}
+              onClick={() => {
+                onSelect(definition);
+              }}
+            >
+              <ImageWithFallback
+                src={`/icons/${definition.id}.svg`}
+                width={32}
+                height={32}
+                alt={`${definition.title}-icon`}
+                fallbackImg={
+                  <Icons.Box className="h-8 w-8 stroke-semantic-fg-primary" />
+                }
+              />
+              <p className="my-auto text-left text-semantic-fg-primary product-headings-heading-5">
+                {definition.title}
+              </p>
+            </Section.Item>
+          ))
+        : null}
+    </Section.Root>
+  );
+};

packages/toolkit/src/view/pipeline-builder/components/dialogs/select-component-dialog/ApplicationSection.tsx

@@ -0,0 +1,57 @@
+import { Icons } from "@instill-ai/design-system";
+import { ImageWithFallback } from "../../../../../components";
+import { Section } from "./Section";
+import { OnSelectComponent } from "./SelectComponentDialog";
+import {
+  InstillStore,
+  useConnectorDefinitions,
+  useInstillStore,
+  useShallow,
+} from "../../../../../lib";
+
+const selector = (store: InstillStore) => ({
+  accessToken: store.accessToken,
+  enabledQuery: store.enabledQuery,
+});
+
+export const ApplicationSection = ({
+  onSelect,
+}: {
+  onSelect: OnSelectComponent;
+}) => {
+  const { accessToken, enabledQuery } = useInstillStore(useShallow(selector));
+
+  const applicationDefinitions = useConnectorDefinitions({
+    connectorType: "CONNECTOR_TYPE_APPLICATION",
+    enabled: enabledQuery,
+    accessToken,
+  });
+
+  return (
+    <Section.Root title="Application">
+      {applicationDefinitions.isSuccess
+        ? applicationDefinitions.data.map((definition) => (
+            <Section.Item
+              key={definition.id}
+              onClick={() => {
+                onSelect(definition);
+              }}
+            >
+              <ImageWithFallback
+                src={`/icons/${definition.id}.svg`}
+                width={32}
+                height={32}
+                alt={`${definition.title}-icon`}
+                fallbackImg={
+                  <Icons.Box className="h-8 w-8 stroke-semantic-fg-primary" />
+                }
+              />
+              <p className="my-auto text-left text-semantic-fg-primary product-headings-heading-5">
+                {definition.title}
+              </p>
+            </Section.Item>
+          ))
+        : null}
+    </Section.Root>
+  );
+};

packages/toolkit/src/view/pipeline-builder/components/dialogs/select-component-dialog/DataSection.tsx

@@ -0,0 +1,53 @@
+import { Icons } from "@instill-ai/design-system";
+import { ImageWithFallback } from "../../../../../components";
+import { Section } from "./Section";
+import { OnSelectComponent } from "./SelectComponentDialog";
+import {
+  InstillStore,
+  useConnectorDefinitions,
+  useInstillStore,
+  useShallow,
+} from "../../../../../lib";
+
+const selector = (store: InstillStore) => ({
+  accessToken: store.accessToken,
+  enabledQuery: store.enabledQuery,
+});
+
+export const DataSection = ({ onSelect }: { onSelect: OnSelectComponent }) => {
+  const { accessToken, enabledQuery } = useInstillStore(useShallow(selector));
+
+  const dataDefinitions = useConnectorDefinitions({
+    connectorType: "CONNECTOR_TYPE_DATA",
+    enabled: enabledQuery,
+    accessToken,
+  });
+
+  return (
+    <Section.Root title="Data">
+      {dataDefinitions.isSuccess
+        ? dataDefinitions.data.map((definition) => (
+            <Section.Item
+              key={definition.id}
+              onClick={() => {
+                onSelect(definition);
+              }}
+            >
+              <ImageWithFallback
+                src={`/icons/${definition.id}.svg`}
+                width={32}
+                height={32}
+                alt={`${definition.title}-icon`}
+                fallbackImg={
+                  <Icons.Box className="h-8 w-8 stroke-semantic-fg-primary" />
+                }
+              />
+              <p className="my-auto text-left text-semantic-fg-primary product-headings-heading-5">
+                {definition.title}
+              </p>
+            </Section.Item>
+          ))
+        : null}
+    </Section.Root>
+  );
+};

packages/toolkit/src/view/pipeline-builder/components/dialogs/select-component-dialog/GenericSection.tsx

@@ -0,0 +1,39 @@
+import { Icons } from "@instill-ai/design-system";
+import { ImageWithFallback } from "../../../../../components";
+import { Section } from "./Section";
+import { OnSelectComponent } from "./SelectComponentDialog";
+
+export const GenericSection = ({
+  onSelect,
+}: {
+  onSelect: OnSelectComponent;
+}) => {
+  return (
+    <Section.Root title="Generic">
+      <Section.Item
+        onClick={() => {
+          onSelect({
+            id: "iterator",
+            title: "Iterator",
+            icon: "iterator.svg",
+            name: "iterator/iterator",
+            uid: "uid",
+          });
+        }}
+      >
+        <ImageWithFallback
+          src="/icons/iterator.svg"
+          width={32}
+          height={32}
+          alt="iterator-icon"
+          fallbackImg={
+            <Icons.Box className="h-8 w-8 stroke-semantic-fg-primary" />
+          }
+        />
+        <p className="my-auto text-left text-semantic-fg-primary product-headings-heading-5">
+          Iterator
+        </p>
+      </Section.Item>
+    </Section.Root>
+  );
+};