From 5ba3083f88ddd8965d65225105d515cfd1ab9bd0 Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kyle@solidstategroup.com>
Date: Mon, 8 Apr 2024 13:01:49 +0100
Subject: [PATCH] fix: Adjust permissions logic for view / manage groups
 (#3679)

---
 frontend/common/stores/account-store.js       |  2 +-
 frontend/web/components/App.js                | 21 +++++++--
 frontend/web/components/OrganisationLink.tsx  | 44 -------------------
 frontend/web/components/UserGroupList.tsx     | 13 +++---
 frontend/web/components/modals/Payment.js     |  2 +-
 .../web/components/pages/ConfirmEmailPage.js  |  2 +-
 .../pages/CreateOrganisationPage.js           |  2 +-
 .../pages/EnvironmentSettingsPage.js          |  2 +-
 frontend/web/components/pages/InvitePage.js   |  2 +-
 .../pages/OrganisationSettingsPage.js         |  7 +--
 .../components/pages/ProjectSettingsPage.js   |  4 +-
 .../web/components/pages/ProjectsPage.tsx     | 40 -----------------
 .../web/components/pages/SegmentsPage.tsx     |  2 +-
 frontend/web/main.js                          |  2 +-
 frontend/web/routes.js                        |  2 -
 15 files changed, 40 insertions(+), 107 deletions(-)
 delete mode 100644 frontend/web/components/OrganisationLink.tsx
 delete mode 100644 frontend/web/components/pages/ProjectsPage.tsx

diff --git a/frontend/common/stores/account-store.js b/frontend/common/stores/account-store.js
index 47eeb7631e32..d2cfc9e4e653 100644
--- a/frontend/common/stores/account-store.js
+++ b/frontend/common/stores/account-store.js
@@ -52,7 +52,7 @@ const controller = {
 
         store.saved()
         if (isLoginPage) {
-          window.location.href = `/projects`
+          window.location.href = `/organisation-settings`
         }
       })
       .catch((e) => {
diff --git a/frontend/web/components/App.js b/frontend/web/components/App.js
index 1309552de594..7bf1494cf9be 100644
--- a/frontend/web/components/App.js
+++ b/frontend/web/components/App.js
@@ -23,7 +23,6 @@ import Icon from './Icon'
 import AccountStore from 'common/stores/account-store'
 import InfoMessage from './InfoMessage'
 import OrganisationLimit from './OrganisationLimit'
-import OrganisationLink from './OrganisationLink'
 import GithubStar from './GithubStar'
 import Tooltip from './Tooltip'
 
@@ -168,7 +167,7 @@ const App = class extends Component {
               id: lastEnv.orgId,
             })
             if (!lastOrg) {
-              this.context.router.history.replace('/projects')
+              this.context.router.history.replace('/organisation-settings')
               return
             }
 
@@ -184,7 +183,7 @@ const App = class extends Component {
             return
           }
 
-          this.context.router.history.replace('/projects')
+          this.context.router.history.replace('/organisation-settings')
         })
       }
     }
