From fbcf15737e48ca04cc735551a2df752fce3e5fcf Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 21 Aug 2024 14:00:29 +0530
Subject: [PATCH] [WEB-1185] Issue types updates (#887)

* chore: admin role validation for issue types settings.

* chore: reset `is_required`, if property type is switched to `read_only`.

* chore: trim option name and fix cursor behaviour in options.

* chore: fix issue property description info icon.

* fix: property title overflow.

* chore: issue properties UI and UX copy updates.

* chore: remove option to disable the property if it's already disabled while deleting.

* chore: update lodash import.
---
 .../[projectId]/settings/issue-types/page.tsx | 10 ++--
 .../properties/attributes/options/option.tsx  | 12 +++--
 .../properties/attributes/text.tsx            |  3 ++
 .../properties/delete-confirmation-modal.tsx  | 27 +++++-----
 .../properties/dropdowns/property-title.tsx   |  6 +--
 .../properties/property-list-item.tsx         |  1 +
 .../issue-types/properties/quick-actions.tsx  |  3 ++
 .../issue-properties-activity/boolean.tsx     |  5 +-
 .../issue-properties-activity/date.tsx        | 16 +++---
 .../issue-properties-activity/dropdown.tsx    | 17 ++++---
 .../issue-properties-activity/member.tsx      | 12 +++--
 .../issue-properties-activity/number.tsx      | 18 ++++---
 .../issue-properties-activity/text.tsx        | 11 ++--
 .../issues/worklog/activity/root.tsx          | 50 +++++++++----------
 web/ee/constants/project/settings/tabs.ts     |  2 +-
 15 files changed, 115 insertions(+), 78 deletions(-)

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/issue-types/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/issue-types/page.tsx
index ec8fd3236a..860c562378 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/issue-types/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/issue-types/page.tsx
@@ -2,26 +2,30 @@
 
 import { observer } from "mobx-react";
 // components
+import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 // hooks
-import { EUserProjectRoles } from "@/constants/project";
 import { useProject, useUser } from "@/hooks/store";
 import { IssueTypesRoot } from "@/plane-web/components/issue-types";
 
 const IssueTypesSettingsPage = observer(() => {
   // store hooks
   const {
+    canPerformProjectAdminActions,
     membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails } = useProject();
   // derived values
-  const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Issue Types` : undefined;
 
+  if (currentProjectRole && !canPerformProjectAdminActions) {
+    return <NotAuthorizedView section="settings" isProjectView />;
+  }
+
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className={`w-full h-full overflow-hidden py-8 pr-4 ${isAdmin ? "" : "pointer-events-none opacity-60"}`}>
+      <div className={`w-full h-full overflow-hidden py-8 pr-4`}>
         <IssueTypesRoot />
       </div>
     </>
diff --git a/web/ee/components/issue-types/properties/attributes/options/option.tsx b/web/ee/components/issue-types/properties/attributes/options/option.tsx
index 49a36f3cb6..52f7473ef6 100644
--- a/web/ee/components/issue-types/properties/attributes/options/option.tsx
+++ b/web/ee/components/issue-types/properties/attributes/options/option.tsx
@@ -1,4 +1,5 @@
 import { FC, useEffect, useState } from "react";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
 import { Info } from "lucide-react";
 // ui
@@ -45,12 +46,17 @@ export const IssuePropertyOptionItem: FC<TIssuePropertyOptionItem> = observer((p
 
   // handle create/ update operation
   const handleCreateUpdate = async () => {
+    // return if no change in data
+    if (isEqual(propertyOptionCreateData.name, optionData.name)) return;
+    // trim option name
+    const optionDataToUpdate = { ...optionData, name: optionData.name?.trim() };
+    setOptionData(optionDataToUpdate);
     // return if option name is same as previous or empty
-    if (!optionData.name) return;
+    if (!optionDataToUpdate.name) return;
     // check for duplicate option name
-    if (checkForDuplicate({ identifier: optionData.id ?? key, value: optionData.name })) return;
+    if (checkForDuplicate({ identifier: optionDataToUpdate.id ?? key, value: optionDataToUpdate.name })) return;
     // handle option data update
-    updateOptionData({ key, ...optionData });
+    updateOptionData({ key, ...optionDataToUpdate });
   };
 
   // handle changes in option local data
diff --git a/web/ee/components/issue-types/properties/attributes/text.tsx b/web/ee/components/issue-types/properties/attributes/text.tsx
index 432c65b3bb..fce7eb1f4e 100644
--- a/web/ee/components/issue-types/properties/attributes/text.tsx
+++ b/web/ee/components/issue-types/properties/attributes/text.tsx
@@ -39,6 +39,9 @@ export const TextAttributes = observer((props: TTextAttributesProps) => {
             onChange={(value) => {
               onTextDetailChange("settings", value as TIssueProperty<EIssuePropertyType.TEXT>["settings"]);
               onTextDetailChange("default_value", []);
+              if (value?.display_format === "readonly") {
+                onTextDetailChange("is_required", false);
+              }
             }}
             isDisabled={!configurations.allowedEditingModes.includes(currentOperationMode) && isAnyIssueAttached}
           />
diff --git a/web/ee/components/issue-types/properties/delete-confirmation-modal.tsx b/web/ee/components/issue-types/properties/delete-confirmation-modal.tsx
index 30570b0acc..d9f9ede8bf 100644
--- a/web/ee/components/issue-types/properties/delete-confirmation-modal.tsx
+++ b/web/ee/components/issue-types/properties/delete-confirmation-modal.tsx
@@ -8,13 +8,14 @@ import { cn } from "@/helpers/common.helper";
 
 type TProps = {
   isOpen: boolean;
+  isDisabledAlready: boolean;
   onClose: () => void;
   onDisable: () => Promise<void>;
   onDelete: () => Promise<void>;
 };
 
 export const DeleteConfirmationModal: React.FC<TProps> = observer((props) => {
-  const { isOpen, onClose, onDisable, onDelete } = props;
+  const { isOpen, isDisabledAlready, onClose, onDisable, onDelete } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
@@ -50,7 +51,7 @@ export const DeleteConfirmationModal: React.FC<TProps> = observer((props) => {
           <h3 className="text-lg font-medium">Delete this property</h3>
           <div className="py-1 pb-4 text-center sm:text-left text-sm text-custom-text-200">
             <p>Deletion of properties may lead to loss of existing data.</p>
-            <p>Do you want to disable the property instead?</p>
+            {!isDisabledAlready && <p>Do you want to disable the property instead?</p>}
           </div>
         </div>
       </div>
@@ -59,15 +60,17 @@ export const DeleteConfirmationModal: React.FC<TProps> = observer((props) => {
           Cancel
         </Button>
         <div className="flex flex-col sm:flex-row gap-2 items-center sm:justify-end">
-          <Button
-            variant="outline-primary"
-            size="sm"
-            onClick={handleDisable}
-            className="w-full"
-            disabled={isSubmitting}
-          >
-            Yes, disable it
-          </Button>
+          {!isDisabledAlready && (
+            <Button
+              variant="outline-primary"
+              size="sm"
+              onClick={handleDisable}
+              className="w-full"
+              disabled={isSubmitting}
+            >
+              Yes, disable it
+            </Button>
+          )}
           <Button
             variant="danger"
             size="sm"
@@ -76,7 +79,7 @@ export const DeleteConfirmationModal: React.FC<TProps> = observer((props) => {
             className="w-full"
             disabled={isSubmitting}
           >
-            No, delete it
+            {isDisabledAlready ? "Yes, delete it" : "No, delete it"}
           </Button>
         </div>
       </div>
diff --git a/web/ee/components/issue-types/properties/dropdowns/property-title.tsx b/web/ee/components/issue-types/properties/dropdowns/property-title.tsx
index b26c86e7de..aae6888ac9 100644
--- a/web/ee/components/issue-types/properties/dropdowns/property-title.tsx
+++ b/web/ee/components/issue-types/properties/dropdowns/property-title.tsx
@@ -39,7 +39,7 @@ export const PropertyTitleDropdown = observer((props: TPropertyTitleDropdownProp
         <span className="px-1 truncate">{propertyDetail.display_name ?? ""}</span>
         {propertyDetail.description && (
           <Tooltip tooltipContent={propertyDetail.description} position="right" disabled={!propertyDetail.description}>
-            <InfoIcon className="w-3 h-3 text-custom-text-300 cursor-pointer" />
+            <InfoIcon className="flex-shrink-0 w-3 h-3 text-custom-text-300 cursor-pointer" />
           </Tooltip>
         )}
       </div>
@@ -58,8 +58,8 @@ export const PropertyTitleDropdown = observer((props: TPropertyTitleDropdownProp
           )}
           ref={setReferenceElement}
         >
-          <span className="text-custom-text-200">{propertyDetail.display_name ?? ""}</span>
-          <ChevronDown className="h-3 w-3" aria-hidden="true" />
+          <span className="text-custom-text-200 truncate">{propertyDetail.display_name ?? ""}</span>
+          <ChevronDown className="flex-shrink-0 h-3 w-3" aria-hidden="true" />
         </button>
       </Popover.Button>
       {createPortal(
diff --git a/web/ee/components/issue-types/properties/property-list-item.tsx b/web/ee/components/issue-types/properties/property-list-item.tsx
index 7141917e32..cb4bd4cad5 100644
--- a/web/ee/components/issue-types/properties/property-list-item.tsx
+++ b/web/ee/components/issue-types/properties/property-list-item.tsx
@@ -419,6 +419,7 @@ export const IssuePropertyListItem = observer((props: TIssuePropertyListItem) =>
       <div className="relative w-16 whitespace-nowrap text-right text-sm font-medium">
         <IssuePropertyQuickActions
           currentOperationMode={issuePropertyOperationMode}
+          isPropertyDisabled={!issuePropertyData.is_active}
           isSubmitting={isSubmitting}
           onCreateUpdate={handleCreateUpdate}
           onDiscard={handleDiscard}
diff --git a/web/ee/components/issue-types/properties/quick-actions.tsx b/web/ee/components/issue-types/properties/quick-actions.tsx
index 1765b8978f..9e65d9ef1f 100644
--- a/web/ee/components/issue-types/properties/quick-actions.tsx
+++ b/web/ee/components/issue-types/properties/quick-actions.tsx
@@ -12,6 +12,7 @@ import { TOperationMode } from "@/plane-web/types";
 
 type TIssuePropertyQuickActions = {
   currentOperationMode: TOperationMode | null;
+  isPropertyDisabled: boolean;
   isSubmitting: boolean;
   onCreateUpdate: () => Promise<void>;
   onDiscard: () => void;
@@ -23,6 +24,7 @@ type TIssuePropertyQuickActions = {
 export const IssuePropertyQuickActions = observer((props: TIssuePropertyQuickActions) => {
   const {
     currentOperationMode,
+    isPropertyDisabled,
     isSubmitting,
     onCreateUpdate,
     onDiscard,
@@ -37,6 +39,7 @@ export const IssuePropertyQuickActions = observer((props: TIssuePropertyQuickAct
     <>
       <DeleteConfirmationModal
         isOpen={isDeleteModalOpen}
+        isDisabledAlready={isPropertyDisabled}
         onClose={() => setIsDeleteModalOpen(false)}
         onDisable={onDisable}
         onDelete={onDelete}
diff --git a/web/ee/components/issues/issue-details/issue-properties-activity/boolean.tsx b/web/ee/components/issues/issue-details/issue-properties-activity/boolean.tsx
index fdc8b06666..fd75377baa 100644
--- a/web/ee/components/issues/issue-details/issue-properties-activity/boolean.tsx
+++ b/web/ee/components/issues/issue-details/issue-properties-activity/boolean.tsx
@@ -12,14 +12,15 @@ export const IssueBooleanPropertyActivity: FC<TIssueAdditionalPropertiesActivity
   // derived values
   const activityDetail = getPropertyActivityById(activityId);
   const propertyDetail = useIssueProperty(issueTypeId, issuePropertyId);
-  const propertyName = propertyDetail?.display_name?.toLowerCase();
+  const propertyName = propertyDetail?.display_name;
 
   if (!activityDetail) return <></>;
   return (
     <>
       {activityDetail.new_value && (
         <>
-          {activityDetail.action === "created" ? "set" : "updated"} {propertyName} to{" "}
+          {activityDetail.action === "created" ? "set " : "updated "}
+          <span className="font-medium text-custom-text-100">{propertyName}</span> to{" "}
           <span className="font-medium text-custom-text-100">
             {activityDetail?.new_value === "true" ? "True" : "False"}.
           </span>
diff --git a/web/ee/components/issues/issue-details/issue-properties-activity/date.tsx b/web/ee/components/issues/issue-details/issue-properties-activity/date.tsx
index a204cd8feb..b88dc9b2d2 100644
--- a/web/ee/components/issues/issue-details/issue-properties-activity/date.tsx
+++ b/web/ee/components/issues/issue-details/issue-properties-activity/date.tsx
@@ -14,25 +14,29 @@ export const IssueDatePropertyActivity: FC<TIssueAdditionalPropertiesActivityIte
   // derived values
   const activityDetail = getPropertyActivityById(activityId);
   const propertyDetail = useIssueProperty(issueTypeId, issuePropertyId);
-  const propertyName = propertyDetail?.display_name?.toLowerCase();
+  const propertyName = propertyDetail?.display_name;
 
   if (!activityDetail) return <></>;
   return (
     <>
       {activityDetail.action === "created" && (
         <>
-          set the {propertyName} to{" "}
+          set <span className="font-medium text-custom-text-100">{propertyName}</span> to{" "}
           <span className="font-medium text-custom-text-100">{renderFormattedDate(activityDetail.new_value)}.</span>
         </>
       )}
       {activityDetail.action === "updated" && (
         <>
-          updated the {propertyName} from{" "}
-          <span className="font-medium text-custom-text-100">{renderFormattedDate(activityDetail.old_value)}</span> to{" "}
-          <span className="font-medium text-custom-text-100">{renderFormattedDate(activityDetail.new_value)}.</span>{" "}
+          changed <span className="font-medium text-custom-text-100">{propertyName}</span> to{" "}
+          <span className="font-medium text-custom-text-100">{renderFormattedDate(activityDetail.new_value)}</span> from{" "}
+          <span className="font-medium text-custom-text-100">{renderFormattedDate(activityDetail.old_value)}.</span>{" "}
+        </>
+      )}
+      {activityDetail.action === "deleted" && (
+        <>
+          removed <span className="font-medium text-custom-text-100">{propertyName}</span>.
         </>
       )}
-      {activityDetail.action === "deleted" && <>removed the {propertyName}.</>}
     </>
   );
 });
diff --git a/web/ee/components/issues/issue-details/issue-properties-activity/dropdown.tsx b/web/ee/components/issues/issue-details/issue-properties-activity/dropdown.tsx
index e7c3bd5f64..f60c33fd49 100644
--- a/web/ee/components/issues/issue-details/issue-properties-activity/dropdown.tsx
+++ b/web/ee/components/issues/issue-details/issue-properties-activity/dropdown.tsx
@@ -13,41 +13,42 @@ export const IssueDropdownPropertyActivity: FC<TIssueAdditionalPropertiesActivit
   // derived values
   const activityDetail = getPropertyActivityById(activityId);
   const propertyDetail = useIssueProperty(issueTypeId, issuePropertyId);
-  const propertyName = propertyDetail?.display_name?.toLowerCase();
+  const propertyName = propertyDetail?.display_name;
 
   if (!activityDetail) return <></>;
   return (
     <>
       {activityDetail.action === "created" && activityDetail.new_value ? (
         <>
-          added{" "}
+          selected{" "}
           <span className="font-medium text-custom-text-100">
             {issueProperty?.getPropertyOptionById(activityDetail?.new_value)?.name}
           </span>{" "}
-          to {propertyName}.
+          as value(s) for <span className="font-medium text-custom-text-100">{propertyName}</span>.
         </>
       ) : (
         activityDetail.action === "deleted" &&
         activityDetail.old_value && (
           <>
-            removed{" "}
+            deselected{" "}
             <span className="font-medium text-custom-text-100">
               {issueProperty?.getPropertyOptionById(activityDetail?.old_value)?.name}
             </span>{" "}
-            from {propertyName}.
+            from the previous selection in <span className="font-medium text-custom-text-100">{propertyName}</span>.
           </>
         )
       )}
       {activityDetail.action === "updated" && activityDetail.old_value && activityDetail.new_value && (
         <>
-          updated {propertyName} from{" "}
+          changed{" "}
           <span className="font-medium text-custom-text-100">
             {issueProperty?.getPropertyOptionById(activityDetail?.old_value)?.name}
           </span>{" "}
           to{" "}
           <span className="font-medium text-custom-text-100">
-            {issueProperty?.getPropertyOptionById(activityDetail?.new_value)?.name}.
-          </span>
+            {issueProperty?.getPropertyOptionById(activityDetail?.new_value)?.name}
+          </span>{" "}
+          in <span className="font-medium text-custom-text-100">{propertyName}</span>.
         </>
       )}
     </>
diff --git a/web/ee/components/issues/issue-details/issue-properties-activity/member.tsx b/web/ee/components/issues/issue-details/issue-properties-activity/member.tsx
index 76f0666370..5697e68cb8 100644
--- a/web/ee/components/issues/issue-details/issue-properties-activity/member.tsx
+++ b/web/ee/components/issues/issue-details/issue-properties-activity/member.tsx
@@ -21,7 +21,7 @@ export const IssueMemberPropertyActivity: FC<TIssueAdditionalPropertiesActivityI
   // derived values
   const activityDetail = getPropertyActivityById(activityId);
   const propertyDetail = useIssueProperty(issueTypeId, issuePropertyId);
-  const propertyName = propertyDetail?.display_name?.toLowerCase();
+  const propertyName = propertyDetail?.display_name;
   const workspaceDetail = activityDetail?.workspace ? getWorkspaceById(activityDetail.workspace) : null;
 
   const MemberDetail = ({ id }: TMemberDetail) => {
@@ -43,20 +43,22 @@ export const IssueMemberPropertyActivity: FC<TIssueAdditionalPropertiesActivityI
     <>
       {activityDetail.action === "created" && activityDetail.new_value ? (
         <>
-          added a new {propertyName} <MemberDetail id={activityDetail.new_value as string} />.
+          selected <MemberDetail id={activityDetail.new_value} /> as member(s) for{" "}
+          <span className="font-medium text-custom-text-100">{propertyName}</span>.
         </>
       ) : (
         activityDetail.action === "deleted" &&
         activityDetail.old_value && (
           <>
-            removed the {propertyName} <MemberDetail id={activityDetail.old_value} />.
+            deselected <MemberDetail id={activityDetail.old_value} /> from the previous selection in{" "}
+            <span className="font-medium text-custom-text-100">{propertyName}</span>.
           </>
         )
       )}
       {activityDetail.action === "updated" && activityDetail.old_value && activityDetail.new_value && (
         <>
-          updated {propertyName} from <MemberDetail id={activityDetail.old_value} /> to{" "}
-          <MemberDetail id={activityDetail.new_value} />.
+          changed <MemberDetail id={activityDetail.old_value} /> to <MemberDetail id={activityDetail.new_value} /> in{" "}
+          <span className="font-medium text-custom-text-100">{propertyName}</span>.
         </>
       )}
     </>
diff --git a/web/ee/components/issues/issue-details/issue-properties-activity/number.tsx b/web/ee/components/issues/issue-details/issue-properties-activity/number.tsx
index 25770dec55..59576c7482 100644
--- a/web/ee/components/issues/issue-details/issue-properties-activity/number.tsx
+++ b/web/ee/components/issues/issue-details/issue-properties-activity/number.tsx
@@ -12,24 +12,30 @@ export const IssueNumberPropertyActivity: FC<TIssueAdditionalPropertiesActivityI
   // derived values
   const activityDetail = getPropertyActivityById(activityId);
   const propertyDetail = useIssueProperty(issueTypeId, issuePropertyId);
-  const propertyName = propertyDetail?.display_name?.toLowerCase();
+  const propertyName = propertyDetail?.display_name;
 
   if (!activityDetail) return <></>;
   return (
     <>
       {activityDetail.action === "created" && (
         <>
-          set {propertyName} to <span className="font-medium text-custom-text-100">{activityDetail?.new_value}.</span>
+          set <span className="font-medium text-custom-text-100">{propertyName}</span> to{" "}
+          <span className="font-medium text-custom-text-100">{activityDetail?.new_value}.</span>
         </>
       )}
       {activityDetail.action === "updated" && (
         <>
-          updated {propertyName} from{" "}
-          <span className="font-medium text-custom-text-100">{activityDetail?.old_value}</span> to{" "}
-          <span className="font-medium text-custom-text-100">{activityDetail?.new_value}.</span>
+          changed <span className="font-medium text-custom-text-100">{activityDetail?.old_value}</span> to{" "}
+          <span className="font-medium text-custom-text-100">{activityDetail?.new_value}</span> in{" "}
+          <span className="font-medium text-custom-text-100">{propertyName}</span>.
+        </>
+      )}
+      {activityDetail.action === "deleted" && (
+        <>
+          removed <span className="font-medium text-custom-text-100">{activityDetail?.old_value}</span> from{" "}
+          <span className="font-medium text-custom-text-100">{propertyName}</span>.
         </>
       )}
-      {activityDetail.action === "deleted" && <>removed {propertyName}.</>}
     </>
   );
 });
diff --git a/web/ee/components/issues/issue-details/issue-properties-activity/text.tsx b/web/ee/components/issues/issue-details/issue-properties-activity/text.tsx
index 59e22d45a3..b38324285a 100644
--- a/web/ee/components/issues/issue-details/issue-properties-activity/text.tsx
+++ b/web/ee/components/issues/issue-details/issue-properties-activity/text.tsx
@@ -12,18 +12,21 @@ export const IssueTextPropertyActivity: FC<TIssueAdditionalPropertiesActivityIte
   // derived values
   const activityDetail = getPropertyActivityById(activityId);
   const propertyDetail = useIssueProperty(issueTypeId, issuePropertyId);
-  const propertyName = propertyDetail?.display_name?.toLowerCase();
+  const propertyName = propertyDetail?.display_name;
 
   if (!activityDetail) return <></>;
   return (
     <>
       {activityDetail.new_value ? (
         <>
-          {activityDetail.action === "created" ? "set " : "updated "}
-          {propertyName} to <span className="font-medium text-custom-text-100">{activityDetail?.new_value}.</span>
+          {activityDetail.action === "created" ? "set " : "changed "}
+          <span className="font-medium text-custom-text-100">{propertyName}</span> to{" "}
+          <span className="font-medium text-custom-text-100">{`"${activityDetail?.new_value}"`}.</span>
         </>
       ) : (
-        <>removed {propertyName}.</>
+        <>
+          cleared the previous text in <span className="font-medium text-custom-text-100">{propertyName}</span>.
+        </>
       )}
     </>
   );
diff --git a/web/ee/components/issues/worklog/activity/root.tsx b/web/ee/components/issues/worklog/activity/root.tsx
index 014dcb2dc6..7fc1b5491e 100644
--- a/web/ee/components/issues/worklog/activity/root.tsx
+++ b/web/ee/components/issues/worklog/activity/root.tsx
@@ -64,7 +64,9 @@ export const IssueActivityWorklog: FC<TIssueActivityWorklog> = observer((props)
   ];
 
   return (
-    <div className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}>
+    <div
+      className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`} ${!worklog?.description && "items-center"}`}
+    >
       <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
       <div className="flex-shrink-0 relative w-7 h-7 rounded-full flex justify-center items-center z-10 bg-gray-500 text-white border border-white uppercase font-medium">
         {currentUser?.member?.avatar && currentUser?.member?.avatar !== "" ? (
@@ -83,34 +85,32 @@ export const IssueActivityWorklog: FC<TIssueActivityWorklog> = observer((props)
           </>
         )}
         <div className="absolute top-2 left-4 w-5 h-5 rounded-full overflow-hidden flex justify-center items-center bg-custom-background-80">
-          <Timer className="w-3 h-3" color="#6b7280" />
+          <Timer className="w-3 h-3 text-custom-text-200" />
         </div>
       </div>
       <div className="w-full space-y-1.5">
-        <div className="w-full relative flex ">
-          <div className="w-full truncate space-y-1">
-            <div>
-              <div className="text-xs">
-                <Link
-                  href={`/${workspaceSlug}/profile/${currentUser?.member?.id}`}
-                  className="hover:underline text-custom-text-100 font-medium capitalize"
-                >
-                  {currentUser?.member?.display_name}
-                </Link>
-                <span className="text-custom-text-300 font-medium">{` logged `}</span>
-                <span className="text-custom-text-100 font-medium">{`${convertMinutesToHoursMinutesString(worklog?.duration || 0)}.`}</span>
-              </div>
-              {worklog.created_at && (
-                <span>
-                  <Tooltip
-                    isMobile={isMobile}
-                    tooltipContent={`${renderFormattedDate(worklog.created_at)}, ${renderFormattedTime(worklog.created_at)}`}
-                  >
-                    <div className="text-xs text-custom-text-200">{`${calculateTimeAgo(worklog.created_at)}`}</div>
-                  </Tooltip>
-                </span>
-              )}
+        <div className="w-full relative flex items-center">
+          <div className="flex w-full truncate gap-1">
+            <div className="text-xs">
+              <Link
+                href={`/${workspaceSlug}/profile/${currentUser?.member?.id}`}
+                className="hover:underline text-custom-text-100 font-medium capitalize"
+              >
+                {currentUser?.member?.display_name}
+              </Link>
+              <span className="text-custom-text-300 font-medium">{` logged `}</span>
+              <span className="text-custom-text-100 font-medium">{`${convertMinutesToHoursMinutesString(worklog?.duration || 0)}.`}</span>
             </div>
+            {worklog.created_at && (
+              <span>
+                <Tooltip
+                  isMobile={isMobile}
+                  tooltipContent={`${renderFormattedDate(worklog.created_at)}, ${renderFormattedTime(worklog.created_at)}`}
+                >
+                  <div className="text-xs text-custom-text-200">{`${calculateTimeAgo(worklog.created_at)}`}</div>
+                </Tooltip>
+              </span>
+            )}
           </div>
           <div className="flex-shrink-0 relative">
             <div className="absolute right-0 bottom-0">
diff --git a/web/ee/constants/project/settings/tabs.ts b/web/ee/constants/project/settings/tabs.ts
index 767dd38754..e670cc3f47 100644
--- a/web/ee/constants/project/settings/tabs.ts
+++ b/web/ee/constants/project/settings/tabs.ts
@@ -13,7 +13,7 @@ export const PROJECT_SETTINGS = {
     key: "issue-types",
     label: "Issue Types",
     href: `/settings/issue-types/`,
-    access: EUserProjectRoles.MEMBER,
+    access: EUserProjectRoles.ADMIN,
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/issue-types/`,
     Icon: SettingIcon,
   },