style: Navigation improvements (Flagsmith#3864)

frontend/.eslintrc.js

@@ -60,7 +60,6 @@ module.exports = {
     'Radio': true,
     'React': true,
     'ReactDOM': true,
-    'RemoveIcon': true,
     'RequiredElement': true,
     'RequiredFunc': true,
     'RequiredObject': true,

frontend/common/constants.ts

@@ -163,7 +163,7 @@ export default {
       ),
     }),
 
-    'USER_TRAITS': (envId: string, userId?: string) => ({
+    'USER_TRAITS': (envId: string, userId = keywords.USER_ID) => ({
       '.NET': require('./code-help/traits/traits-dotnet')(
         envId,
         keywords,
@@ -522,4 +522,5 @@ export default {
     '#DE3163',
   ],
   untaggedTag: { color: '#dedede', label: 'Untagged' },
+  upgradeURL: '/organisation-settings?tab=billing',
 }

frontend/common/providers/OrganisationProvider.tsx

@@ -15,20 +15,21 @@ import { useGetGroupsQuery } from 'common/services/useGroup'
 type OrganisationProviderType = {
   onRemoveProject?: () => void
   onSave?: (data: { environmentId: number; projectId: number }) => void
-  id?: number
+  id?: number | string
   children: (props: {
     createProject: typeof AppActions.createProject
     invalidateInviteLink: typeof AppActions.invalidateInviteLink
     inviteLinks: InviteLink[] | null
     invites: Invite[] | null
+    error: any
     isLoading: boolean
     isSaving: boolean
     name: string
     project: Project | null
     groups: UserGroupSummary[] | null
     projects: Project[] | null
     subscriptionMeta: SubscriptionMeta | null
-    users: User[] | null
+    users: User[]
   }) => ReactNode
 }
 
@@ -76,6 +77,7 @@ const OrganisationProvider: FC<OrganisationProviderType> = ({
     <>
       {children({
         createProject: AppActions.createProject,
+        error: AccountStore.error,
         groups: groups?.results || [],
         invalidateInviteLink: AppActions.invalidateInviteLink,
         inviteLinks: OrganisationStore.getInviteLinks(),

frontend/common/providers/Permission.tsx

@@ -39,7 +39,7 @@ const Permission: FC<PermissionType> = ({
       {children({
         isLoading,
         permission: hasPermission || AccountStore.isAdmin(),
-      }) || <div />}
+      }) || null}
     </>
   )
 }

frontend/common/services/useEnvironment.ts

@@ -32,12 +32,9 @@ export async function getEnvironments(
     typeof environmentService.endpoints.getEnvironments.initiate
   >[1],
 ) {
-  store.dispatch(
+  return store.dispatch(
     environmentService.endpoints.getEnvironments.initiate(data, options),
   )
-  return Promise.all(
-    store.dispatch(environmentService.util.getRunningQueriesThunk()),
-  )
 }
 export async function getEnvironment(
   store: any,

frontend/common/stores/account-store.js

@@ -1,3 +1,5 @@
+import { matchPath } from 'react-router'
+
 const Dispatcher = require('../dispatcher/dispatcher')
 const BaseStore = require('./base/_store')
 const data = require('../data/base/_data')
@@ -52,7 +54,7 @@ const controller = {
 
         store.saved()
         if (isLoginPage) {
-          window.location.href = `/organisation-settings`
+          window.location.href = `/organisations`
         }
       })
       .catch((e) => {
@@ -278,6 +280,7 @@ const controller = {
   },
 
   selectOrganisation: (id) => {
+    API.setCookie('organisation', `${id}`)
     store.organisation = _.find(store.model.organisations, { id })
     store.changed()
   },
@@ -300,12 +303,18 @@ const controller = {
       if (user && user.organisations) {
         store.organisation = user.organisations[0]
         const cookiedID = API.getCookie('organisation')
-        if (cookiedID) {
+        const pathID = matchPath(document.location.pathname, {
+          path: '/organisation/:organisationId',
+          strict: false,
+        })?.params?.organisationId
+        const orgId = pathID || cookiedID
+        if (orgId) {
           const foundOrganisation = user.organisations.find(
-            (v) => `${v.id}` === cookiedID,
+            (v) => `${v.id}` === orgId,
           )
           if (foundOrganisation) {
             store.organisation = foundOrganisation
+            AppActions.getOrganisation(orgId)
           }
         }
       }

frontend/common/stores/organisation-store.js

@@ -58,6 +58,7 @@ const controller = {
             environmentId: res[0].api_key,
             projectId: project.id,
           }
+          AppActions.refreshOrganisation()
           store.saved()
         })
       })
@@ -126,7 +127,7 @@ const controller = {
       })
   },
   getOrganisation: (id, force) => {
-    if (id !== store.id || force) {
+    if (`${id}` !== `${store.id}` || force) {
       store.id = id
       store.loading()
 
@@ -147,7 +148,7 @@ const controller = {
             : [],
         ),
       ).then((res) => {
-        if (id === store.id) {
+        if (`${id}` === `${store.id}`) {
           // eslint-disable-next-line prefer-const
           let [_projects, users, invites, subscriptionMeta] = res
           let projects = _.sortBy(_projects, 'name')

frontend/common/stores/project-store.js

@@ -91,6 +91,7 @@ const controller = {
     data.put(`${Project.api}projects/${project.id}/`, project).then((res) => {
       store.model = Object.assign(store.model, res)
       getStore().dispatch(projectService.util.invalidateTags(['Project']))
+      AppActions.refreshOrganisation()
       store.saved()
     })
   },

frontend/common/types/responses.ts

@@ -323,6 +323,7 @@ export type githubIntegration = {
 export type User = {
   id: number
   email: string
+  last_login?: string
   first_name: string
   last_name: string
   role: 'ADMIN' | 'USER'
@@ -555,6 +556,7 @@ export type Invite = {
   email: string
   date_created: string
   invited_by: User
+  link: string
   permission_groups: number[]
 }
 

frontend/common/utils/utils.tsx

@@ -243,6 +243,13 @@ const Utils = Object.assign({}, require('./base/_utils'), {
     }
     return 'UPDATE_FEATURE_STATE'
   },
+  canCreateOrganisation() {
+    return (
+      !Utils.getFlagsmithHasFeature('disable_create_org') &&
+      (!Project.superUserCreateOnly ||
+        (Project.superUserCreateOnly && AccountStore.isSuper()))
+    )
+  },
   getManageFeaturePermissionDescription(isChangeRequest: boolean) {
     if (isChangeRequest) {
       return 'Create Change Request'
@@ -255,6 +262,13 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   getManageUserPermissionDescription() {
     return 'Manage Identities'
   },
+  getOrganisationHomePage(id?: string) {
+    const orgId = id || AccountStore.getOrganisation()?.id
+    if (!orgId) {
+      return `/organisations`
+    }
+    return `/organisation/${orgId}/projects`
+  },
   getPermissionList(
     isAdmin: boolean,
     permissions: string[] | undefined | null,
@@ -285,6 +299,7 @@ const Utils = Object.assign({}, require('./base/_utils'), {
         .map((item) => `${Format.enumeration.get(item)}`),
     }
   },
+
   getPlanName: (plan: string) => {
     if (plan && plan.includes('scale-up')) {
       return planNames.scaleUp

frontend/e2e/helpers.cafe.ts

@@ -103,6 +103,7 @@ export const getLogger = () =>
   })
 
 export const gotoTraits = async () => {
+  await click('#features-link')
   await click('#users-link')
   await click(byId('user-item-0'))
   await waitForElementVisible('#add-trait')
@@ -219,6 +220,7 @@ export const saveFeatureSegments = async () => {
 }
 
 export const goToUser = async (index: number) => {
+  await click('#features-link')
   await click('#users-link')
   await click(byId(`user-item-${index}`))
 }
@@ -331,6 +333,7 @@ export const createRemoteConfig = async (
 
 export const createOrganisationAndProject = async (organisationName:string,projectName:string) =>{
   log('Create Organisation')
+  await click(byId('home-link'))
   await click(byId('create-organisation-btn'))
   await setText('[name="orgName"]', organisationName)
   await click('#create-org-btn')

frontend/e2e/tests/initialise-tests.ts

@@ -26,6 +26,7 @@ export default async function () {
   await waitForElementVisible(byId('features-page'))
 
   log('Hide disabled flags')
+  await click('#project-link')
   await click('#project-settings-link')
   await click(byId('js-sdk-settings'))
   await click(byId('js-hide-disabled-flags'))

frontend/e2e/tests/invite-test.ts

@@ -18,6 +18,7 @@ export default async function () {
   log('Get Invite url')
   await t.navigateTo('http://localhost:3000/organisation-settings')
   await Selector(byId('organisation-name')).value
+  await click(byId('users-and-permissions'))
   const inviteLink = await Selector(byId('invite-link')).value
   log('Accept invite')
   await t.navigateTo(inviteLink)

frontend/e2e/tests/project-test.ts

@@ -1,20 +1,23 @@
 import {
+  assertTextContent,
   byId,
   click,
   log,
   login,
   setText,
   waitForElementVisible,
-} from '../helpers.cafe'
+} from '../helpers.cafe';
 import { E2E_USER, PASSWORD } from '../config'
 
 export default async function () {
   log('Login')
   await login(E2E_USER, PASSWORD)
   await click('#project-select-0')
   log('Edit Project')
+  await click('#project-link')
   await click('#project-settings-link')
   await setText("[name='proj-name']", 'Test Project')
   await click('#save-proj-btn')
-  await waitForElementVisible(byId('switch-project-test-project'))
+  await assertTextContent(`#project-link`, 'Test Project')
+
 }

frontend/e2e/tests/versioning-tests.ts

@@ -9,7 +9,6 @@ import {
     editRemoteConfig,
     log,
     login, refreshUntilElementVisible,
-    waitAndRefresh,
     waitForElementVisible
 } from "../helpers.cafe";
 import { E2E_USER, PASSWORD } from '../config';

frontend/global.d.ts

@@ -33,7 +33,6 @@ declare global {
   const FormGroup: typeof Component
   const Select: typeof _Select
   const Column: typeof Component
-  const RemoveIcon: typeof Component
   const Loader: typeof Component
   const E2E: boolean
   const DYNATRACE_URL: string | undefined