@@ -349,7 +348,21 @@ const App = class extends Component {
                             <React.Fragment>
                               <nav className='my-3 my-md-0 hidden-xs-down flex-row navbar-right space'>
                                 <Row>
-                                  <OrganisationLink />
+                                  <NavLink
+                                    id='org-settings-link'
+                                    activeClassName='active'
+                                    className='nav-link'
+                                    to='/organisation-settings'
+                                  >
+                                    <span className='mr-1'>
+                                      <Icon
+                                        name='layout'
+                                        width={20}
+                                        fill='#9DA4AE'
+                                      />
+                                    </span>
+                                    {'Organisation'}
+                                  </NavLink>
                                 </Row>
                                 <Row>
                                   <NavLink
diff --git a/frontend/web/components/OrganisationLink.tsx b/frontend/web/components/OrganisationLink.tsx
deleted file mode 100644
index 651e822707ac..000000000000
--- a/frontend/web/components/OrganisationLink.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FC, useMemo } from 'react'
-import { NavLink } from 'react-router-dom'
-
-import AccountStore from 'common/stores/account-store'
-import { useHasPermission } from 'common/providers/Permission'
-import Icon from './Icon'
-
-const OrganisationLink: FC = () => {
-  const organisation = AccountStore.getOrganisation()
-
-  const { permission: canManageUserGroups } = useHasPermission({
-    id: organisation?.id,
-    level: 'organisation',
-    permission: 'MANAGE_USER_GROUPS',
-  })
-
-  const pageLink = useMemo(() => {
-    if (!organisation) return null
-
-    if (AccountStore.isAdmin() || canManageUserGroups) {
-      return '/organisation-settings'
-    }
-
-    return '/projects'
-  }, [organisation, canManageUserGroups])
-
-  return (
-    pageLink && (
-      <NavLink
-        id='org-settings-link'
-        activeClassName='active'
-        className='nav-link'
-        to={pageLink}
-      >
-        <span className='mr-1'>
-          <Icon name='layout' width={20} fill='#9DA4AE' />
-        </span>
-        {'Organisation'}
-      </NavLink>
-    )
-  )
-}
-
-export default OrganisationLink
diff --git a/frontend/web/components/UserGroupList.tsx b/frontend/web/components/UserGroupList.tsx
index 593ff4d55613..8ccf8445f35e 100644
--- a/frontend/web/components/UserGroupList.tsx
+++ b/frontend/web/components/UserGroupList.tsx
@@ -3,13 +3,15 @@ const CreateGroup = require('./modals/CreateGroup')
 import Button from './base/forms/Button'
 import AccountStore from 'common/stores/account-store'
 import { UserGroup, GroupPermission } from 'common/types/responses'
-import { useDeleteGroupMutation } from 'common/services/useGroup'
+import {
+  useDeleteGroupMutation,
+  useGetGroupsQuery,
+} from 'common/services/useGroup'
 import { useGetUserGroupPermissionQuery } from 'common/services/useUserGroupPermission'
 import PanelSearch from './PanelSearch'
 import { sortBy } from 'lodash'
 import InfoMessage from './InfoMessage' // we need this to make JSX compile
 import Icon from './Icon'
-import { useGetGroupSummariesQuery } from 'common/services/useGroupSummary'
 import Panel from './base/grid/Panel'
 import PermissionsSummaryList from './PermissionsSummaryList'
 
