feat(pipeline-builder): Make the array fields on start node start wit…

…h only one field (#959) Because - Improve UX This commit - Make the array fields on start node start with only one field
instill-ai · Oct 12, 2023 · e203cde · e203cde · vercel · Oct 12, 2023
1 parent 780ee01
commit e203cde
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 32 deletions.
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.68.3-rc.67",
+  "version": "0.68.3-rc.69",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

diff --git a/packages/toolkit/src/view/dashboard/PipelineTriggerCountsLineChart.tsx b/packages/toolkit/src/view/dashboard/PipelineTriggerCountsLineChart.tsx
@@ -154,8 +154,8 @@ export const PipelineTriggerCountsLineChart = ({
                     <Tooltip.Arrow
                       className="fill-semantic-bg-primary"
                       offset={10}
-                      width={18}
-                      height={12}
+                      width={9}
+                      height={6}
                     />
                   </Tooltip.Content>
                 </Tooltip.Portal>

diff --git a/packages/toolkit/src/view/pipeline-builder/components/ReleasePipelineModal.tsx b/packages/toolkit/src/view/pipeline-builder/components/ReleasePipelineModal.tsx
@@ -128,7 +128,7 @@ export const ReleasePipelineModal = (props: ReleasePipelineModalProps) => {
       <Dialog.Trigger asChild>
         <Tooltip.Provider>
           <Tooltip.Root>
-            <Tooltip.Trigger asChild={true}>
+            <Tooltip.Trigger asChild>
               {/* 
                 This will make tooltip work even with a disabled button
                 https://www.radix-ui.com/primitives/docs/components/tooltip#displaying-a-tooltip-from-a-disabled-button
@@ -162,8 +162,8 @@ export const ReleasePipelineModal = (props: ReleasePipelineModalProps) => {
                 <Tooltip.Arrow
                   className="fill-semantic-bg-primary"
                   offset={10}
-                  width={18}
-                  height={12}
+                  width={9}
+                  height={6}
                 />
               </Tooltip.Content>
             </Tooltip.Portal>

diff --git a/packages/toolkit/src/view/pipeline-builder/components/SharePipelineDialog.tsx b/packages/toolkit/src/view/pipeline-builder/components/SharePipelineDialog.tsx
@@ -132,8 +132,8 @@ export const SharePipelineDialog = (props: SharePipelineDialogProps) => {
                         <Tooltip.Arrow
                           className="fill-semantic-bg-primary"
                           offset={10}
-                          width={18}
-                          height={12}
+                          width={9}
+                          height={6}
                         />
                       </Tooltip.Content>
                     </Tooltip.Portal>
@@ -218,8 +218,8 @@ export const SharePipelineDialog = (props: SharePipelineDialogProps) => {
                           <Tooltip.Arrow
                             className="fill-semantic-bg-primary"
                             offset={10}
-                            width={18}
-                            height={12}
+                            width={9}
+                            height={6}
                           />
                         </Tooltip.Content>
                       </Tooltip.Portal>

diff --git a/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx b/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx
@@ -9,6 +9,7 @@ import {
   Input,
   LinkButton,
   Textarea,
+  Tooltip,
   useToast,
 } from "@instill-ai/design-system";
 import { shallow } from "zustand/shallow";
@@ -41,7 +42,7 @@ import {
   ImageWithFallback,
 } from "../../../../components";
 import { ConnectorNodeControlPanel } from "./ConnectorNodeControlPanel";
-import { ResourceNameTag } from "./ResourceNameTag";
+import { ResourceIDTag } from "./ResourceIDTag";
 
 const pipelineBuilderSelector = (state: PipelineBuilderStore) => ({
   expandAllNodes: state.expandAllNodes,
@@ -525,15 +526,40 @@ export const ConnectorNode = ({ data, id }: NodeProps<ConnectorNodeData>) => {
                 />
               </form>
             </Form.Root>
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                connectorIDInputRef.current?.focus();
-              }}
-              type="button"
-            >
-              <Icons.Edit03 className="h-4 w-4 stroke-semantic-fg-primary" />
-            </button>
+            <Tooltip.Provider>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  {/* 
+                eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+              */}
+                  <span className="flex" tabIndex={0}>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        connectorIDInputRef.current?.focus();
+                      }}
+                      type="button"
+                    >
+                      <Icons.Edit03 className="h-4 w-4 stroke-semantic-fg-primary" />
+                    </button>
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                  <Tooltip.Content
+                    side="top"
+                    className="!px-3 !py-2 rounded-sm !product-body-text-4-semibold bg-semantic-bg-primary"
+                  >
+                    Edit the component ID
+                    <Tooltip.Arrow
+                      className="fill-semantic-bg-primary"
+                      offset={10}
+                      width={9}
+                      height={6}
+                    />
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+            </Tooltip.Provider>
           </div>
           {isLatestVersion && isOwner ? (
             <ConnectorNodeControlPanel
@@ -946,7 +972,13 @@ export const ConnectorNode = ({ data, id }: NodeProps<ConnectorNodeData>) => {
           </>
         )}
         <div className="flex flex-row-reverse">
-          <ResourceNameTag resourceName={data.component.resource_name} />
+          <ResourceIDTag
+            resourceID={
+              data.component.resource_name
+                ? data.component.resource_name.split("/")[3]
+                : null
+            }
+          />
         </div>
       </div>
       <CustomHandle

diff --git a/...onents/connector-node/ResourceNameTag.tsx → ...mponents/connector-node/ResourceIDTag.tsx b/...onents/connector-node/ResourceNameTag.tsx → ...mponents/connector-node/ResourceIDTag.tsx
@@ -1,12 +1,12 @@
 import { Tag, Tooltip } from "@instill-ai/design-system";
 import { Nullable } from "../../../../lib";
 
-export const ResourceNameTag = ({
-  resourceName,
+export const ResourceIDTag = ({
+  resourceID,
 }: {
-  resourceName: Nullable<string>;
+  resourceID: Nullable<string>;
 }) => {
-  const resourceID = resourceName ? resourceName.split("/")[3] : null;
+  // const resourceID = resourceName ? resourceName.split("/")[3] : null;
 
   return resourceID ? (
     <Tooltip.Provider>
@@ -28,7 +28,7 @@ export const ResourceNameTag = ({
           >
             <div className="flex flex-col gap-y-1 text-left">
               <p className="product-body-text-4-semibold bg-semantic-bg-primary">
-                resource name
+                resource ID
               </p>
               <p className="product-body-text-4-regular break-words text-semantic-fg-secondary">
                 {resourceID}

diff --git a/packages/toolkit/src/view/pipeline-builder/use-node-input-fields/NumbersField.tsx b/packages/toolkit/src/view/pipeline-builder/use-node-input-fields/NumbersField.tsx
@@ -8,12 +8,12 @@ export const NumbersField = (props: {
   title: string;
 }) => {
   const [numberFieldsArray, setNumberFieldsArray] = React.useState<number[]>([
-    1, 1,
+    1,
   ]);
 
   const [numberFieldsValue, setNumberFieldsValue] = React.useState<
     (string | undefined)[]
-  >(["", ""]);
+  >([""]);
 
   const { form, fieldKey, title } = props;
   return (

diff --git a/packages/toolkit/src/view/pipeline-builder/use-node-input-fields/TextsField.tsx b/packages/toolkit/src/view/pipeline-builder/use-node-input-fields/TextsField.tsx
@@ -7,13 +7,11 @@ export const TextsField = (props: {
   fieldKey: string;
   title: string;
 }) => {
-  const [textFieldsArray, setTextFieldsArray] = React.useState<number[]>([
-    1, 1,
-  ]);
+  const [textFieldsArray, setTextFieldsArray] = React.useState<number[]>([1]);
 
   const [textFieldsValue, setTextFieldsValue] = React.useState<
     (string | undefined)[]
-  >(["", ""]);
+  >([""]);
 
   const { form, fieldKey, title } = props;
   return (