Merge branch '18123-group-edit-page-rebase1' into main. Closes #18123

[arvados-workbench2.git] / src / views / group-details-panel / group-details-panel.tsx

diff --git a/src/views/group-details-panel/group-details-panel.tsx b/src/views/group-details-panel/group-details-panel.tsx
index e47ff8c0cc114eef30147b75ffa434b366a12398..ce3f34c75348d39c4dbd1ee63df9b2e06a70d73c 100644 (file)
--- a/src/views/group-details-panel/group-details-panel.tsx
+++ b/src/views/group-details-panel/group-details-panel.tsx
@@ -14,10 +14,19 @@ import { RootState } from 'store/store';
 import { GROUP_DETAILS_MEMBERS_PANEL_ID, GROUP_DETAILS_PERMISSIONS_PANEL_ID, openAddGroupMembersDialog, getCurrentGroupDetailsPanelUuid } from 'store/group-details-panel/group-details-panel-actions';
 import { openContextMenu } from 'store/context-menu/context-menu-actions';
 import { ResourcesState, getResource } from 'store/resources/resources';
-import { Grid, Button, Tabs, Tab, Paper } from '@material-ui/core';
+import { Grid, Button, Tabs, Tab, Paper, WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core';
 import { AddIcon } from 'components/icon/icon';
 import { getUserUuid } from 'common/getuser';
 import { GroupResource, isBuiltinGroup } from 'models/group';
+import { ArvadosTheme } from 'common/custom-theme';
+
+type CssRules = "root";
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        width: '100%',
+    }
+});
 
 export enum GroupDetailsPanelMembersColumnNames {
     FULL_NAME = "Name",
@@ -136,10 +145,10 @@ export interface GroupDetailsPanelProps {
     groupCanManage: boolean;
 }
 
-export const GroupDetailsPanel = connect(
+export const GroupDetailsPanel = withStyles(styles)(connect(
     mapStateToProps, mapDispatchToProps
 )(
-    class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps> {
+    class GroupDetailsPanel extends React.Component<GroupDetailsPanelProps & WithStyles<CssRules>> {
         state = {
           value: 0,
         };
@@ -151,7 +160,7 @@ export const GroupDetailsPanel = connect(
         render() {
             const { value } = this.state;
             return (
-                <Paper>
+                <Paper className={this.props.classes.root}>
                   <Tabs value={value} onChange={this.handleChange} variant="fullWidth">
                       <Tab data-cy="group-details-members-tab" label="MEMBERS" />
                       <Tab data-cy="group-details-permissions-tab" label="PERMISSIONS" />
@@ -203,4 +212,4 @@ export const GroupDetailsPanel = connect(
         handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
             this.setState({ value });
         }
-    });
+    }));