From 4d1300ba4275471ab3bb4cf47f0b47bb3f1634d5 Mon Sep 17 00:00:00 2001
From: Anass Bouassaba <ebouassaba@gmail.com>
Date: Mon, 2 Sep 2024 21:17:42 +0200
Subject: [PATCH 1/2] refactor: UI adjustments and refactoring

---
 api/errorpkg/error_creators.go                |  40 -----
 ui/src/pages/group/group-settings-page.tsx    | 113 +++++++-------
 .../organization-settings-page.tsx            | 145 ++++++++++--------
 .../workspace/workspace-settings-page.tsx     |   6 +-
 4 files changed, 141 insertions(+), 163 deletions(-)

diff --git a/api/errorpkg/error_creators.go b/api/errorpkg/error_creators.go
index 8d49ca0ea..f591dc607 100644
--- a/api/errorpkg/error_creators.go
+++ b/api/errorpkg/error_creators.go
@@ -140,26 +140,6 @@ func NewInvitationNotFoundError(err error) *ErrorResponse {
 	)
 }
 
-func NewSnapshotLanguageNotSetError(err error) *ErrorResponse {
-	return NewErrorResponse(
-		"snapshot_language_not_set",
-		http.StatusBadRequest,
-		"Snapshot language is not set.",
-		"Snapshot language is not set.",
-		err,
-	)
-}
-
-func NewSnapshotTextLengthExceedsLimitError(err error) *ErrorResponse {
-	return NewErrorResponse(
-		"snapshot_text_length_exceeds_limit",
-		http.StatusBadRequest,
-		"Snapshot text length exceeds limit.",
-		"Snapshot text length exceeds limit.",
-		err,
-	)
-}
-
 func NewSnapshotCannotBePatchedError(err error) *ErrorResponse {
 	return NewErrorResponse(
 		"snapshot_cannot_be_patched",
@@ -180,16 +160,6 @@ func NewSnapshotHasPendingTaskError(err error) *ErrorResponse {
 	)
 }
 
-func NewUnsupportedFileTypeError(err error) *ErrorResponse {
-	return NewErrorResponse(
-		"unsupported_file_type",
-		http.StatusBadRequest,
-		"File type is not supported.",
-		"File type is not supported.",
-		err,
-	)
-}
-
 func NewTaskIsRunningError(err error) *ErrorResponse {
 	return NewErrorResponse(
 		"task_is_running",
@@ -210,16 +180,6 @@ func NewTaskBelongsToAnotherUserError(err error) *ErrorResponse {
 	)
 }
 
-func NewCannotDeletePendingTaskError(err error) *ErrorResponse {
-	return NewErrorResponse(
-		"cannot_delete_pending_task",
-		http.StatusBadRequest,
-		"Cannot delete a pending task.",
-		"Cannot delete a pending task.",
-		err,
-	)
-}
-
 func NewInternalServerError(err error) *ErrorResponse {
 	return NewErrorResponse(
 		"internal_server_error",
diff --git a/ui/src/pages/group/group-settings-page.tsx b/ui/src/pages/group/group-settings-page.tsx
index 122de9fbc..8b5f5cfb1 100644
--- a/ui/src/pages/group/group-settings-page.tsx
+++ b/ui/src/pages/group/group-settings-page.tsx
@@ -59,62 +59,71 @@ const GroupSettingsPage = () => {
       <Helmet>
         <title>{group.name}</title>
       </Helmet>
-      <div className={sectionClassName}>
-        <div className={rowClassName}>
-          <span>Name</span>
-          <Spacer />
-          <span>{truncateEnd(group.name, 60)}</span>
-          <IconButton
-            icon={<IconEdit />}
-            isDisabled={!hasEditPermission}
-            aria-label=""
-            onClick={() => {
-              setIsNameModalOpen(true)
-            }}
-          />
+      <div className={cx('flex', 'flex-col', 'gap-0')}>
+        <div className={sectionClassName}>
+          <span className={cx('font-bold')}>Basics</span>
+          <div className={rowClassName}>
+            <span>Name</span>
+            <Spacer />
+            <span>{truncateEnd(group.name, 60)}</span>
+            <IconButton
+              icon={<IconEdit />}
+              isDisabled={!hasEditPermission}
+              aria-label=""
+              onClick={() => {
+                setIsNameModalOpen(true)
+              }}
+            />
+          </div>
+          <Divider />
         </div>
-        <Divider />
-        <div className={rowClassName}>
-          <span>Add members</span>
-          <Spacer />
-          <IconButton
-            icon={<IconPersonAdd />}
-            isDisabled={!hasOwnerPermission}
-            aria-label=""
-            onClick={() => {
-              setIsAddMembersModalOpen(true)
-            }}
-          />
+        <div className={sectionClassName}>
+          <span className={cx('font-bold')}>Membership</span>
+          <div className={rowClassName}>
+            <span>Add members</span>
+            <Spacer />
+            <IconButton
+              icon={<IconPersonAdd />}
+              isDisabled={!hasOwnerPermission}
+              aria-label=""
+              onClick={() => {
+                setIsAddMembersModalOpen(true)
+              }}
+            />
+          </div>
+          <Divider />
         </div>
-        <Divider />
-        <div className={rowClassName}>
-          <span>Delete permanently</span>
-          <Spacer />
-          <IconButton
-            icon={<IconDelete />}
-            variant="solid"
-            colorScheme="red"
-            isDisabled={!hasOwnerPermission}
-            aria-label=""
-            onClick={() => setDeleteModalOpen(true)}
-          />
+        <div className={sectionClassName}>
+          <span className={cx('font-bold')}>Advanced</span>
+          <div className={rowClassName}>
+            <span>Delete permanently</span>
+            <Spacer />
+            <IconButton
+              icon={<IconDelete />}
+              variant="solid"
+              colorScheme="red"
+              isDisabled={!hasOwnerPermission}
+              aria-label=""
+              onClick={() => setDeleteModalOpen(true)}
+            />
+          </div>
         </div>
-        <GroupEditName
-          open={isNameModalOpen}
-          group={group}
-          onClose={() => setIsNameModalOpen(false)}
-        />
-        <GroupAddMember
-          open={isAddMembersModalOpen}
-          group={group}
-          onClose={() => setIsAddMembersModalOpen(false)}
-        />
-        <GroupDelete
-          open={deleteModalOpen}
-          group={group}
-          onClose={() => setDeleteModalOpen(false)}
-        />
       </div>
+      <GroupEditName
+        open={isNameModalOpen}
+        group={group}
+        onClose={() => setIsNameModalOpen(false)}
+      />
+      <GroupAddMember
+        open={isAddMembersModalOpen}
+        group={group}
+        onClose={() => setIsAddMembersModalOpen(false)}
+      />
+      <GroupDelete
+        open={deleteModalOpen}
+        group={group}
+        onClose={() => setDeleteModalOpen(false)}
+      />
     </>
   )
 }
diff --git a/ui/src/pages/organization/organization-settings-page.tsx b/ui/src/pages/organization/organization-settings-page.tsx
index ddcbdf8ae..e763d1ee9 100644
--- a/ui/src/pages/organization/organization-settings-page.tsx
+++ b/ui/src/pages/organization/organization-settings-page.tsx
@@ -60,78 +60,87 @@ const OrganizationSettingsPage = () => {
       <Helmet>
         <title>{org.name}</title>
       </Helmet>
-      <div className={sectionClassName}>
-        <div className={rowClassName}>
-          <span>Name</span>
-          <Spacer />
-          <span>{truncateEnd(org.name, 60)}</span>
-          <IconButton
-            icon={<IconEdit />}
-            isDisabled={!geEditorPermission(org.permission)}
-            aria-label=""
-            onClick={() => {
-              setIsNameModalOpen(true)
-            }}
-          />
+      <div className={cx('flex', 'flex-col', 'gap-0')}>
+        <div className={sectionClassName}>
+          <span className={cx('font-bold')}>Basics</span>
+          <div className={rowClassName}>
+            <span>Name</span>
+            <Spacer />
+            <span>{truncateEnd(org.name, 60)}</span>
+            <IconButton
+              icon={<IconEdit />}
+              isDisabled={!geEditorPermission(org.permission)}
+              aria-label=""
+              onClick={() => {
+                setIsNameModalOpen(true)
+              }}
+            />
+          </div>
+          <Divider />
         </div>
-        <Divider />
-        <div className={rowClassName}>
-          <span>Invite members</span>
-          <Spacer />
-          <IconButton
-            icon={<IconPersonAdd />}
-            isDisabled={!geOwnerPermission(org.permission)}
-            aria-label=""
-            onClick={() => {
-              setIsInviteMembersModalOpen(true)
-            }}
-          />
+        <div className={sectionClassName}>
+          <span className={cx('font-bold')}>Membership</span>
+          <div className={rowClassName}>
+            <span>Invite members</span>
+            <Spacer />
+            <IconButton
+              icon={<IconPersonAdd />}
+              isDisabled={!geOwnerPermission(org.permission)}
+              aria-label=""
+              onClick={() => {
+                setIsInviteMembersModalOpen(true)
+              }}
+            />
+          </div>
+          <div className={rowClassName}>
+            <span>Leave</span>
+            <Spacer />
+            <IconButton
+              icon={<IconLogout />}
+              variant="solid"
+              colorScheme="red"
+              aria-label=""
+              onClick={() => setIsLeaveModalOpen(true)}
+            />
+          </div>
+          <Divider />
         </div>
-        <div className={rowClassName}>
-          <span>Leave</span>
-          <Spacer />
-          <IconButton
-            icon={<IconLogout />}
-            variant="solid"
-            colorScheme="red"
-            aria-label=""
-            onClick={() => setIsLeaveModalOpen(true)}
-          />
+        <div className={sectionClassName}>
+          <span className={cx('font-bold')}>Advanced</span>
+          <div className={rowClassName}>
+            <span>Delete permanently</span>
+            <Spacer />
+            <IconButton
+              icon={<IconDelete />}
+              variant="solid"
+              colorScheme="red"
+              isDisabled={!geEditorPermission(org.permission)}
+              aria-label=""
+              onClick={() => setIsDeleteModalOpen(true)}
+            />
+          </div>
         </div>
-        <Divider />
-        <div className={rowClassName}>
-          <span>Delete permanently</span>
-          <Spacer />
-          <IconButton
-            icon={<IconDelete />}
-            variant="solid"
-            colorScheme="red"
-            isDisabled={!geEditorPermission(org.permission)}
-            aria-label=""
-            onClick={() => setIsDeleteModalOpen(true)}
-          />
-        </div>
-        <OrganizationEditName
-          open={isNameModalOpen}
-          organization={org}
-          onClose={() => setIsNameModalOpen(false)}
-        />
-        <OrganizationInviteMembers
-          open={isInviteMembersModalOpen}
-          id={org.id}
-          onClose={() => setIsInviteMembersModalOpen(false)}
-        />
-        <OrganizationLeave
-          open={isLeaveModalOpen}
-          id={org.id}
-          onClose={() => setIsLeaveModalOpen(false)}
-        />
-        <OrganizationDelete
-          open={isDeleteModalOpen}
-          organization={org}
-          onClose={() => setIsDeleteModalOpen(false)}
-        />
       </div>
+      <OrganizationEditName
+        open={isNameModalOpen}
+        organization={org}
+        onClose={() => setIsNameModalOpen(false)}
+      />
+      <OrganizationInviteMembers
+        open={isInviteMembersModalOpen}
+        id={org.id}
+        onClose={() => setIsInviteMembersModalOpen(false)}
+      />
+      <OrganizationLeave
+        open={isLeaveModalOpen}
+        id={org.id}
+        onClose={() => setIsLeaveModalOpen(false)}
+      />
+      <OrganizationDelete
+        open={isDeleteModalOpen}
+        organization={org}
+        onClose={() => setIsDeleteModalOpen(false)}
+      />
     </>
   )
 }
diff --git a/ui/src/pages/workspace/workspace-settings-page.tsx b/ui/src/pages/workspace/workspace-settings-page.tsx
index 43fbd341d..910f0196f 100644
--- a/ui/src/pages/workspace/workspace-settings-page.tsx
+++ b/ui/src/pages/workspace/workspace-settings-page.tsx
@@ -108,9 +108,8 @@ const WorkspaceSettingsPage = () => {
               <Progress value={0} hasStripe />
             </>
           ) : null}
-          <Divider />
           <div className={rowClassName}>
-            <span>Storage capacity</span>
+            <span>Capacity</span>
             <Spacer />
             <span>{prettyBytes(workspace.storageCapacity)}</span>
             <EditButton
@@ -135,11 +134,12 @@ const WorkspaceSettingsPage = () => {
               }}
             />
           </div>
