Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WEB-2629] chore: workspace draft issue ux copy updated #5825

Merged
merged 3 commits into from
Oct 14, 2024
Merged

[WEB-2629] chore: workspace draft issue ux copy updated #5825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b814d8
chore: workspace draft issue ux copy updated
anmolsinghbhatia Oct 14, 2024
061cf37
fix: merge conflict
anmolsinghbhatia Oct 14, 2024
baa49bc
chore: workspace draft issue ux copy updated
anmolsinghbhatia Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions web/app/[workspaceSlug]/(projects)/drafts/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const WorkspaceDraftHeader: FC = observer(() => {
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
link={<BreadcrumbLink label={`Draft`} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />}
link={<BreadcrumbLink label={`Drafts`} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />}
/>
</Breadcrumbs>
{paginationInfo?.total_count && paginationInfo?.total_count > 0 ? (
Expand All @@ -60,7 +60,7 @@ export const WorkspaceDraftHeader: FC = observer(() => {
onClick={() => setIsDraftIssueModalOpen(true)}
disabled={!isAuthorizedUser}
>
Draft <span className="hidden sm:inline-block">issue</span>
Draft<span className="hidden sm:inline-block"> an issue</span>
</Button>
</Header.RightItem>
</Header>
Expand Down
8 changes: 5 additions & 3 deletions web/core/components/issues/confirm-issue-discard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,12 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
Draft Issue
Save this draft?
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-custom-text-200">Would you like to save this issue in drafts?</p>
<p className="text-sm text-custom-text-200">
You can save this issue to Drafts so you can come back to it later.{" "}
</p>
</div>
</div>
</div>
Expand All @@ -80,7 +82,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
Cancel
</Button>
<Button variant="primary" size="sm" onClick={handleDeletion} loading={isLoading}>
{isLoading ? "Saving" : "Save draft"}
{isLoading ? "Saving" : "Save to Drafts"}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Inconsistent Capitalization of "Drafts" in User-Facing Text

The shell script results indicate that "Drafts" is used inconsistently across various user-facing components and messages. To ensure a uniform user experience, please update all instances of "draft" to "Drafts" in user interface elements and documentation.

  • Update button texts, messages, and labels to use "Drafts" consistently.
  • Review and adjust dialog titles and descriptions to match the new capitalization.
🔗 Analysis chain

Consistent button text

The change from "Save draft" to "Save to Drafts" aligns well with the updated dialog title and description. It clearly indicates the action and destination of the draft.

To ensure consistency across the application, please verify that "Drafts" is capitalized in other relevant components and documentation. Run the following script to check for inconsistencies:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for inconsistent usage of "drafts" vs "Drafts"

# Test: Search for variations of "draft" or "drafts" (case-insensitive)
rg -i '\bdrafts?\b' --type tsx --type ts

Length of output: 70

Script:

#!/bin/bash
# Description: Check for inconsistent usage of "drafts" vs "Drafts"

# Test: Search for variations of "draft" or "drafts" (case-insensitive) in .ts and .tsx files
rg -i '\bdrafts?\b' -g '*.ts' -g '*.tsx'

Length of output: 16708

</Button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion web/core/components/issues/issue-modal/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: `${is_draft_issue ? "Draft issue" : "Issue"} created successfully.`,
message: `${is_draft_issue ? "Draft created." : "Issue created successfully."} `,
actionItems: !is_draft_issue && response?.project_id && (
<CreateIssueToastActionItems
workspaceSlug={workspaceSlug.toString()}
Expand Down
2 changes: 1 addition & 1 deletion web/core/components/issues/issue-modal/draft-issue-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "Draft Issue created successfully.",
message: "Draft created.",
});
captureIssueEvent({
eventName: "Draft issue created",
Expand Down
6 changes: 3 additions & 3 deletions web/core/components/issues/issue-modal/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
<form onSubmit={handleSubmit((data) => handleFormSubmit(data))}>
<div className="p-5">
<h3 className="text-xl font-medium text-custom-text-200 pb-2">
{data?.id ? "Update" : isDraft ? "Create draft" : "Create new"} issue
{data?.id ? "Update" : isDraft ? "Create a draft" : "Create new issue"}
</h3>
{/* Disable project selection if editing an issue */}
<div className="flex items-center pt-2 pb-4 gap-x-1">
Expand Down Expand Up @@ -422,8 +422,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
: isSubmitting
? "Creating"
: isDraft
? "Create draft issue"
: "Create"}
? "Save to Drafts"
: "Save"}
</Button>
{moveToIssue && (
<Button
Expand Down
19 changes: 5 additions & 14 deletions web/core/components/issues/workspace-draft/delete-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,22 @@
// constants
import { PROJECT_ERROR_MESSAGES } from "@/constants/project";
// hooks
import { useIssues, useProject, useUser, useUserPermissions } from "@/hooks/store";
import { useIssues, useUser, useUserPermissions } from "@/hooks/store";
import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
type Props = {
isOpen: boolean;
handleClose: () => void;
dataId?: string | null | undefined;
data?: TWorkspaceDraftIssue;
isSubIssue?: boolean;
onSubmit?: () => Promise<void>;
};

export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
const { dataId, data, isOpen, handleClose, isSubIssue = false, onSubmit } = props;
const { dataId, data, isOpen, handleClose, onSubmit } = props;
// states
const [isDeleting, setIsDeleting] = useState(false);
// store hooks
const { issueMap } = useIssues();
const { getProjectById } = useProject();
const { allowPermissions } = useUserPermissions();

const { data: currentUser } = useUser();
Expand All @@ -41,7 +39,6 @@

// derived values
const issue = data ? data : issueMap[dataId!];
const projectDetails = getProjectById(issue?.project_id);
const isIssueCreator = issue?.created_by === currentUser?.id;
const authorized = isIssueCreator || canPerformProjectAdminActions;

Expand All @@ -68,7 +65,7 @@
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: `${isSubIssue ? "Sub-issue" : "Issue"} deleted successfully`,
message: `draft deleted.`,
});
onClose();
})
Expand All @@ -92,14 +89,8 @@
handleSubmit={handleIssueDelete}
isSubmitting={isDeleting}
isOpen={isOpen}
title="Delete issue"
content={
<>
Are you sure you want to delete issue{" "}
<span className="break-words font-medium text-custom-text-100">{projectDetails?.identifier}</span>
{""}? All of the data related to the issue will be permanently removed. This action cannot be undone.
</>
}
title="Delete draft"
content={<>Are you sure you want to delete this draft? This can't be undone.</>}

Check failure on line 93 in web/core/components/issues/workspace-draft/delete-modal.tsx

View workflow job for this annotation

GitHub Actions / lint-web 

`'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`
Comment on lines +92 to +93
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

LGTM: Improved clarity in modal title and content

The updates to the modal title and content accurately reflect the action of deleting a draft, which is consistent with the component's new focus. The content clearly communicates the permanence of the action, which is important for user awareness.

There's a minor issue with the apostrophe in "can't" as flagged by the static analysis tool. To resolve this, please apply the following change:

-      content={<>Are you sure you want to delete this draft? This can't be undone.</>}
+      content={<>Are you sure you want to delete this draft? This can&apos;t be undone.</>}

This change will ensure proper rendering of the apostrophe across different environments.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
title="Delete draft"
content={<>Are you sure you want to delete this draft? This can't be undone.</>}
title="Delete draft"
content={<>Are you sure you want to delete this draft? This can&apos;t be undone.</>}
🧰 Tools
🪛 GitHub Check: lint-web

[failure] 93-93:
' can be escaped with &apos;, &lsquo;, &#39;, &rsquo;

/>
);
};
2 changes: 1 addition & 1 deletion web/core/components/issues/workspace-draft/draft-issue-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
},
{
key: "move-to-issues",
title: "Move to issues",
title: "Move to project",
icon: SquareStackIcon,
action: () => {
setMoveToIssue(true);
Expand Down
6 changes: 3 additions & 3 deletions web/core/constants/empty-state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -761,11 +761,11 @@ const emptyStateDetails = {
},
[EmptyStateType.WORKSPACE_DRAFT_ISSUES]: {
key: EmptyStateType.WORKSPACE_DRAFT_ISSUES,
title: "No Draft Issues Yet",
description: "There are no draft issues in your workspace right now. Begin by adding your first one.",
title: "Half-written issues, and soon, comments will show up here.",
description: "To try this out, start adding an issue and leave it mid-way or create your first draft below. 😉",
path: "/empty-state/workspace-draft/issue",
primaryButton: {
text: "Create draft issue",
text: "Create your first draft",
},
accessType: "workspace",
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
Expand Down
Loading