feat(platform): added workspace settings page

[Allan2000-Git]

User description

Description

1. This PR adds workspace settings page UI provided in the figma design with actual workspace details, but dummy billing data.
2. Integrated emoji picker react for npm package
3. Added delete workspace alert modal & delete functionality.

Fixes #697

Dependencies

emoji-picker-react

Future Improvements

Add edit functionality & get exact billing data

Mentions

@rajdip-b

Screenshots of relevant screens

https://www.loom.com/share/6a1092c5a86442ebb60445270532247a?sid=db0960e6-fa15-4bf2-a7bb-7b6d3090ce63

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

---

PR Type

Enhancement, Bug fix

---

Description

• Implemented Workspace Settings page UI with emoji picker.

  • Added functionality to update workspace name and icon.
  • Integrated emoji-picker-react for emoji selection.

• Added delete workspace functionality with confirmation dialog.

  • Prevented deletion if only one workspace exists.
  • Included validation for workspace name confirmation.

• Enhanced state management for workspaces using Jotai atoms.

• Updated dependencies to include emoji-picker-react.

---

Changes walkthrough 📝

	Relevant files
Enhancement	page.tsx Implement Workspace Settings page UI and functionality      apps/platform/src/app/(main)/(settings)/[workspace]/settings/page.tsx Added Workspace Settings page UI with emoji picker. Implemented workspace name and icon update functionality. Added delete workspace section with confirmation dialog. +141/-3  index.tsx Add confirmation dialog for workspace deletion                      apps/platform/src/components/dashboard/workspace/confirmDeleteWorkspace/index.tsx Added confirmation dialog for workspace deletion. Included validation for workspace name confirmation. Managed workspace deletion state and navigation. +119/-0  combobox.tsx Refactor workspace state management in Combobox                    apps/platform/src/components/ui/combobox.tsx Refactored to use Jotai atoms for workspace state. Removed redundant workspace state management logic. +5/-8      index.ts Add Jotai atoms for workspace state management                      apps/platform/src/store/index.ts Added Jotai atoms for all workspaces and delete workspace state. Enhanced state management for workspace-related actions. +5/-1
Dependencies	package.json Add emoji-picker-react dependency                                                apps/platform/package.json Added emoji-picker-react dependency for emoji picker functionality. +1/-0
Additional files	pnpm-lock.yaml +314/-157

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 697 - PR Code Verified Compliant requirements: • Create the UI for Workspace Settings page according to the Figma design Requires further human verification: • Verify that the implemented UI matches exactly with the Figma design

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Incorrect Toast Message The success toast message says "Environment workspace successfully" instead of something like "Workspace deleted successfully". This appears to be a copy-paste error. toast.success('Environment workspace successfully', { description: ( <p className="text-xs text-emerald-300"> The environment has been deleted. </p> ) }) Incomplete Implementation The handleSaveDetails function is empty, so clicking the "Save Details" button won't actually update the workspace name or icon despite UI suggesting it would. const handleSaveDetails = () => { // Logic to save the details goes here }; Input Value Issue The workspace name input uses selectedWorkspace?.name as value instead of updatedWorkspaceName, which means user input won't be reflected in the UI. <Input id="name" onChange={(e) => setUpdatedWorkspaceName(e.target.value)} placeholder="Workspace name" value={selectedWorkspace?.name} />

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix controlled input value The Input component uses value which makes it a controlled component, but it's initialized with selectedWorkspace?.name while state is tracked in updatedWorkspaceName. This creates a conflict where the input will always show the original name and ignore user edits. apps/platform/src/app/(main)/(settings)/[workspace]/settings/page.tsx [102-107] <Input id="name" onChange={(e) => setUpdatedWorkspaceName(e.target.value)} placeholder="Workspace name" -value={selectedWorkspace?.name} +value={updatedWorkspaceName} /> Apply this suggestion Suggestion importance[1-10]: 9 __ Why: This is a critical bug fix. The input is using selectedWorkspace?.name as its value instead of updatedWorkspaceName, which would prevent users from editing the workspace name as any typing would be immediately overwritten by the original value.	High
	Add missing default value The selectedWorkspaceAtom is initialized without a default value, which can cause runtime errors when the atom is accessed before being set. Since it's defined as potentially null, initialize it with null to ensure type safety. apps/platform/src/store/index.ts [19-21] export const selectedWorkspaceAtom = atom< (Workspace & { projects: number }) | null ->() +>(null) Apply this suggestion Suggestion importance[1-10]: 8 __ Why: This fixes a potential runtime error. The atom is defined as potentially null but initialized without a value, which could cause errors when accessed before being set. Adding null as the default value ensures type safety.	Medium
General	✅ Fix incorrect success message Suggestion Impact: The commit implemented part of the suggestion by changing the toast success message from 'Environment workspace successfully' to 'Workspace deleted successfully', but did not update the description text that still refers to 'environment' instead of 'workspace' code diff: - toast.success('Environment workspace successfully', { + toast.success('Workspace deleted successfully', { The success toast message is incomplete and confusing. It mentions "Environment workspace successfully" without a verb, and the description refers to an environment being deleted when it should be a workspace. apps/platform/src/components/dashboard/workspace/confirmDeleteWorkspace/index.tsx [47-53] -toast.success('Environment workspace successfully', { +toast.success('Workspace deleted successfully', { description: ( <p className="text-xs text-emerald-300"> - The environment has been deleted. + The workspace has been deleted. </p> ) }) [Suggestion has been applied] Suggestion importance[1-10]: 7 __ Why: The toast message contains incorrect wording that would confuse users. It incorrectly refers to "Environment workspace" and "environment" when it should be referring to "Workspace" throughout the success message.	Medium
Update

[github-actions]

@Allan2000-Git, please resolve all open reviews!

[github-actions]

@Allan2000-Git, please resolve all open reviews; otherwise this PR will be closed after Sat Mar 08 2025 08:25:45 GMT+0000 (Coordinated Universal Time)!