feat: move restapi component into generic type

Author: donch1989

apps/console/public/icons/audio.svg

@@ -7,14 +7,16 @@ export type ConnectorType =
   | "CONNECTOR_TYPE_OPERATOR"
   | "CONNECTOR_TYPE_DATA"
   | "CONNECTOR_TYPE_AI"
-  | "CONNECTOR_TYPE_APPLICATION";
+  | "CONNECTOR_TYPE_APPLICATION"
+  | "CONNECTOR_TYPE_GENERIC";
 
 export const ConnectorTypeSchema = z.enum([
   "CONNECTOR_TYPE_UNSPECIFIED",
   "CONNECTOR_TYPE_OPERATOR",
   "CONNECTOR_TYPE_DATA",
   "CONNECTOR_TYPE_AI",
   "CONNECTOR_TYPE_APPLICATION",
+  "CONNECTOR_TYPE_GENERIC",
 ]);
 
 export type ConnectorDefinition = {

apps/console/public/icons/document.svg

@@ -33,7 +33,8 @@ export type PipelineComponentType =
   | "COMPONENT_TYPE_CONNECTOR_AI"
   | "COMPONENT_TYPE_CONNECTOR_DATA"
   | "COMPONENT_TYPE_CONNECTOR_APPLICATION"
-  | "COMPONENT_TYPE_OPERATOR";
+  | "COMPONENT_TYPE_OPERATOR"
+  | "COMPONENT_TYPE_GENERIC";
 
 export type PipelineReleasesWatchState = Record<
   string,

apps/console/public/icons/hubspot.svg

@@ -6,7 +6,8 @@ export type ConnectorType =
   | "CONNECTOR_TYPE_OPERATOR"
   | "CONNECTOR_TYPE_DATA"
   | "CONNECTOR_TYPE_AI"
-  | "CONNECTOR_TYPE_APPLICATION";
+  | "CONNECTOR_TYPE_APPLICATION"
+  | "CONNECTOR_TYPE_GENERIC";
 
 export type ConnectorDefinition = {
   name: string;

apps/console/public/icons/jira.svg

@@ -1,14 +1,33 @@
 import { Icons } from "@instill-ai/design-system";
 
 import { ImageWithFallback } from "../../../../../components";
+import {
+  InstillStore,
+  useConnectorDefinitions,
+  useInstillStore,
+  useShallow,
+} from "../../../../../lib";
 import { Section } from "./Section";
 import { OnSelectComponent } from "./SelectComponentDialog";
 
+const selector = (store: InstillStore) => ({
+  accessToken: store.accessToken,
+  enabledQuery: store.enabledQuery,
+});
+
 export const GenericSection = ({
   onSelect,
 }: {
   onSelect: OnSelectComponent;
 }) => {
+  const { accessToken, enabledQuery } = useInstillStore(useShallow(selector));
+
+  const genericDefinitions = useConnectorDefinitions({
+    connectorType: "CONNECTOR_TYPE_GENERIC",
+    enabled: enabledQuery,
+    accessToken,
+  });
+
   return (
     <Section.Root title="Generic">
       <Section.Item
@@ -35,6 +54,29 @@ export const GenericSection = ({
           Iterator
         </p>
       </Section.Item>
+      {genericDefinitions.isSuccess
+        ? genericDefinitions.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>
   );
 };