style: Navigation improvements

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

@@ -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) => {
@@ -277,6 +279,7 @@ const controller = {
  },
 
  selectOrganisation: (id) => {
+ API.setCookie('organisation', `${id}`)
  store.organisation = _.find(store.model.organisations, { id })
  store.changed()
  },
@@ -299,12 +302,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

@@ -57,6 +57,7 @@ const controller = {
  environmentId: res[0].api_key,
  projectId: project.id,
  }
+ AppActions.refreshOrganisation()
  store.saved()
  })
  })
@@ -125,7 +126,7 @@ const controller = {
  })
  },
  getOrganisation: (id, force) => {
- if (id !== store.id || force) {
+ if (`${id}` !== `${store.id}` || force) {
  store.id = id
  store.loading()
 
@@ -146,7 +147,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

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

frontend/common/utils/utils.tsx

@@ -384,6 +384,14 @@ const Utils = Object.assign({}, require('./base/_utils'), {
  return Constants.projectColors[index % (Constants.projectColors.length - 1)]
  },
 
+ getOrganisationHomePage(id?: string) {
+ const orgId = id || AccountStore.getOrganisation()?.id
+ if (!orgId) {
+ return `/organisations`
+ }
+ return `/organisation/${orgId}/projects`
+ },
+
  getSDKEndpoint(_project: ProjectType) {
  const project = _project || ProjectStore.model
 

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