fix: fix auto-gen-form required field didn't show * sign (#1193)

Because - fix auto-gen-form required field didn't show * sign This commit - fix auto-gen-form required field didn't show * sign
instill-ai · Jun 3, 2024 · cbd2c6a · cbd2c6a
1 parent 935bd7c
commit cbd2c6a
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 9 deletions.
diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/BooleanField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/BooleanField.tsx
@@ -14,6 +14,7 @@ export const BooleanField = ({
   disabled,
   size,
   isHidden,
+  isRequired,
 }: {
   shortDescription?: string;
   disabled?: boolean;
@@ -30,7 +31,7 @@ export const BooleanField = ({
               <Form.Label
                 className={size === "sm" ? "!product-body-text-4-semibold" : ""}
               >
-                {title}
+                {isRequired ? `${title} *` : title}
               </Form.Label>
               <FieldDescriptionTooltip description={description} />
             </div>

diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/CredentialTextField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/CredentialTextField.tsx
@@ -15,6 +15,7 @@ export const CredentialTextField = ({
   disabled,
   size,
   isHidden,
+  isRequired,
 }: {
   shortDescription?: string;
   disabled?: boolean;
@@ -33,7 +34,7 @@ export const CredentialTextField = ({
               <Form.Label
                 className={size === "sm" ? "!product-body-text-4-semibold" : ""}
               >
-                {title}
+                {isRequired ? `${title} *` : title}
               </Form.Label>
               <FieldDescriptionTooltip description={description} />
             </div>

diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/ImageField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/ImageField.tsx
@@ -17,6 +17,7 @@ export const ImageField = ({
   shortDescription,
   disabled,
   isHidden,
+  isRequired,
 }: {
   shortDescription?: string;
   disabled?: boolean;
@@ -36,7 +37,7 @@ export const ImageField = ({
               <Form.Label
                 className={size === "sm" ? "!product-body-text-4-medium" : ""}
               >
-                {title}
+                {isRequired ? `${title} *` : title}
               </Form.Label>
               <FieldDescriptionTooltip description={description} />
             </div>

diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx
@@ -25,6 +25,7 @@ export const OneOfConditionField = ({
   disabled,
   size,
   isHidden,
+  isRequired,
 }: {
   tree: InstillFormTree;
   selectedConditionMap: Nullable<SelectedConditionMap>;
@@ -85,7 +86,7 @@ export const OneOfConditionField = ({
                       size === "sm" ? "!product-body-text-4-semibold" : ""
                     }
                   >
-                    {title}
+                    {isRequired ? `${title} *` : title}
                   </Form.Label>
                   <FieldDescriptionTooltip description={description} />
                 </div>

diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/SingleSelectField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/SingleSelectField.tsx
@@ -28,6 +28,7 @@ export const SingleSelectField = ({
   updateForceCloseCollapsibleFormGroups,
   updateForceOpenCollapsibleFormGroups,
   updateIsUsingInstillCredit,
+  isRequired,
 }: {
   tree: InstillFormTree;
   options: string[];
@@ -187,7 +188,7 @@ export const SingleSelectField = ({
               <Form.Label
                 className={size === "sm" ? "!product-body-text-4-medium" : ""}
               >
-                {title}
+                {isRequired ? `${title} *` : title}
               </Form.Label>
               <FieldDescriptionTooltip description={description} />
             </div>

diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/TextAreaField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/TextAreaField.tsx
@@ -14,6 +14,7 @@ export const TextAreaField = ({
   disabled,
   size,
   isHidden,
+  isRequired,
 }: {
   shortDescription?: string;
   disabled?: boolean;
@@ -29,7 +30,7 @@ export const TextAreaField = ({
               <Form.Label
                 className={size === "sm" ? "!product-body-text-4-semibold" : ""}
               >
-                {title}
+                {isRequired ? `${title} *` : title}
               </Form.Label>
               <FieldDescriptionTooltip description={description} />
             </div>

diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/TextField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/TextField.tsx
@@ -14,6 +14,7 @@ export const TextField = ({
   disabled,
   size,
   isHidden,
+  isRequired,
 }: {
   shortDescription?: string;
   disabled?: boolean;
@@ -30,7 +31,7 @@ export const TextField = ({
               <Form.Label
                 className={size === "sm" ? "!product-body-text-4-medium" : ""}
               >
-                {title}
+                {isRequired ? `${title} *` : title}
               </Form.Label>
               <FieldDescriptionTooltip description={description} />
             </div>

diff --git a/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx b/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx
@@ -287,6 +287,7 @@ export function pickRegularFieldsFromInstillFormTree(
             disabled={disabledAll}
             size={size}
             isHidden={tree.isHidden}
+            isRequired={tree.isRequired}
           />
         );
       }
@@ -305,6 +306,7 @@ export function pickRegularFieldsFromInstillFormTree(
         disabled={disabledAll}
         size={size}
         isHidden={tree.isHidden}
+        isRequired={tree.isRequired}
       />
     );
   }
@@ -323,6 +325,7 @@ export function pickRegularFieldsFromInstillFormTree(
         disabled={disabledAll}
         size={size}
         isHidden={tree.isHidden}
+        isRequired={tree.isRequired}
         instillCredentialMap={tree.instillCredentialMap}
         updateSupportInstillCredit={updateSupportInstillCredit}
         updateIsUsingInstillCredit={updateIsUsingInstillCredit}
@@ -348,11 +351,11 @@ export function pickRegularFieldsFromInstillFormTree(
           shortDescription={tree.instillShortDescription}
           disabled={disabledAll}
           instillAcceptFormats={tree.instillAcceptFormats ?? []}
-          isRequired={tree.isRequired}
           instillUpstreamTypes={tree.instillUpstreamTypes ?? []}
           componentID={componentID}
           size={size}
           isHidden={tree.isHidden}
+          isRequired={tree.isRequired}
           secrets={secrets}
           instillSecret={tree.instillSecret}
           instillCredential={tree.instillCredential}
@@ -373,6 +376,7 @@ export function pickRegularFieldsFromInstillFormTree(
         disabled={disabledAll}
         size={size}
         isHidden={tree.isHidden}
+        isRequired={tree.isRequired}
       />
     );
   }
@@ -388,11 +392,11 @@ export function pickRegularFieldsFromInstillFormTree(
         shortDescription={tree.instillShortDescription}
         disabled={disabledAll}
         instillAcceptFormats={tree.instillAcceptFormats ?? []}
-        isRequired={tree.isRequired}
         instillUpstreamTypes={tree.instillUpstreamTypes ?? []}
         componentID={componentID}
         size={size}
         isHidden={tree.isHidden}
+        isRequired={tree.isRequired}
         secrets={secrets}
         instillSecret={tree.instillSecret}
         instillCredential={tree.instillCredential}
@@ -413,6 +417,7 @@ export function pickRegularFieldsFromInstillFormTree(
       disabled={disabledAll}
       size={size}
       isHidden={tree.isHidden}
+      isRequired={tree.isRequired}
     />
   );
 }
diff --git a/packages/toolkit/src/lib/use-instill-form/types.ts b/packages/toolkit/src/lib/use-instill-form/types.ts
@@ -154,6 +154,7 @@ export type AutoFormFieldBaseProps = {
   isHidden?: boolean;
   disabled?: boolean;
   keyPrefix?: string;
+  isRequired?: boolean;
 };
 
 export type ZodAnyValidatorSchema = z.ZodType<any, any, any>;