import { omit } from 'lodash';
import * as React from 'react';
import { Helmet } from 'react-helmet-async';
+import { getSystemInfo } from '../../../api/system';
import { createGroup, deleteGroup, searchUsersGroups, updateGroup } from '../../../api/user_groups';
import ListFooter from '../../../components/controls/ListFooter';
import SearchBox from '../../../components/controls/SearchBox';
import Suggestions from '../../../components/embed-docs-modal/Suggestions';
import { translate } from '../../../helpers/l10n';
import { omitNil } from '../../../helpers/request';
-import { Group, Paging } from '../../../types/types';
+import { Group, Paging, SysInfoCluster } from '../../../types/types';
import DeleteForm from './DeleteForm';
import Form from './Form';
import Header from './Header';
loading: boolean;
paging?: Paging;
query: string;
+ manageProvider?: string;
}
export default class App extends React.PureComponent<{}, State> {
componentDidMount() {
this.mounted = true;
this.fetchGroups();
+ this.fetchManageInstance();
}
componentWillUnmount() {
});
};
+ async fetchManageInstance() {
+ const info = (await getSystemInfo()) as SysInfoCluster;
+ if (this.mounted) {
+ this.setState({
+ manageProvider: info.System['External Users and Groups Provisioning'],
+ });
+ }
+ }
+
stopLoading = () => {
if (this.mounted) {
this.setState({ loading: false });
};
render() {
- const { editedGroup, groupToBeDeleted, groups, loading, paging, query } = this.state;
+ const { editedGroup, groupToBeDeleted, groups, loading, paging, query, manageProvider } =
+ this.state;
const showAnyone = 'anyone'.includes(query.toLowerCase());
<Suggestions suggestions="user_groups" />
<Helmet defer={false} title={translate('user_groups.page')} />
<main className="page page-limited" id="groups-page">
- <Header onCreate={this.handleCreate} />
+ <Header onCreate={this.handleCreate} manageProvider={manageProvider} />
<SearchBox
className="big-spacer-bottom"
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import DocLink from '../../../components/common/DocLink';
import { Button } from '../../../components/controls/buttons';
+import { Alert } from '../../../components/ui/Alert';
import { translate } from '../../../helpers/l10n';
import Form from './Form';
interface Props {
onCreate: (data: { description: string; name: string }) => Promise<void>;
+ manageProvider?: string;
}
-interface State {
- createModal: boolean;
-}
-
-export default class Header extends React.PureComponent<Props, State> {
- mounted = false;
- state: State = { createModal: false };
-
- componentDidMount() {
- this.mounted = true;
- }
-
- componentWillUnmount() {
- this.mounted = false;
- }
-
- handleCreateClick = () => {
- this.setState({ createModal: true });
- };
-
- handleClose = () => {
- if (this.mounted) {
- this.setState({ createModal: false });
- }
- };
-
- handleSubmit = (data: { name: string; description: string }) => {
- return this.props.onCreate(data);
- };
+export default function Header(props: Props) {
+ const { manageProvider } = props;
+ const [createModal, setCreateModal] = React.useState(false);
- render() {
- return (
- <>
- <header className="page-header" id="groups-header">
- <h1 className="page-title">{translate('user_groups.page')}</h1>
+ return (
+ <>
+ <div className="page-header" id="groups-header">
+ <h2 className="page-title">{translate('user_groups.page')}</h2>
- <div className="page-actions">
- <Button id="groups-create" onClick={this.handleCreateClick}>
- {translate('groups.create_group')}
- </Button>
- </div>
+ <div className="page-actions">
+ <Button
+ id="groups-create"
+ disabled={manageProvider !== undefined}
+ onClick={() => setCreateModal(true)}
+ >
+ {translate('groups.create_group')}
+ </Button>
+ </div>
+ {manageProvider === undefined ? (
<p className="page-description">{translate('user_groups.page.description')}</p>
- </header>
- {this.state.createModal && (
- <Form
- confirmButtonText={translate('create')}
- header={translate('groups.create_group')}
- onClose={this.handleClose}
- onSubmit={this.handleSubmit}
- />
+ ) : (
+ <Alert className="page-description max-width-100 width-100" variant="info">
+ <FormattedMessage
+ defaultMessage={translate('user_groups.page.managed_description')}
+ id="user_groups.page.managed_description"
+ values={{
+ provider: manageProvider,
+ link: (
+ <DocLink to="/instance-administration/authentication/overview/">
+ {translate('documentation')}
+ </DocLink>
+ ),
+ }}
+ />
+ </Alert>
)}
- </>
- );
- }
+ </div>
+ {createModal && (
+ <Form
+ confirmButtonText={translate('create')}
+ header={translate('groups.create_group')}
+ onClose={() => setCreateModal(false)}
+ onSubmit={props.onCreate}
+ />
+ )}
+ </>
+ );
}