feat: implement statefull toggle and adapt new prop (#49)

Because

- We need a transition state when deal with toggling the model state

This commit

- Implement the StatefulToggleButton

README.md

@@ -21,9 +21,10 @@ queryClient.setQueryData<Model[]>(["models"], (old) => {
 - Error bundary
 - Suspense
 - Refactor react-query queryKey to make it more reliable, especially model services
-- Right now the data type is 
-	- PipelineWithRawRecipe -> process -> Pipeline
-	- Source -> process -> SourceWithDefinition
-	- Try to refactor above with same logic
+- Right now the data type is
+  - PipelineWithRawRecipe -> process -> Pipeline
+  - Source -> process -> SourceWithDefinition
+  - Try to refactor above with same logic
 - Complete Button base design in design-system
-- Fix RawPipelineRecipe type
+- Fix RawPipelineRecipe type
+- Unify react-query cache key

package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^0.4.1",
-    "@instill-ai/design-system": "^0.0.69",
+    "@instill-ai/design-system": "^0.0.72",
     "axios": "^0.27.2",
     "clsx": "^1.1.1",
     "cookie": "^0.5.0",

src/components/formik/FormikField/SingleSelect/SingleSelect.tsx

@@ -24,6 +24,7 @@ const SingleSelect: FC<SingleSelectProps & FieldProps> = ({
   menuPlacement,
   value,
   error,
+  additionalMessageOnLabel,
   ...props
 }) => {
   const onChange = (_: string, option: SingleSelectOption) => {
@@ -43,6 +44,7 @@ const SingleSelect: FC<SingleSelectProps & FieldProps> = ({
       onChangeInput={onChange}
       menuPlacement={menuPlacement}
       value={value}
+      additionalMessageOnLabel={additionalMessageOnLabel}
     />
   );
 };
@@ -57,6 +59,7 @@ const SingleSelectFieldFormikWrapper: FC<SingleSelectProps> = ({
   description,
   label,
   additionalOnChangeCb,
+  additionalMessageOnLabel,
   menuPlacement,
   value,
   error,
@@ -73,6 +76,7 @@ const SingleSelectFieldFormikWrapper: FC<SingleSelectProps> = ({
       description={description}
       additionalOnChangeCb={additionalOnChangeCb}
       label={label}
+      additionalMessageOnLabel={additionalMessageOnLabel}
       value={value}
       menuPlacement={menuPlacement}
       error={error}

src/components/formik/FormikField/StatefulToggleField/StatefulToggleField.tsx

@@ -0,0 +1,77 @@
+import { FC } from "react";
+import { Field, FieldProps } from "formik";
+import {
+  BasicToggleFieldProps,
+  StatefulToggleField,
+} from "@instill-ai/design-system";
+import { Nullable, State } from "@/types/general";
+
+export type ToggleFieldProps = Omit<BasicToggleFieldProps, "onChangeInput"> & {
+  name: string;
+  additionalOnChangeCb: Nullable<(value: boolean) => void>;
+  state: State;
+};
+
+const StatefulToggleFieldWrapper: FC<ToggleFieldProps & FieldProps> = ({
+  field,
+  form,
+  id,
+  defaultChecked,
+  additionalOnChangeCb,
+  additionalMessageOnLabel,
+  error,
+  ...props
+}) => {
+  const onChange = (_: string, value: boolean) => {
+    form.setFieldValue(field.name, value);
+    if (additionalOnChangeCb) {
+      additionalOnChangeCb(value);
+    }
+  };
+
+  return (
+    <StatefulToggleField
+      {...props}
+      id={id}
+      error={error}
+      onChangeInput={onChange}
+      defaultChecked={defaultChecked}
+      additionalMessageOnLabel={additionalMessageOnLabel}
+    />
+  );
+};
+
+const StatefulToggleFieldFormikWrapper: FC<ToggleFieldProps> = ({
+  id,
+  name,
+  disabled,
+  readOnly,
+  required,
+  description,
+  label,
+  additionalOnChangeCb,
+  additionalMessageOnLabel,
+  defaultChecked,
+  error,
+  state,
+}) => {
+  return (
+    <Field
+      id={id}
+      name={name}
+      component={StatefulToggleFieldWrapper}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      description={description}
+      additionalOnChangeCb={additionalOnChangeCb}
+      label={label}
+      additionalMessageOnLabel={additionalMessageOnLabel}
+      defaultChecked={defaultChecked}
+      error={error}
+      state={state}
+    />
+  );
+};
+
+export default StatefulToggleFieldFormikWrapper;

src/components/formik/FormikField/StatefulToggleField/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./StatefulToggleField";
+export * from "./StatefulToggleField";

src/components/formik/FormikField/TextArea/TextArea.tsx

@@ -13,6 +13,7 @@ const TextArea: FC<TextAreaProps & FieldProps> = ({
   form,
   id,
   additionalOnChangeCb,
+  additionalMessageOnLabel,
   error,
   ...props
 }) => {
@@ -24,7 +25,13 @@ const TextArea: FC<TextAreaProps & FieldProps> = ({
   };
 
   return (
-    <BasicTextArea {...props} id={id} error={error} onChangeInput={onChange} />
+    <BasicTextArea
+      {...props}
+      id={id}
+      error={error}
+      onChangeInput={onChange}
+      additionalMessageOnLabel={additionalMessageOnLabel}
+    />
   );
 };
 
@@ -36,6 +43,7 @@ const TextAreaFormikWrapper: FC<TextAreaProps> = ({
   required,
   description,
   label,
+  additionalMessageOnLabel,
   additionalOnChangeCb,
   placeholder,
   autoComplete,
@@ -55,6 +63,7 @@ const TextAreaFormikWrapper: FC<TextAreaProps> = ({
       description={description}
       additionalOnChangeCb={additionalOnChangeCb}
       label={label}
+      additionalMessageOnLabel={additionalMessageOnLabel}
       placeholder={placeholder}
       autoComplete={autoComplete}
       value={value}

src/components/formik/FormikField/TextField/TextField.tsx

@@ -12,6 +12,7 @@ const TextField: FC<TextFieldProps & FieldProps> = ({
   field,
   form,
   id,
+  additionalMessageOnLabel,
   additionalOnChangeCb,
   error,
   ...props
@@ -24,7 +25,13 @@ const TextField: FC<TextFieldProps & FieldProps> = ({
   };
 
   return (
-    <BasicTextField {...props} id={id} error={error} onChangeInput={onChange} />
+    <BasicTextField
+      {...props}
+      id={id}
+      error={error}
+      onChangeInput={onChange}
+      additionalMessageOnLabel={additionalMessageOnLabel}
+    />
   );
 };
 
@@ -36,6 +43,7 @@ const TextFieldFormikWrapper: FC<TextFieldProps> = ({
   required,
   description,
   label,
+  additionalMessageOnLabel,
   additionalOnChangeCb,
   placeholder,
   type,
@@ -54,6 +62,7 @@ const TextFieldFormikWrapper: FC<TextFieldProps> = ({
       description={description}
       additionalOnChangeCb={additionalOnChangeCb}
       label={label}
+      additionalMessageOnLabel={additionalMessageOnLabel}
       placeholder={placeholder}
       type={type}
       autoComplete={autoComplete}

src/components/formik/FormikField/ToggleField/ToggleField.tsx

@@ -17,6 +17,7 @@ const ToggleField: FC<ToggleFieldProps & FieldProps> = ({
   id,
   defaultChecked,
   additionalOnChangeCb,
+  additionalMessageOnLabel,
   error,
   ...props
 }) => {
@@ -34,6 +35,7 @@ const ToggleField: FC<ToggleFieldProps & FieldProps> = ({
       error={error}
       onChangeInput={onChange}
       defaultChecked={defaultChecked}
+      additionalMessageOnLabel={additionalMessageOnLabel}
     />
   );
 };
@@ -47,6 +49,7 @@ const ToggleFieldFormikWrapper: FC<ToggleFieldProps> = ({
   description,
   label,
   additionalOnChangeCb,
+  additionalMessageOnLabel,
   defaultChecked,
   error,
 }) => {
@@ -61,6 +64,7 @@ const ToggleFieldFormikWrapper: FC<ToggleFieldProps> = ({
       description={description}
       additionalOnChangeCb={additionalOnChangeCb}
       label={label}
+      additionalMessageOnLabel={additionalMessageOnLabel}
       defaultChecked={defaultChecked}
       error={error}
     />

src/components/formik/FormikField/UploadFileField/UploadFileField.tsx

@@ -19,6 +19,7 @@ const UploadFileField: FC<UploadFileFieldProps & FieldProps> = ({
   form,
   id,
   additionalOnChangeCb,
+  additionalMessageOnLabel,
   error,
   ...props
 }) => {
@@ -35,6 +36,7 @@ const UploadFileField: FC<UploadFileFieldProps & FieldProps> = ({
       id={id}
       error={error}
       onChangeInput={onChange}
+      additionalMessageOnLabel={additionalMessageOnLabel}
     />
   );
 };
@@ -48,6 +50,7 @@ const UploadFileFieldFormikWrapper: FC<UploadFileFieldProps> = ({
   description,
   label,
   additionalOnChangeCb,
+  additionalMessageOnLabel,
   placeholder,
   uploadButtonText,
   error,
@@ -63,6 +66,7 @@ const UploadFileFieldFormikWrapper: FC<UploadFileFieldProps> = ({
       description={description}
       additionalOnChangeCb={additionalOnChangeCb}
       label={label}
+      additionalMessageOnLabel={additionalMessageOnLabel}
       placeholder={placeholder}
       uploadButtonText={uploadButtonText}
       error={error}

src/components/formik/FormikField/index.ts

@@ -7,13 +7,23 @@ import type { UploadFileFieldProps } from "./UploadFileField";
 import TextArea, { TextAreaProps } from "./TextArea";
 import ToggleField from "./ToggleField";
 import type { ToggleFieldProps } from "./ToggleField";
+import StatefulToggleField from "./StatefulToggleField";
+import type { StatefulToggleFieldProps } from "@instill-ai/design-system";
 
-export { SingleSelect, TextField, UploadFileField, TextArea, ToggleField };
+export {
+  SingleSelect,
+  TextField,
+  UploadFileField,
+  TextArea,
+  ToggleField,
+  StatefulToggleField,
+};
 
 export type {
   SingleSelectProps,
   TextFieldProps,
   UploadFileFieldProps,
   TextAreaProps,
   ToggleFieldProps,
+  StatefulToggleFieldProps,
 };

src/components/forms/ConfigureDestinationForm/ConfigureDestinationForm.tsx

@@ -161,6 +161,7 @@ const ConfigureDestinationForm: FC<ConfigureDestinationFormProps> = ({
                   id="destinationDefinition"
                   name="definition"
                   label="Data destination"
+                  additionalMessageOnLabel={null}
                   value={selectedDestinationDefinitionOption}
                   options={syncDestinationDefinitionOptions}
                   additionalOnChangeCb={destinationDefinitionOnChangeCb}

src/components/forms/ConfigureModelForm/ConfigureModelForm.tsx

@@ -108,6 +108,7 @@ const ConfigureModelForm: FC<ConfigureModelFormProps> = ({
               id="description"
               name="description"
               label="Description"
+              additionalMessageOnLabel={null}
               description="Fill with a short description of your model"
               value={values.description}
               error={errors.description || null}

src/components/forms/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx

@@ -43,6 +43,7 @@ const ConfigureModelInstanceForm: FC<ConfigureModelInstanceFormProps> = ({
               id="repo"
               name="repo"
               label="GitHub repository"
+              additionalMessageOnLabel={null}
               description="The URL of a GitHub repositories/organizations, e.g. 'instill-ai/yolov4'."
               value={values.repo}
               error={errors.repo || null}
@@ -58,6 +59,7 @@ const ConfigureModelInstanceForm: FC<ConfigureModelInstanceFormProps> = ({
               id="tag"
               name="tag"
               label="Tag"
+              additionalMessageOnLabel={null}
               description="Tag of the GitHub repository, e.g., 'v0.1.0'."
               value={values.tag}
               error={errors.tag || null}
@@ -73,6 +75,7 @@ const ConfigureModelInstanceForm: FC<ConfigureModelInstanceFormProps> = ({
               id="repoUrl"
               name="repoUrl"
               label="GitHub repository URL"
+              additionalMessageOnLabel={null}
               description="GitHub repository URL, e.g., 'https://github.com/instill-ai/protobufs/tree/v2.0.0'."
               value={values.repoUrl}
               error={errors.repoUrl || null}

src/components/forms/ConfigurePipelineForm/ConfigurePipelineForm.tsx

@@ -102,6 +102,18 @@ const ConfigurePipelineForm: FC<ConfigurePipelineFormProps> = ({
     setDeletePipelineModalIsOpen(false);
   }, [pipeline, amplitudeIsInit, router, deletePipeline]);
 
+  const determinePipelineState = useCallback(
+    (values: ConfigurePipelineFormValue) => {
+      switch (values.state) {
+        case "STATE_ACTIVE":
+          return true;
+        default:
+          return false;
+      }
+    },
+    []
+  );
+
   return (
     <>
       <Formik
@@ -165,6 +177,8 @@ const ConfigurePipelineForm: FC<ConfigurePipelineFormProps> = ({
                   id="pipelineState"
                   name="state"
                   label="State"
+                  value={determinePipelineState(values)}
+                  additionalMessageOnLabel={null}
                   defaultChecked={true}
                   error={errors?.state || null}
                   additionalOnChangeCb={null}
@@ -177,6 +191,7 @@ const ConfigurePipelineForm: FC<ConfigurePipelineFormProps> = ({
                   id="pipelineDescription"
                   name="description"
                   label="Description"
+                  additionalMessageOnLabel={null}
                   description="Fill with a short description of your model"
                   value={values.description}
                   error={errors.description || null}

src/components/forms/ConfigureSourceForm/ConfigureSourceForm.tsx

@@ -151,6 +151,7 @@ const ConfigureSourceForm: FC<ConfigureSourceFormProps> = ({ source }) => {
                   id="sourceDefinition"
                   name="sourceDefinition"
                   label="Data source"
+                  additionalMessageOnLabel={null}
                   disabled={canEdit ? false : true}
                   readOnly={false}
                   options={syncSourceDefinitionOptions}

src/components/forms/CreateDestinationForm/CreateDestinationForm.tsx

@@ -179,6 +179,7 @@ const CreateDestinationForm: FC = () => {
               id="destinationDefinition"
               name="destinationDefinition"
               label="Destination type"
+              additionalMessageOnLabel={null}
               options={syncDestinationDefinitionOptions}
               value={selectedSyncDestinationDefinitionOption}
               additionalOnChangeCb={destinationDefinitionOnChange}