Skip to content

Commit

Permalink
chore: url based settings pages (#3776)
Browse files Browse the repository at this point in the history 
Co-authored-by: Zach Aysan <[email protected]>
  • Loading branch information
@kyle-ssg @zachaysan
kyle-ssg and zachaysan authored Apr 26, 2024
1 parent 8495336 commit fe21496
Show file tree
Hide file tree
Showing 15 changed files with 99 additions and 65 deletions.
4 changes: 1 addition & 3 deletions frontend/web/components/EditPermissions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,6 @@ import Panel from './base/grid/Panel'
import InputGroup from './base/forms/InputGroup'
import classNames from 'classnames'
import OrganisationProvider from 'common/providers/OrganisationProvider'
import { useGetPermissionQuery } from 'common/services/usePermission'
import { useHasPermission } from 'common/providers/Permission'
const Project = require('common/project')

type EditPermissionModalType = {
Expand Down Expand Up @@ -959,7 +957,7 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
Learn about User Roles.
</Button>
</p>
<Tabs value={tab} onChange={setTab} theme='pill'>
<Tabs urlParam='type' value={tab} onChange={setTab} theme='pill'>
<TabItem tabLabel='Users'>
<OrganisationProvider>
{({ isLoading, users }) => (
Expand Down
19 changes: 15 additions & 4 deletions frontend/web/components/FeatureRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class TheComponent extends Component {
const { feature, tab } = Utils.fromParam()
const { id } = projectFlag
if (`${id}` === feature) {
this.editFeature(projectFlag, environmentFlags[id], tab)
this.editFeature(projectFlag, environmentFlags[id])
}
}

Expand Down Expand Up @@ -89,7 +89,9 @@ class TheComponent extends Component {
history.replaceState(
{},
null,
`${document.location.pathname}?feature=${projectFlag.id}`,
`${document.location.pathname}?feature=${projectFlag.id}&tab=${
tab || Utils.fromParam().tab || 'value'
}`,
)
openModal(
<Row>
Expand All @@ -105,6 +107,7 @@ class TheComponent extends Component {
</Button>
</Row>,
<CreateFlagModal
history={this.context.router.history}
environmentId={this.props.environmentId}
projectId={this.props.projectId}
projectFlag={projectFlag}
Expand Down Expand Up @@ -201,14 +204,22 @@ class TheComponent extends Component {
<SegmentOverridesIcon
onClick={(e) => {
e.stopPropagation()
this.editFeature(projectFlag, environmentFlags[id], 1)
this.editFeature(
projectFlag,
environmentFlags[id],
'segment-overrides',
)
}}
count={projectFlag.num_segment_overrides}
/>
<IdentityOverridesIcon
onClick={(e) => {
e.stopPropagation()
this.editFeature(projectFlag, environmentFlags[id], 1)
this.editFeature(
projectFlag,
environmentFlags[id],
'identity-overrides',
)
}}
count={projectFlag.num_identity_overrides}
/>
Expand Down
6 changes: 3 additions & 3 deletions frontend/web/components/PermissionsTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { EditPermissionsModal } from './EditPermissions'
import {
Environment,
Project,
UserGroup,
Role,
User, UserGroupSummary
} from "common/types/responses";
User,
UserGroupSummary,
} from 'common/types/responses'
import Tabs from './base/forms/Tabs'
import TabItem from './base/forms/TabItem'
import Input from './base/forms/Input'
Expand Down
42 changes: 38 additions & 4 deletions frontend/web/components/base/forms/Tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import { oneOf } from 'prop-types'
*/
const Tabs = class extends React.Component {
static displayName = 'Tabs'

static contextTypes = {
router: propTypes.object.isRequired,
}

constructor() {
super()
this.state = {
Expand All @@ -15,7 +20,23 @@ const Tabs = class extends React.Component {
const children = (
this.props.children?.length ? this.props.children : [this.props.children]
).filter((c) => !!c)
const value = this.props.uncontrolled ? this.state.value : this.props.value
let value = this.props.uncontrolled ? this.state.value : this.props.value
if (this.props.urlParam) {
const tabParam = Utils.fromParam()[this.props.urlParam]
if (tabParam) {
const tab = children.findIndex((v) => {
return (
(v?.props?.tabLabelString || v?.props?.tabLabel)
?.toLowerCase()
.replace(/ /g, '-') === tabParam
)
})
if (tab !== -1) {
value = tab
}
}
}

const hideNav = children.length === 1 && this.props.hideNavOnSingleTab
return (
<div className={`tabs ${this.props.className || ''}`}>
Expand All @@ -39,11 +60,24 @@ const Tabs = class extends React.Component {
onClick={(e) => {
e.stopPropagation()
e.preventDefault()
if (this.props.uncontrolled) {
if (this.props.urlParam) {
const currentParams = Utils.fromParam()
const history =
this.props.history || this.context.router.history
history.replace(
`${document.location.pathname}?${Utils.toParam({
...currentParams,
[this.props.urlParam]: (
child.props.tabLabelString || child.props.tabLabel
)
.toLowerCase()
.replace(/ /g, '-'),
})}`,
)
} else if (this.props.uncontrolled) {
this.setState({ value: i })
} else {
this.props.onChange(i)
}
this.props.onChange?.(i)
}}
className={`btn-tab ${isSelected ? ' tab-active' : ''}`}
>
Expand Down
3 changes: 1 addition & 2 deletions frontend/web/components/import-export/ImportPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ const ImportPage: FC<ImportPageType> = ({
projectId,
projectName,
}) => {
const [tab, setTab] = useState(0)
const [LDKey, setLDKey] = useState<string>('')
const [importId, setImportId] = useState<number>()
const [isLoading, setIsLoading] = useState<boolean>(false)
Expand Down Expand Up @@ -233,7 +232,7 @@ const ImportPage: FC<ImportPageType> = ({
)}
<div className='mt-4'>
{Utils.getFlagsmithHasFeature('flagsmith_import_export') ? (
<Tabs value={tab} onChange={setTab} theme='pill'>
<Tabs urlParam={'import'} theme='pill'>
<TabItem tabLabel={'Flagsmith'}>
<div className='mt-4'>
<FeatureImport projectId={projectId} />
Expand Down
11 changes: 7 additions & 4 deletions frontend/web/components/modals/CreateFlag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const CreateFlag = class extends Component {
: {
multivariate_options: [],
}
const { allowEditDescription, tab } = this.props
const { allowEditDescription } = this.props
if (this.props.projectFlag) {
this.userOverridesPage(1)
}
Expand Down Expand Up @@ -103,7 +103,6 @@ const CreateFlag = class extends Component {
repoName: '',
repoOwner: '',
selectedIdentity: null,
tab: tab || 0,
tags: tags || [],
}
}
Expand Down Expand Up @@ -1071,11 +1070,13 @@ const CreateFlag = class extends Component {
<div id='create-feature-modal'>
{isEdit && !identity ? (
<Tabs
value={this.state.tab}
onChange={(tab) => this.setState({ tab })}
onChange={() => this.forceUpdate()}
history={this.props.history}
urlParam='tab'
>
<TabItem
data-test='value'
tabLabelString='Value'
tabLabel={
<Row className='justify-content-center'>
Value{' '}
Expand Down Expand Up @@ -1263,6 +1264,7 @@ const CreateFlag = class extends Component {
{!existingChangeRequest && (
<TabItem
data-test='segment_overrides'
tabLabelString='Segment Overrides'
tabLabel={
<Row
className={`justify-content-center ${
Expand Down Expand Up @@ -1723,6 +1725,7 @@ const CreateFlag = class extends Component {
{!existingChangeRequest && createFeature && (
<TabItem
data-test='settings'
tabLabelString='Settings'
tabLabel={
<Row className='justify-content-center'>
Settings{' '}
Expand Down
7 changes: 1 addition & 6 deletions frontend/web/components/modals/CreateGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,8 @@ import PanelSearch from 'components/PanelSearch'
import Button from 'components/base/forms/Button'
import Tabs from 'components/base/forms/Tabs'
import TabItem from 'components/base/forms/TabItem'
import editPermissions, {
EditPermissionsModal,
} from 'components/EditPermissions'
import { Req } from 'common/types/requests'
import PermissionsTabs from 'components/PermissionsTabs'
import { useGetPermissionQuery } from 'common/services/usePermission'
import { useHasPermission } from 'common/providers/Permission'

const widths = [80, 80]

Expand Down Expand Up @@ -58,7 +53,7 @@ const CreateGroup: FC<CreateGroupType> = ({ group, orgId, roles }) => {
}[]
>([])

const { data: groupData, error } = useGetGroupQuery(
const { data: groupData } = useGetGroupQuery(
{ id: `${group?.id}`, orgId },
{ skip: !group || !orgId },
)
Expand Down
1 change: 1 addition & 0 deletions frontend/web/components/pages/ChangeRequestPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ const ChangeRequestsPage = class extends Component {
openModal(
'Edit Change Request',
<CreateFlagModal
history={this.props.router.history}
environmentId={this.props.match.params.environmentId}
projectId={this.props.match.params.projectId}
changeRequest={ChangeRequestStore.model[id]}
Expand Down
15 changes: 3 additions & 12 deletions frontend/web/components/pages/ChangeRequestsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,19 +113,9 @@ const ChangeRequestsPage = class extends Component {
</InfoMessage>
) : null}
</p>
<Tabs
value={this.state.tab}
onChange={(tab) => {
this.setState({ tab }, (tab) => {
this.props.router.history.replace(
`${document.location.pathname}?${Utils.toParam({
tab: this.state.tab ? 'closed' : 'open',
})}`,
)
})
}}
>
<Tabs urlParam={'tab'}>
<TabItem
tabLabelString='Open'
tabLabel={
<span className='flex-row justify-content-center'>
Open
Expand Down Expand Up @@ -229,6 +219,7 @@ const ChangeRequestsPage = class extends Component {
/>
</TabItem>
<TabItem
tabLabelString='Closed'
tabLabel={
<span className='flex-row justify-content-center'>
Closed
Expand Down
11 changes: 1 addition & 10 deletions frontend/web/components/pages/ComparePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@ class TheComponent extends Component {

constructor(props) {
super(props)
this.state = {
tab: 0,
}
}

render() {
Expand All @@ -30,13 +27,7 @@ class TheComponent extends Component {
<PageTitle className='mb-2' title={'Compare'}>
Compare data across your environments, features and identities.
</PageTitle>
<Tabs
className='mt-0'
value={this.state.tab}
onChange={(tab) => {
this.setState({ tab })
}}
>
<Tabs className='mt-0' urlParam='tab'>
<TabItem tabLabel='Environments'>
<div className='mt-4'>
<CompareEnvironments
Expand Down
2 changes: 1 addition & 1 deletion frontend/web/components/pages/EnvironmentSettingsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ const EnvironmentSettingsPage = class extends Component {
</div>
)}
{!isLoading && (
<Tabs className='mt-0' uncontrolled>
<Tabs urlParam='tab' className='mt-0' uncontrolled>
<TabItem tabLabel='General'>
<div className='mt-4'>
<h5 className='mb-5'>General Settings</h5>
Expand Down
1 change: 1 addition & 0 deletions frontend/web/components/pages/FeaturesPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ const FeaturesPage = class extends Component {
openModal(
'New Feature',
<CreateFlagModal
history={this.props.router.history}
environmentId={this.props.match.params.environmentId}
projectId={this.props.match.params.projectId}
/>,
Expand Down
39 changes: 24 additions & 15 deletions frontend/web/components/pages/OrganisationSettingsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,12 +383,7 @@ const OrganisationSettingsPage = class extends Component {
<OrganisationManageWidget />
</div>

<Tabs
hideNavOnSingleTab
value={this.state.tab || 0}
onChange={(tab) => this.setState({ tab })}
className='mt-0'
>
<Tabs hideNavOnSingleTab urlParam='tab' className='mt-0'>
{displayedTabs.includes(SettingsTab.Projects) && (
<TabItem tabLabel='Projects'>
<h5 className='mt-4 mb-2'>Projects</h5>
Expand Down Expand Up @@ -690,7 +685,11 @@ const OrganisationSettingsPage = class extends Component {
)}
{!isLoading && (
<div>
<Tabs theme='pill' uncontrolled>
<Tabs
urlParam={'type'}
theme='pill'
uncontrolled
>
<TabItem tabLabel='Members'>
<Row space className='mt-4'>
<h5 className='mb-0'>
Expand Down Expand Up @@ -776,13 +775,24 @@ const OrganisationSettingsPage = class extends Component {
{
<a
href='#'
onClick={() =>
this.setState(
{
tab: 0,
},
onClick={() => {
this.props.router.history.replace(
`${
document
.location
.pathname
}?${Utils.toParam(
{
...Utils.fromParam(),
tab: this
.state
.tab
? 'closed'
: 'open',
},
)}`,
)
}
}}
>
Upgrade your
plan
Expand Down Expand Up @@ -1522,8 +1532,7 @@ const OrganisationSettingsPage = class extends Component {

{displayedTabs.includes(SettingsTab.Usage) && (
<TabItem tabLabel='Usage'>
{this.state.tab ===
displayedTabs.indexOf(SettingsTab.Usage) && (
{Utils.fromParam().tab === 'usage' && (
<OrganisationUsage
organisationId={organisation.id}
/>
Expand Down
2 changes: 1 addition & 1 deletion frontend/web/components/pages/ProjectSettingsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ const ProjectSettingsPage = class extends Component {
<div>
<PageTitle title={'Project Settings'} />
{
<Tabs className='mt-0' uncontrolled>
<Tabs urlParam='tab' className='mt-0' uncontrolled>
<TabItem tabLabel='General'>
<div className='mt-4'>
<JSONReference
Expand Down
Loading

0 comments on commit fe21496

Please sign in to comment.