fix: fix various UI issue related to form (#56)

Because - There are multiple typo related to form. This commit - Fix typo - close #37
instill-ai · Jun 27, 2022 · 482cabf · 482cabf
1 parent df9ce70
commit 482cabf
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 23 deletions.
diff --git a/src/components/forms/CreateDestinationForm/CreateDestinationForm.tsx b/src/components/forms/CreateDestinationForm/CreateDestinationForm.tsx
@@ -165,7 +165,7 @@ const CreateDestinationForm: FC = () => {
           <FormBase marginBottom={null} gapY="gap-y-5" padding={null}>
             {/* <TextField
               name="id"
-              label="Name"
+              label="Id"
               description="Pick a name to help you identify this destination in Instill"
               disabled={allSyncDestinationCreated ? true : false}
               readOnly={false}

diff --git a/src/components/forms/CreateModelForm/CreateModelForm.tsx b/src/components/forms/CreateModelForm/CreateModelForm.tsx
@@ -294,7 +294,7 @@ const CreateNewModelFlow: FC = () => {
             <TextField
               id="modelId"
               name="id"
-              label="Name"
+              label="Id"
               additionalMessageOnLabel={null}
               description="Pick a name to help you identify this source in Instill"
               value={values.id}

diff --git a/src/components/forms/CreatePipelineForm/SetupDestinationStep/CreateNewDestinationFlow.tsx b/src/components/forms/CreatePipelineForm/SetupDestinationStep/CreateNewDestinationFlow.tsx
@@ -127,7 +127,7 @@ const CreateNewDestinationFlow: FC<CreateNewDestinationFlowProps> = ({
       <TextField
         id="destinationId"
         name="destination.new.id"
-        label="Name"
+        label="Id"
         additionalMessageOnLabel={null}
         description="Pick a name to help you identify this source in Instill"
         value={values.destination.new.id}

diff --git a/...orm/SetupModelStep/CreateNewModelFlow.tsx → ...pModelStep/CreateNewModelInstanceFlow.tsx b/...orm/SetupModelStep/CreateNewModelFlow.tsx → ...pModelStep/CreateNewModelInstanceFlow.tsx
@@ -41,14 +41,14 @@ import { Nullable } from "@/types/general";
 import { useAmplitudeCtx } from "context/AmplitudeContext";
 import { sendAmplitudeData } from "@/lib/amplitude";
 
-// We need to pass modelCreated state to UseExistingModelFlow
+// We need to pass modelCreated state to UseExistingModelInstanceFlow
 
-export type CreateNewModelFlowProps = StepNumberState & {
+export type CreateNewModelInstanceFlowProps = StepNumberState & {
   setModelCreated: Dispatch<SetStateAction<boolean>>;
   modelCreated: boolean;
 };
 
-const CreateNewModelFlow: FC<CreateNewModelFlowProps> = ({
+const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
   setStepNumber,
   stepNumber,
   setModelCreated,
@@ -319,7 +319,7 @@ const CreateNewModelFlow: FC<CreateNewModelFlowProps> = ({
       <TextField
         id="modelId"
         name="model.new.id"
-        label="Name"
+        label="id"
         additionalMessageOnLabel={null}
         description="Pick a name to help you identify this source in Instill"
         value={values.model.new.id}
@@ -429,7 +429,7 @@ const CreateNewModelFlow: FC<CreateNewModelFlowProps> = ({
           <SingleSelect
             id="modelInstanceName"
             name="model.new.modelInstanceName"
-            label="Source type"
+            label="Model instances"
             additionalMessageOnLabel={null}
             options={modelInstanceOptions ? modelInstanceOptions : []}
             value={selectedModelInstanceOption}
@@ -466,4 +466,4 @@ const CreateNewModelFlow: FC<CreateNewModelFlowProps> = ({
   );
 };
 
-export default CreateNewModelFlow;
+export default CreateNewModelInstanceFlow;
diff --git a/src/components/forms/CreatePipelineForm/SetupModelStep/SetupModelStep.tsx b/src/components/forms/CreatePipelineForm/SetupModelStep/SetupModelStep.tsx
@@ -3,8 +3,8 @@ import { FC, useState } from "react";
 import { FormVerticalDividers } from "@/components/ui";
 import { FormikStep } from "../../../formik";
 import { StepNumberState } from "../CreatePipelineForm";
-import CreateNewModelFlow from "./CreateNewModelFlow";
-import UseExistingModelFlow from "./UseExistingModelFlow";
+import CreateNewModelInstanceFlow from "./CreateNewModelInstanceFlow";
+import UseExistingModeInstancelFlow from "./UseExistingModeInstancelFlow";
 
 export type SetupModelStepProps = StepNumberState;
 
@@ -13,13 +13,13 @@ const SetupModelStep: FC<SetupModelStepProps> = (props) => {
   return (
     <FormikStep multiGroup={true}>
       <div className="flex flex-1 flex-row">
-        <UseExistingModelFlow
+        <UseExistingModeInstancelFlow
           {...props}
           modelCreated={modelCreated}
           setModelCreated={setModelCreated}
         />
         <FormVerticalDividers />
-        <CreateNewModelFlow
+        <CreateNewModelInstanceFlow
           {...props}
           modelCreated={modelCreated}
           setModelCreated={setModelCreated}

diff --git a/...m/SetupModelStep/UseExistingModelFlow.tsx → ...odelStep/UseExistingModeInstancelFlow.tsx b/...m/SetupModelStep/UseExistingModelFlow.tsx → ...odelStep/UseExistingModeInstancelFlow.tsx
@@ -21,12 +21,12 @@ import { Nullable } from "@/types/general";
 import { useAmplitudeCtx } from "context/AmplitudeContext";
 import { sendAmplitudeData } from "@/lib/amplitude";
 
-export type UseExistingModelFlowProps = StepNumberState & {
+export type UseExistingModeInstancelFlowProps = StepNumberState & {
   setModelCreated: Dispatch<SetStateAction<boolean>>;
   modelCreated: boolean;
 };
 
-const UseExistingModelFlow: FC<UseExistingModelFlowProps> = ({
+const UseExistingModeInstancelFlow: FC<UseExistingModeInstancelFlowProps> = ({
   modelCreated,
   setStepNumber,
   stepNumber,
@@ -134,12 +134,12 @@ const UseExistingModelFlow: FC<UseExistingModelFlowProps> = ({
   return (
     <div className="flex flex-1 flex-col gap-y-5 p-5">
       <h3 className="text-black text-instill-h3">
-        Select a existing online model
+        Select an existing online model instance
       </h3>
       <SingleSelect
         id="existingModelInstanceName"
         name="model.existing.modelInstanceName"
-        label="Source type"
+        label="Online model instances"
         additionalMessageOnLabel={null}
         options={modelInstanceOptions ? modelInstanceOptions : []}
         value={selectedModelInstanceOption}
@@ -163,4 +163,4 @@ const UseExistingModelFlow: FC<UseExistingModelFlowProps> = ({
   );
 };
 
-export default UseExistingModelFlow;
+export default UseExistingModeInstancelFlow;
diff --git a/...components/forms/CreatePipelineForm/SetupPipelineDetailsStep/SetupPipelineDetailsStep.tsx b/...components/forms/CreatePipelineForm/SetupPipelineDetailsStep/SetupPipelineDetailsStep.tsx
@@ -221,7 +221,7 @@ const SetupPipelineDetailsStep: FC = () => {
         <TextField
           id="pipelineId"
           name="pipeline.id"
-          label="Name"
+          label="id"
           additionalMessageOnLabel={null}
           description="Pick a name to help you identify this source in Instill"
           value={values.pipeline.id}

diff --git a/src/components/forms/CreatePipelineForm/SetupSourceStep/CreateNewSourceFlow.tsx b/src/components/forms/CreatePipelineForm/SetupSourceStep/CreateNewSourceFlow.tsx
@@ -105,7 +105,7 @@ const CreateNewSourceFlow: FC<CreateNewSourceFlowProps> = ({
       <TextField
         id="sourceId"
         name="source.new.id"
-        label="Name"
+        label="id"
         additionalMessageOnLabel={null}
         description="Pick a name to help you identify this source in Instill"
         value={values.source.new.id}

diff --git a/src/components/forms/CreateSourceForm/CreateSourceForm.tsx b/src/components/forms/CreateSourceForm/CreateSourceForm.tsx
@@ -147,7 +147,7 @@ const CreateSourceForm: FC = () => {
           <FormBase marginBottom={null} gapY="gap-y-5" padding={null}>
             {/* <TextField
               name="id"
-              label="Name"
+              label="id"
               description="Pick a name to help you identify this source in Instill"
               disabled={allSyncSourceCreated ? true : false}
               readOnly={false}

diff --git a/src/components/forms/OnboardingForm/OnboardingForm.tsx b/src/components/forms/OnboardingForm/OnboardingForm.tsx
@@ -177,7 +177,7 @@ const OnboardingForm: FC<OnBoardingFormProps> = ({ user }) => {
                   ? user?.newsletter_subscription
                   : false
               }
-              description="Receive the latest news from Instill AI: open source updates, community highlights, blog posts, useful tutorials and more! You can unsubscribe any time."
+              description="Receive the latest news from Instill AI for open source updates, community highlights, blog posts, useful tutorials and more! You can unsubscribe any time."
               error={formik.errors.newsletterSubscription || null}
               additionalOnChangeCb={null}
             />

diff --git a/src/pages/onboarding.tsx b/src/pages/onboarding.tsx
@@ -47,7 +47,7 @@ const OnBoardingPage: FC<OnBoardingPageProps> & {
   return (
     <PageContentContainer>
       <PageTitle
-        title="Welcome to world&lsquo;s first AI-integrated pipeline dashboard"
+        title="Welcome to VDP console"
         breadcrumbs={["Onboarding"]}
         enableButton={false}
         marginBottom="mb-10"