@@ -135,8 +137,9 @@ const UserGroupsList: FC<UserGroupsListType> = ({
   showRemove,
 }) => {
   const [page, setPage] = useState(1)
-  const { data: userGroups, isLoading } = useGetGroupSummariesQuery({
+  const { data: userGroups, isLoading } = useGetGroupsQuery({
     orgId: `${orgId}`,
+    page,
   })
   const { data: userGroupsPermission, isLoading: userGroupPermissionLoading } =
     useGetUserGroupPermissionQuery(
@@ -153,7 +156,7 @@ const UserGroupsList: FC<UserGroupsListType> = ({
     : []
 
   if (userGroupsPermission?.length > 0) {
-    userGroups?.forEach((group) => {
+    userGroups?.results.forEach((group) => {
       const existingPermissionIndex =
         mergeduserGroupsPermissionWithUserGroups.findIndex(
           (userGroupPermission) => userGroupPermission.group.id === group.id,
@@ -186,7 +189,7 @@ const UserGroupsList: FC<UserGroupsListType> = ({
         items={
           userGroupsPermission
             ? sortBy(mergeduserGroupsPermissionWithUserGroups, 'group.name')
-            : sortBy(userGroups, 'name')
+            : sortBy(userGroups?.results, 'name')
         }
         paging={mergeduserGroupsPermissionWithUserGroups || userGroups}
         nextPage={() => setPage(page + 1)}
diff --git a/frontend/web/components/modals/Payment.js b/frontend/web/components/modals/Payment.js
index c85227cf41d1..9794b4db723b 100644
--- a/frontend/web/components/modals/Payment.js
+++ b/frontend/web/components/modals/Payment.js
@@ -33,7 +33,7 @@ const PaymentButton = (props) => {
             success: (res) => {
               AppActions.updateSubscription(res)
               if (this.props.isDisableAccount) {
-                window.location.href = `/projects`
+                window.location.href = `/organisation-settings`
               }
             },
           })
diff --git a/frontend/web/components/pages/ConfirmEmailPage.js b/frontend/web/components/pages/ConfirmEmailPage.js
index 95a1e98d29b9..8985275c278b 100644
--- a/frontend/web/components/pages/ConfirmEmailPage.js
+++ b/frontend/web/components/pages/ConfirmEmailPage.js
@@ -19,7 +19,7 @@ const InvitePage = class extends Component {
 
   onSave = (id) => {
     AppActions.selectOrganisation(id)
-    this.context.router.history.replace('/projects?new=1')
+    this.context.router.history.replace('/organisation-settings')
   }
 
   render() {
diff --git a/frontend/web/components/pages/CreateOrganisationPage.js b/frontend/web/components/pages/CreateOrganisationPage.js
index 85f884a981bf..e446edc99e94 100644
--- a/frontend/web/components/pages/CreateOrganisationPage.js
+++ b/frontend/web/components/pages/CreateOrganisationPage.js
@@ -33,7 +33,7 @@ class CreateOrganisationPage extends Component {
   onSave = (id) => {
     AppActions.selectOrganisation(id)
     API.setCookie('organisation', `${id}`)
-    this.context.router.history.push('/projects')
+    this.context.router.history.push('/organisation-settings')
   }
 
   render() {
diff --git a/frontend/web/components/pages/EnvironmentSettingsPage.js b/frontend/web/components/pages/EnvironmentSettingsPage.js
index d8a115bfb70e..d346fb8c5229 100644
--- a/frontend/web/components/pages/EnvironmentSettingsPage.js
+++ b/frontend/web/components/pages/EnvironmentSettingsPage.js
@@ -88,7 +88,7 @@ const EnvironmentSettingsPage = class extends Component {
 
   onRemove = () => {
     toast('Your project has been removed')
-    this.context.router.history.replace('/projects')
+    this.context.router.history.replace('/organisation-settings')
   }
 
   confirmRemove = (environment, cb) => {
diff --git a/frontend/web/components/pages/InvitePage.js b/frontend/web/components/pages/InvitePage.js
index 3dd739eedecd..29e1850c240c 100644
--- a/frontend/web/components/pages/InvitePage.js
+++ b/frontend/web/components/pages/InvitePage.js
@@ -20,7 +20,7 @@ const InvitePage = class extends Component {
 
   onSave = (id) => {
     AppActions.selectOrganisation(id)
-    this.context.router.history.replace('/projects?new=1')
+    this.context.router.history.replace('/organisation-settings')
   }
 
   render() {
diff --git a/frontend/web/components/pages/OrganisationSettingsPage.js b/frontend/web/components/pages/OrganisationSettingsPage.js
index de812882b568..ec9a64785a90 100644
--- a/frontend/web/components/pages/OrganisationSettingsPage.js
+++ b/frontend/web/components/pages/OrganisationSettingsPage.js
@@ -105,7 +105,7 @@ const OrganisationSettingsPage = class extends Component {
   onRemove = () => {
     toast('Your organisation has been removed')
     if (AccountStore.getOrganisation()) {
-      this.context.router.history.replace('/projects')
+      this.context.router.history.replace('/organisation-settings')
     } else {
       this.context.router.history.replace('/create')
     }
@@ -333,8 +333,6 @@ const OrganisationSettingsPage = class extends Component {
     const verifySeatsLimit = Utils.getFlagsmithHasFeature(
       'verify_seats_limit_for_invite_links',
     )
-    const canManageGroups =
-      this.state.permissions.includes('MANAGE_USER_GROUPS')
 
     return (
       <div className='app-container container'>
@@ -348,6 +346,7 @@ const OrganisationSettingsPage = class extends Component {
               <OrganisationProvider>
                 {({
                   error,
+                  groups,
                   invalidateInviteLink,
                   inviteLinks,
                   invites,
@@ -356,6 +355,7 @@ const OrganisationSettingsPage = class extends Component {
                   subscriptionMeta,
                   users,
                 }) => {
+                  const canManageGroups = !!groups?.length
                   const { max_seats } = subscriptionMeta ||
                     organisation.subscription || { max_seats: 1 }
                   const isAWS =
@@ -398,6 +398,7 @@ const OrganisationSettingsPage = class extends Component {
                       </div>
 
                       <Tabs
+                        hideNavOnSingleTab
                         value={this.state.tab || 0}
                         onChange={(tab) => this.setState({ tab })}
                         className='mt-0'
diff --git a/frontend/web/components/pages/ProjectSettingsPage.js b/frontend/web/components/pages/ProjectSettingsPage.js
index 735f2b95d2cf..8dab1a7ef440 100644
--- a/frontend/web/components/pages/ProjectSettingsPage.js
+++ b/frontend/web/components/pages/ProjectSettingsPage.js
@@ -426,7 +426,9 @@ const ProjectSettingsPage = class extends Component {
                           <Button
                             onClick={() =>
                               this.confirmRemove(project, () => {
-                                this.context.router.history.replace('/projects')
+                                this.context.router.history.replace(
+                                  '/organisation-settings',
+                                )
                                 deleteProject(this.props.match.params.projectId)
                               })
                             }
diff --git a/frontend/web/components/pages/ProjectsPage.tsx b/frontend/web/components/pages/ProjectsPage.tsx
deleted file mode 100644
index d98ae6da837e..000000000000
--- a/frontend/web/components/pages/ProjectsPage.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { FC, useEffect, useState } from 'react'
-
-import Constants from 'common/constants'
-import AccountStore from 'common/stores/account-store'
-import API from 'project/api'
-
-import PageTitle from 'components/PageTitle'
-import OrganisationManageWidget from 'components/OrganisationManageWidget'
-import ProjectManageWidget from 'components/ProjectManageWidget'
-
-const ProjectsPage: FC = () => {
-  const [organisationId, setOrganisationId] = useState(
-    AccountStore.getOrganisation().id,
-  )
-
-  useEffect(() => {
-    API.trackPage(Constants.pages.PROJECT_SELECT)
-  }, [])
-
-  return (
-    <div className='app-container container'>
-      <div className='py-4'>
-        <OrganisationManageWidget
-          onChange={() =>
-            setOrganisationId(() => AccountStore.getOrganisation().id)
-          }
-        />
-      </div>
-
-      <PageTitle title={'Projects'}>
-        Projects let you create and manage a set of features and configure them
-        between multiple app environments.
-      </PageTitle>
-
-      <ProjectManageWidget organisationId={organisationId} />
-    </div>
-  )
-}
-
-export default ProjectsPage
diff --git a/frontend/web/components/pages/SegmentsPage.tsx b/frontend/web/components/pages/SegmentsPage.tsx
index d205004ade8a..ff04c07fbdae 100644
--- a/frontend/web/components/pages/SegmentsPage.tsx
+++ b/frontend/web/components/pages/SegmentsPage.tsx
@@ -82,7 +82,7 @@ const SegmentsPage: FC<SegmentsPageType> = (props) => {
   useEffect(() => {
     if (error) {
       // Kick user back out to projects
-      props.router.history.replace('/projects')
+      props.router.history.replace('/organisation-settings')
     }
   }, [error, props.router.history])
   const newSegment = () => {
diff --git a/frontend/web/main.js b/frontend/web/main.js
index cfd2729bdb33..c4d140bc6ff2 100644
--- a/frontend/web/main.js
+++ b/frontend/web/main.js
@@ -56,7 +56,7 @@ setTimeout(() => {
     (document.location.pathname.indexOf('/project/') !== -1 ||
       document.location.pathname.indexOf('/create') !== -1 ||
       document.location.pathname.indexOf('/invite') !== -1 ||
-      document.location.pathname.indexOf('/projects') !== -1) &&
+      document.location.pathname.indexOf('/organisation-settings') !== -1) &&
     !AccountStore.getUser()
   ) {
     API.setRedirect(
diff --git a/frontend/web/routes.js b/frontend/web/routes.js
index 93e614f60f9b..83444ef60f91 100644
--- a/frontend/web/routes.js
+++ b/frontend/web/routes.js
@@ -28,7 +28,6 @@ import AuditLogPage from './components/pages/AuditLogPage'
 import ComparePage from './components/pages/ComparePage'
 import WidgetPage from './components/pages/WidgetPage'
 import BrokenPage from './components/pages/BrokenPage'
-import ProjectsPage from './components/pages/ProjectsPage'
 import AuditLogItemPage from './components/pages/AuditLogItemPage'
 import FeatureHistoryPage from './components/pages/FeatureHistoryPage'
 
@@ -41,7 +40,6 @@ export default (
       <Route path='/signup' exact component={HomePage} />
       <Route path='/signup' exact component={HomePage} />
       <Route path='/home' exact component={HomePage} />
-      <Route path='/projects' exact component={ProjectsPage} />
       <Route path='/maintenance' exact component={Maintenance} />
       <Route
         path='/password-reset/confirm/:uid/:token/'