Fix UI for options

Author: tnagorra

manager-dashboard/app/components/ExpandableContainer/styles.css

@@ -11,6 +11,7 @@
 
         .header {
             flex-grow: 1;
+            font-size: 1.2rem;
         }
 
         .icons {

manager-dashboard/app/views/NewProject/BasicProjectInfoForm/index.tsx

@@ -225,7 +225,7 @@ function BasicProjectInfoForm(props: Props<PartialProjectFormType>) {
             </div>
             {(value.projectType === PROJECT_TYPE_FOOTPRINT && value?.customOptions) && (
                 <Card
-                    title="Define Options"
+                    title="Custom Options"
                     contentClassName={styles.card}
                 >
                     <Heading level={4}>

manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { PartialTutorialFormType } from '#views/NewTutorial/utils';
 import { iconMap } from '#utils/common';
-
+import {
+    colorKeyToColorMap,
+    PartialTutorialFormType,
+} from '../../utils';
 import styles from './styles.css';
 
 interface Props {
@@ -15,10 +17,13 @@ export default function CustomOptionPreview(props: Props) {
 
     return (
         <div className={styles.optionPreview}>
-            {value?.map((preview) => {
-                const Icon = preview.icon ? iconMap[preview.icon] : undefined;
+            {value?.map((preview, index) => {
+                const Icon = preview.icon
+                    ? iconMap[preview.icon]
+                    : iconMap.flagOutline;
+
                 const previewText = [
-                    preview.title,
+                    preview.title || `Option ${index + 1}`,
                     preview.description,
                 ].filter(Boolean).join(' - ');
 
@@ -30,7 +35,9 @@ export default function CustomOptionPreview(props: Props) {
                         {Icon && (
                             <div
                                 className={styles.previewIcon}
-                                style={{ backgroundColor: preview.iconColor }}
+                                style={{
+                                    backgroundColor: preview.iconColor || colorKeyToColorMap.gray,
+                                }}
                             >
                                 <Icon />
                             </div>

manager-dashboard/app/views/NewTutorial/CustomOptionInput/CustomOptionPreview/styles.css

@@ -17,6 +17,7 @@
             display: flex;
             align-items: center;
             border-radius: 50%;
+            /* FIXME: do not hard code this if possible */
             padding: 3px;
             font-size: 30px;
         }

…al/CustomOptionInput/SubOption/index.tsx …stomOptionInput/SubOptionInput/index.tsxmanager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx renamed to manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/index.tsx renamed to manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/index.tsx

@@ -20,6 +20,7 @@ interface Props {
     onRemove: (index: number) => void;
     index: number;
     error: Error<PartialSubOptionType> | undefined;
+    disabled: boolean;
 }
 export default function SubOption(props: Props) {
     const {
@@ -28,6 +29,7 @@ export default function SubOption(props: Props) {
         onRemove,
         index,
         error: riskyError,
+        disabled,
     } = props;
 
     const onReasonChange = useFormObject(index, onChange, { subOptionsId: 1 });
@@ -37,23 +39,26 @@ export default function SubOption(props: Props) {
         <div className={styles.subOptionContent}>
             <TextInput
                 className={styles.subOptionInput}
-                label="Description"
+                label="Title"
                 value={value.description}
                 name={'description' as const}
                 error={error?.description}
                 onChange={onReasonChange}
+                disabled={disabled}
             />
             <NumberInput
                 className={styles.subOptionInput}
                 label="Value"
                 value={value.value}
                 name={'value' as const}
-                error={error?.description}
+                error={error?.value}
                 onChange={onReasonChange}
+                disabled={disabled}
             />
             <Button
                 name={index}
                 onClick={onRemove}
+                disabled={disabled}
             >
                 Remove
             </Button>

…l/CustomOptionInput/SubOption/styles.css …tomOptionInput/SubOptionInput/styles.cssmanager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css renamed to manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/styles.css manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOption/styles.css renamed to manager-dashboard/app/views/NewTutorial/CustomOptionInput/SubOptionInput/styles.css

@@ -15,7 +15,7 @@ import NumberInput from '#components/NumberInput';
 import SelectInput from '#components/SelectInput';
 import NonFieldError from '#components/NonFieldError';
 
-import SubOption from './SubOption';
+import SubOptionInput from './SubOptionInput';
 import {
     ColorOptions,
     PartialTutorialFormType,
@@ -26,7 +26,7 @@ import styles from './styles.css';
 import { IconItem, iconList } from '#utils/common';
 
 export type PartialCustomOptionsType = NonNullable<PartialTutorialFormType['customOptions']>[number]
-const defaultcustomOptionsValue: PartialCustomOptionsType = {
+const defaultCustomOptionsValue: PartialCustomOptionsType = {
     optionId: 1,
 };
 
@@ -35,21 +35,21 @@ type subOptionsType = NonNullable<PartialCustomOptionsType['subOptions']>[number
 interface Props {
     value: PartialCustomOptionsType;
     onChange: (value: SetValueArg<PartialCustomOptionsType>, index: number) => void;
-    onRemove: (index: number) => void;
     index: number;
     error: Error<PartialCustomOptionsType> | undefined;
+    disabled: boolean;
 }
 
 export default function CustomOptionInput(props: Props) {
     const {
         value,
         onChange,
-        onRemove,
         index,
         error: riskyError,
+        disabled,
     } = props;
 
-    const onOptionChange = useFormObject(index, onChange, defaultcustomOptionsValue);
+    const onOptionChange = useFormObject(index, onChange, defaultCustomOptionsValue);
 
     const {
         setValue: onsubOptionsAdd,
@@ -63,7 +63,7 @@ export default function CustomOptionInput(props: Props) {
         [error?.subOptions],
     );
 
-    const handlesubOptionsAdd = React.useCallback(
+    const handleSubOptionsAdd = React.useCallback(
         () => {
             onOptionChange(
                 (oldValue: PartialCustomOptionsType['subOptions']) => {
@@ -95,6 +95,7 @@ export default function CustomOptionInput(props: Props) {
                     name={'title' as const}
                     onChange={onOptionChange}
                     error={error?.title}
+                    disabled={disabled}
                 />
                 <SelectInput
                     className={styles.optionIcon}
@@ -106,6 +107,7 @@ export default function CustomOptionInput(props: Props) {
                     labelSelector={(d: IconItem) => d.label}
                     onChange={onOptionChange}
                     error={error?.icon}
+                    disabled={disabled}
                 />
             </div>
             <div className={styles.optionContent}>
@@ -116,6 +118,7 @@ export default function CustomOptionInput(props: Props) {
                     name={'value' as const}
                     onChange={onOptionChange}
                     error={error?.value}
+                    disabled={disabled}
                 />
                 <SelectInput
                     className={styles.optionIcon}
@@ -127,6 +130,7 @@ export default function CustomOptionInput(props: Props) {
                     labelSelector={(d: ColorOptions) => d.label}
                     onChange={onOptionChange}
                     error={error?.iconColor}
+                    disabled={disabled}
                 />
             </div>
             <TextInput
@@ -136,14 +140,9 @@ export default function CustomOptionInput(props: Props) {
                 name={'description' as const}
                 onChange={onOptionChange}
                 error={error?.description}
+                disabled={disabled}
             />
-            <Button
-                name={index}
-                onClick={onRemove}
-                className={styles.removeButton}
-            >
-                Remove Option
-            </Button>
+            {/* FIXME: use accordion open by default */}
             <div className={styles.subOptions}>
                 <Heading level={5}>
                     Sub Options
@@ -152,13 +151,14 @@ export default function CustomOptionInput(props: Props) {
                     error={subOptionsError}
                 />
                 {value.subOptions?.map((sub, i) => (
-                    <SubOption
+                    <SubOptionInput
                         key={sub.subOptionsId}
                         value={sub}
                         index={i}
                         onChange={onsubOptionsAdd}
                         onRemove={onsubOptionsRemove}
                         error={subOptionsError?.[sub.subOptionsId]}
+                        disabled={disabled}
                     />
                 ))}
                 {!value.subOptions?.length && (
@@ -168,8 +168,8 @@ export default function CustomOptionInput(props: Props) {
                     name="addSubOption"
                     className={styles.addButton}
                     icons={<MdAdd />}
-                    onClick={handlesubOptionsAdd}
-                    disabled={value.subOptions && value.subOptions.length >= 6}
+                    onClick={handleSubOptionsAdd}
+                    disabled={disabled || (value.subOptions && value.subOptions.length >= 6)}
                 >
                     Add Sub Options
                 </Button>

manager-dashboard/app/views/NewTutorial/CustomOptionInput/index.tsx

@@ -16,11 +16,6 @@
         }
     }
 
-    .remove-button {
-        align-self: end;
-        width: fit-content;
-    }
-
     .add-button {
         width: fit-content;
     }

manager-dashboard/app/views/NewTutorial/CustomOptionInput/styles.css

@@ -6,10 +6,10 @@ import {
     getErrorObject,
 } from '@togglecorp/toggle-form';
 
-import { PartialBlocksType } from '#views/NewTutorial/utils';
 import FileInput from '#components/FileInput';
 import MarkdownEditor from '#components/MarkdownEditor';
 
+import { PartialBlocksType } from '../../utils';
 // import styles from './styles.css';
 
 type PartialBlockType = NonNullable<PartialBlocksType>[number];
@@ -50,7 +50,7 @@ export default function Block(props: Props) {
                     name={'imageFile' as const}
                     value={value?.imageFile}
                     onChange={onBlockChange}
-                    label={`Block ${index + 1}`}
+                    label={`Block #${index + 1}`}
                     hint="Make sure you have the rights to
                     use this image. It should end with  .jpg or .png."
                     accept="image/png, image/jpeg"

manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { PartialTutorialFormType } from '#views/NewTutorial/utils';
 import MobilePreview from '#components/MobilePreview';
 import Preview from '#components/Preview';
+import MarkdownPreview from '#components/MarkdownPreview';
 
+import { PartialTutorialFormType } from '../../utils';
 import styles from './styles.css';
-import MarkdownPreview from '#components/MarkdownPreview';
 
 interface Props {
     value: NonNullable<PartialTutorialFormType['informationPages']>[number];