style: attributes empty state design

web/components/custom-attributes/attribute-display/checkbox.tsx

@@ -11,7 +11,7 @@ export const CustomCheckboxAttribute: React.FC<Props & { value: boolean }> = ({
   const handleUpdateCheckbox = (val: boolean | string) => onChange(val.toString());
 
   return (
-    <>
+    <div className="bg-custom-background-80 flex items-center gap-2 rounded px-2.5 py-0.5 text-xs">
       {attributeDetails.extra_settings.representation === "toggle_switch" ? (
         <ToggleSwitch value={value ?? false} onChange={handleUpdateCheckbox} />
       ) : (
@@ -23,6 +23,7 @@ export const CustomCheckboxAttribute: React.FC<Props & { value: boolean }> = ({
           />
         </div>
       )}
-    </>
+      <span>{attributeDetails.display_name}</span>
+    </div>
   );
 };

web/components/custom-attributes/attribute-display/email.tsx

@@ -45,8 +45,11 @@ export const CustomEmailAttribute: React.FC<Props & { value: string | undefined
   return (
     <div className="flex-shrink-0">
       {!isEditing && (
-        <div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
+        <div
-          {value ?? "Empty"}
+          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
+          onClick={() => setIsEditing(true)}
+        >
+          {value && value !== "" ? value : `Enter ${attributeDetails.display_name}`}
         </div>
       )}
       {isEditing && (

web/components/custom-attributes/attribute-display/file.tsx

@@ -107,20 +107,20 @@ export const CustomFileAttribute: React.FC<Props & { value: string | undefined }
       )}
       <div
         {...getRootProps()}
-        className={`flex items-center justify-center border-2 border-dashed text-custom-primary bg-custom-primary/5 text-xs rounded-md px-2.5 py-0.5 cursor-pointer ${
+        className={`flex items-center justify-center bg-custom-background-80 text-xs rounded px-2.5 py-0.5 cursor-pointer ${
-          isDragActive ? "bg-custom-primary/10 border-custom-primary" : "border-custom-border-200"
+          isDragActive ? "bg-custom-primary-100/10" : ""
         } ${isDragReject ? "bg-red-500/10" : ""}`}
       >
         <input {...getInputProps()} />
-        <span className="flex items-center gap-2">
+        <span className="">
           {isDragActive ? (
             <p>Drop here...</p>
           ) : fileError ? (
-            <p className="text-center text-red-500">{fileError}</p>
+            <p className="text-red-500">{fileError}</p>
           ) : isUploading ? (
-            <p className="text-center">Uploading...</p>
+            <p>Uploading...</p>
           ) : (
-            <p className="text-center">Upload {value && value !== "" ? "new " : ""}file</p>
+            <p>Upload {value && value !== "" ? "new " : ""}file</p>
           )}
         </span>
       </div>

web/components/custom-attributes/attribute-display/number.tsx

@@ -83,7 +83,12 @@ export const CustomNumberAttribute: React.FC<Props & { value: number | undefined
               )}
             </>
           ) : (
-            "Empty"
+            <div
+              className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
+              onClick={() => setIsEditing(true)}
+            >
+              {value ?? `Enter ${attributeDetails.display_name}`}
+            </div>
           )}
         </div>
       )}

web/components/custom-attributes/attribute-display/select.tsx

@@ -69,26 +69,52 @@ export const CustomSelectAttribute: React.FC<
   if (multiple) comboboxProps.multiple = true;
 
   return (
-    <Combobox as="div" className="flex-shrink-0 text-left" {...comboboxProps}>
+    <Combobox as="div" className="flex-shrink-0 text-left flex items-center" {...comboboxProps}>
       {({ open }: { open: boolean }) => {
         if (open) handleOnOpen();
 
         return (
           <>
-            <Combobox.Button
+            <Combobox.Button ref={dropdownButtonRef}>
-              ref={dropdownButtonRef}
+              {value ? (
-              className={`flex items-center text-xs rounded px-2.5 py-0.5 truncate w-min max-w-full text-left ${
+                Array.isArray(value) ? (
-                selectedOption ? "" : "bg-custom-background-80"
+                  value.length > 0 ? (
-              }`}
+                    <div className="flex items-center gap-1 flex-wrap">
+                      {value.map((v) => {
+                        const optionDetails = options.find((o) => o.id === v);
+
+                        return (
+                          <span
+                            className="px-2.5 py-0.5 rounded text-xs"
                             style={{
-                backgroundColor: `${selectedOption?.color}40`,
+                              backgroundColor: `${optionDetails?.color}40`,
                             }}
                           >
-              {Array.isArray(value)
+                            {optionDetails?.display_name}
-                ? value.length > 0
+                          </span>
-                  ? value.map((v) => options.find((o) => o.id === v)?.display_name).join(", ")
+                        );
-                  : `Select ${attributeDetails.display_name}`
+                      })}
-                : value}
+                    </div>
+                  ) : (
+                    <div className="text-xs px-2.5 py-0.5 rounded bg-custom-background-80">
+                      Select {attributeDetails.display_name}
+                    </div>
+                  )
+                ) : (
+                  <span
+                    className="px-2.5 py-0.5 rounded text-xs"
+                    style={{
+                      backgroundColor: `${options.find((o) => o.id === value)?.color}40`,
+                    }}
+                  >
+                    {options.find((o) => o.id === value)?.display_name}
+                  </span>
+                )
+              ) : (
+                <div className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded">
+                  Select {attributeDetails.display_name}
+                </div>
+              )}
             </Combobox.Button>
             <Transition
               as={React.Fragment}

web/components/custom-attributes/attribute-display/text.tsx

@@ -45,8 +45,11 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
   return (
     <div className="flex-shrink-0">
       {!isEditing && (
-        <div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
+        <div
-          {value ?? "Empty"}
+          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
+          onClick={() => setIsEditing(true)}
+        >
+          {value && value !== "" ? value : `Enter ${attributeDetails.display_name}`}
         </div>
       )}
       {isEditing && (

web/components/custom-attributes/attribute-display/url.tsx

@@ -43,8 +43,11 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
   return (
     <div className="flex-shrink-0">
       {!isEditing && (
-        <div className="cursor-pointer text-xs truncate" onClick={() => setIsEditing(true)}>
+        <div
-          {value ?? "Empty"}
+          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
+          onClick={() => setIsEditing(true)}
+        >
+          {value && value !== "" ? value : `Enter ${attributeDetails.display_name}`}
         </div>
       )}
       {isEditing && (

web/components/custom-attributes/attribute-forms/checkbox-attribute-form.tsx

@@ -41,7 +41,7 @@ export const CheckboxAttributeForm: React.FC<FormComponentProps> = ({ control })
             <input
               type="radio"
               name="default_value"
-              value="checked"
+              value="true"
               id="checked"
               className="scale-75"
               defaultChecked
@@ -53,7 +53,7 @@ export const CheckboxAttributeForm: React.FC<FormComponentProps> = ({ control })
             <input
               type="radio"
               name="default_value"
-              value="unchecked"
+              value="false"
               id="unchecked"
               className="scale-75"
             />

web/components/custom-attributes/attributes-list/issue-modal-attributes-list.tsx

@@ -23,7 +23,7 @@ import { Loader } from "components/ui";
 type Props = {
   entityId: string;
   issueId: string;
-  onChange: (attributeId: string, val: string[]) => Promise<void>;
+  onChange: (attributeId: string, val: string[]) => void;
   projectId: string;
   values: { [key: string]: string[] };
 };
@@ -65,7 +65,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
                     issueId={issueId}
                     onChange={(val: string) => onChange(attribute.id, [val])}
                     projectId={projectId}
-                    value={attribute.default_value === "checked" ? true : false}
+                    value={values[attribute.id]?.[0] === "true" ? true : false}
                   />
                 )}
                 {attribute.type === "datetime" && (
@@ -75,7 +75,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
                     onChange={(val: string) => onChange(attribute.id, [val])}
                     projectId={projectId}
                     value={
-                      attribute.default_value !== "" ? new Date(attribute.default_value) : undefined
+                      values[attribute.id]?.[0] ? new Date(values[attribute.id]?.[0]) : undefined
                     }
                   />
                 )}
@@ -85,7 +85,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
                     issueId={issueId}
                     onChange={(val: string) => onChange(attribute.id, [val])}
                     projectId={projectId}
-                    value={attribute.default_value}
+                    value={values[attribute.id]?.[0]}
                   />
                 )}
                 {attribute.type === "file" && (
@@ -103,7 +103,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
                     issueId={issueId}
                     onChange={(val: string[]) => onChange(attribute.id, val)}
                     projectId={projectId}
-                    value={[]}
+                    value={values[attribute.id] ?? []}
                     multiple
                   />
                 )}
@@ -114,9 +114,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
                     onChange={(val: string) => onChange(attribute.id, [val])}
                     projectId={projectId}
                     value={
-                      attribute.default_value !== ""
+                      values[attribute.id]?.[0] ? parseInt(values[attribute.id]?.[0]) : undefined
-                        ? parseInt(attribute.default_value, 10)
-                        : undefined
                     }
                   />
                 )}
@@ -126,7 +124,7 @@ export const IssueModalCustomAttributesList: React.FC<Props> = observer(
                     issueId={issueId}
                     onChange={(val: string) => onChange(attribute.id, [val])}
                     projectId={projectId}
-                    value={attribute.default_value !== "" ? attribute.default_value : undefined}
+                    value={values[attribute.id]?.[0]}
                   />
                 )}
                 {attribute.type === "select" && (

web/components/issues/form.tsx

@@ -65,6 +65,8 @@ export interface IssueFormProps {
   user: ICurrentUserResponse | undefined;
   setIsConfirmDiscardOpen: React.Dispatch<React.SetStateAction<boolean>>;
   handleFormDirty: (payload: Partial<IIssue> | null) => void;
+  customAttributesList: { [key: string]: string[] };
+  handleCustomAttributesChange: (attributeId: string, val: string[]) => void;
   fieldsToShow: (
     | "project"
     | "name"
@@ -95,6 +97,8 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
     user,
     fieldsToShow,
     handleFormDirty,
+    customAttributesList,
+    handleCustomAttributesChange,
   } = props;
 
   const [stateModal, setStateModal] = useState(false);
@@ -105,7 +109,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
 
-  const [attributesList, setAttributesList] = useState<{ [key: string]: string[] }>({});
   const { setValue: setValueInLocalStorage } = useLocalStorage<any>("draftedIssue", null);
 
   const editorRef = useRef<any>(null);
@@ -115,9 +118,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
 
   const { setToastAlert } = useToast();
 
-  const { customAttributeValues: customAttributeValuesStore } = useMobxStore();
-  const { createAttributeValue } = customAttributeValuesStore;
-
   const {
     register,
     formState: { errors, isSubmitting, isDirty },
@@ -157,10 +157,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
 
     if (!workspaceSlug) return;
 
-    await createAttributeValue(workspaceSlug.toString(), projectId, watch("id"), {
-      issue_properties: attributesList,
-    });
-
     setGptAssistantModal(false);
 
     reset({
@@ -251,8 +247,6 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
   const maxDate = targetDate ? new Date(targetDate) : null;
   maxDate?.setDate(maxDate.getDate());
 
-  console.log("attributesList", attributesList);
-
   return (
     <>
       {projectId && (
@@ -579,16 +573,9 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                   <IssueModalCustomAttributesList
                     entityId={watch("entity") ?? ""}
                     issueId={watch("id") ?? ""}
-                    onChange={async (attributeId: string, val: string[]) => {
+                    onChange={handleCustomAttributesChange}
-                      console.log(val);
-
-                      setAttributesList((prev) => ({
-                        ...prev,
-                        [attributeId]: val,
-                      }));
-                    }}
                     projectId={projectId}
-                    values={attributesList}
+                    values={customAttributesList}
                   />
                 )}
               </div>

web/components/issues/modal.tsx

@@ -39,6 +39,8 @@ import {
 } from "constants/fetch-keys";
 // constants
 import { INBOX_ISSUE_SOURCE } from "constants/inbox";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 export interface IssuesModalProps {
   data?: IIssue | null;
@@ -50,6 +52,7 @@ export interface IssuesModalProps {
     | "project"
     | "name"
     | "description"
+    | "entity"
     | "state"
     | "priority"
     | "assignee"
@@ -63,7 +66,8 @@ export interface IssuesModalProps {
   onSubmit?: (data: Partial<IIssue>) => Promise<void>;
 }
 
-export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
+export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
+  ({
     data,
     handleClose,
     isOpen,
@@ -71,16 +75,23 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     prePopulateData,
     fieldsToShow = ["all"],
     onSubmit,
-}) => {
+  }) => {
     // states
     const [createMore, setCreateMore] = useState(false);
     const [formDirtyState, setFormDirtyState] = useState<any>(null);
     const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
     const [activeProject, setActiveProject] = useState<string | null>(null);
 
+    const [customAttributesList, setCustomAttributesList] = useState<{ [key: string]: string[] }>(
+      {}
+    );
+
     const router = useRouter();
     const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
 
+    const { customAttributeValues: customAttributeValuesStore } = useMobxStore();
+    const { createAttributeValue } = customAttributeValuesStore;
+
     const { displayFilters, params } = useIssuesView();
     const { params: calendarParams } = useCalendarIssuesView();
     const { ...viewGanttParams } = params;
@@ -108,6 +119,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       } else {
         handleClose();
         setActiveProject(null);
+        setCustomAttributesList({});
       }
     };
 
@@ -253,11 +265,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     const createIssue = async (payload: Partial<IIssue>) => {
       if (!workspaceSlug || !activeProject) return;
 
+      let issueToReturn: Partial<IIssue> = {};
+
       if (inboxId) await addIssueToInbox(payload);
       else
         await issuesService
           .createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
           .then(async (res) => {
+            issueToReturn = res;
             mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
             if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
             if (payload.module && payload.module !== "")
@@ -292,6 +307,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           });
 
       if (!createMore) onDiscardClose();
+
+      return issueToReturn;
     };
 
     const createDraftIssue = async () => {
@@ -335,9 +352,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     const updateIssue = async (payload: Partial<IIssue>) => {
       if (!user) return;
 
+      let issueToReturn: Partial<IIssue> = {};
+
       await issuesService
         .patchIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload, user)
         .then((res) => {
+          issueToReturn = res;
+
           if (isUpdatingSingleIssue) {
             mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
           } else {
@@ -365,6 +386,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
             message: "Issue could not be updated. Please try again.",
           });
         });
+
+      return issueToReturn;
     };
 
     const handleFormSubmit = async (formData: Partial<IIssue>) => {
@@ -378,8 +401,15 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         description_html: formData.description_html ?? "<p></p>",
       };
 
-    if (!data) await createIssue(payload);
+      let issueResponse: Partial<IIssue> | undefined = {};
-    else await updateIssue(payload);
+
+      if (!data) issueResponse = await createIssue(payload);
+      else issueResponse = await updateIssue(payload);
+
+      if (issueResponse && issueResponse.id && Object.keys(customAttributesList).length > 0)
+        await createAttributeValue(workspaceSlug.toString(), activeProject, issueResponse.id, {
+          issue_properties: customAttributesList,
+        });
 
       if (onSubmit) await onSubmit(payload);
     };
@@ -438,6 +468,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
                       setActiveProject={setActiveProject}
                       status={data ? true : false}
                       user={user}
+                      customAttributesList={customAttributesList}
+                      handleCustomAttributesChange={(attributeId: string, val: string[]) => {
+                        setCustomAttributesList((prev) => ({
+                          ...prev,
+                          [attributeId]: val,
+                        }));
+                      }}
                       fieldsToShow={fieldsToShow}
                       handleFormDirty={handleFormDirty}
                     />
@@ -449,4 +486,5 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         </Transition.Root>
       </>
     );
-};
+  }
+);

web/constants/custom-attributes.ts

@@ -24,7 +24,7 @@ export const CUSTOM_ATTRIBUTES_LIST: {
 } = {
   checkbox: {
     defaultFormValues: {
-      default_value: "checked",
+      default_value: "true",
       display_name: "",
       extra_settings: {
         representation: "check",