+          <Divider />
         </div>
         <div className={sectionClassName}>
           <span className={cx('font-bold')}>Advanced</span>
           <div className={rowClassName}>
-            <span>Delete permanently</span>
+            <span>Delete workspace</span>
             <Spacer />
             <IconButton
               icon={<IconDelete />}

From fb8c34fd6359b0d67adf8456db02b6ae693c1e01 Mon Sep 17 00:00:00 2001
From: Anass Bouassaba <ebouassaba@gmail.com>
Date: Mon, 2 Sep 2024 21:31:29 +0200
Subject: [PATCH 2/2] refactor(ui): update labels

---
 ui/src/pages/group/group-settings-page.tsx               | 2 +-
 ui/src/pages/organization/organization-settings-page.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/group/group-settings-page.tsx b/ui/src/pages/group/group-settings-page.tsx
index 8b5f5cfb1..7d70db51c 100644
--- a/ui/src/pages/group/group-settings-page.tsx
+++ b/ui/src/pages/group/group-settings-page.tsx
@@ -96,7 +96,7 @@ const GroupSettingsPage = () => {
         <div className={sectionClassName}>
           <span className={cx('font-bold')}>Advanced</span>
           <div className={rowClassName}>
-            <span>Delete permanently</span>
+            <span>Delete group</span>
             <Spacer />
             <IconButton
               icon={<IconDelete />}
diff --git a/ui/src/pages/organization/organization-settings-page.tsx b/ui/src/pages/organization/organization-settings-page.tsx
index e763d1ee9..497cd93ce 100644
--- a/ui/src/pages/organization/organization-settings-page.tsx
+++ b/ui/src/pages/organization/organization-settings-page.tsx
@@ -108,7 +108,7 @@ const OrganizationSettingsPage = () => {
         <div className={sectionClassName}>
           <span className={cx('font-bold')}>Advanced</span>
           <div className={rowClassName}>
-            <span>Delete permanently</span>
+            <span>Delete organization</span>
             <Spacer />
             <IconButton
               icon={<IconDelete />}