From 9fb58c938c73268f56ce51cc3f474b7f715efba8 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Thu, 5 Jan 2023 11:41:59 +0530
Subject: [PATCH] v2-improvement: select the first group by default and render
 the selected on by default (#5197)

* select default group on mount

* typo
---
 .../ManageGroupPermissions/ManageGroupPermissions.jsx | 11 +++++++++--
 frontend/src/_styles/theme.scss                       |  9 +++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx b/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
index 6ac82bf128..979baa7287 100644
--- a/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
+++ b/frontend/src/ManageGroupPermissions/ManageGroupPermissions.jsx
@@ -43,6 +43,7 @@ class ManageGroupPermissionsComponent extends React.Component {
         this.setState({
           groups: data.group_permissions,
           isLoading: false,
+          selectedGroupPermissionId: data.group_permissions[0].id,
         });
       })
       .catch(({ error }) => {
@@ -328,9 +329,14 @@ class ManageGroupPermissionsComponent extends React.Component {
                             ))}
                           </tbody>
                         ) : (
-                          <tbody>
+                          <tbody className="user-group-table ">
                             {groups.map((permissionGroup) => (
-                              <tr key={permissionGroup.id}>
+                              <tr
+                                key={permissionGroup.id}
+                                className={`${this.props.darkMode ? 'dark' : ''} ${
+                                  this.state.selectedGroupPermissionId === permissionGroup.id ? 'selected-row' : ''
+                                }`}
+                              >
                                 <td onClick={() => this.setState({ selectedGroupPermissionId: permissionGroup.id })}>
                                   {this.humanizeifDefaultGroupName(permissionGroup.group)}
                                 </td>
@@ -350,6 +356,7 @@ class ManageGroupPermissionsComponent extends React.Component {
                                     </div>
                                   )}
                                 </td>
+                                <td className="col-auto"></td>
                               </tr>
                             ))}
                           </tbody>
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index e25396ef7b..a5618baf56 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -7330,3 +7330,12 @@ tbody {
   }
   
 }
+
+.user-group-table {
+  .selected-row {
+    background-color: #ECEEF0;
+  }
+  .selected-row.dark {
+    background-color: #232E3C;
+  }
+}
\ No newline at end of file