[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.
2026-09-03 12:50:29 +02:00 · 2024-08-21 14:00:29 +05:30
parent dfd5a228e9
commit fbcf15737e
15 changed files with 115 additions and 78 deletions
--- 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>
    </>
--- 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
--- 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}
          />
--- 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>
--- 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(
--- 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}
--- 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}
--- 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>
--- 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}.</>}
    </>
  );
 });
--- 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>.
        </>
      )}
    </>
--- 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>.
        </>
      )}
    </>
--- 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}.</>}
    </>
  );
 });
--- 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>.
+        </>
      )}
    </>
  );
--- 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">
--- 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,
  },