Rework groups view (#1797)

* Rework groups view
* Fix params issues
* fix requests spam
* fix group_management test
* add allSettled promise
* comment out and skip permissions related tests
* add api changes and fixes
* fix translation
* update changes
* fix pagination and UI
* show only selected roles
* add custom permissions and hide No permission
* drop i18n-js from lockfile

Issue: AAH-1130

CHANGES/1130.misc

@@ -0,0 +1 @@
+Update groups view to allow for role assignment

src/api/group-role.ts

@@ -0,0 +1,49 @@
+import { PulpAPI } from './pulp';
+import { RoleAPI } from './role';
+
+class API extends PulpAPI {
+  constructor() {
+    super('groups/');
+  }
+
+  getRolesWithPermissions(id, params?) {
+    const assignedRoles = this.list(params, `${id}/roles/`);
+
+    const allRoles = RoleAPI.list();
+
+    return Promise.all([assignedRoles, allRoles]).then(([assigned, all]) => {
+      // match roles with assigned roles
+      const results = assigned.data.results
+        .map(({ role, pulp_href }) => {
+          const data = all['data'].results.find(({ name }) => name === role);
+          if (data) {
+            return {
+              ...data,
+              // swap pulp_href role with assigned pulp_href role
+              // to delete the assigned role
+              pulp_href,
+            };
+          }
+        })
+        .filter(Boolean);
+
+      return {
+        data: results,
+        count: results.length,
+      };
+    });
+  }
+
+  removeRole(id, pulpId) {
+    return this.http.delete(`${id}/roles/${pulpId}/`);
+  }
+
+  addRoleToGroup(id, role, content_object = null) {
+    return this.http.post(`${id}/roles/`, {
+      role: role.name,
+      content_object,
+    });
+  }
+}
+
+export const GroupRoleAPI = new API();

src/api/group.ts

@@ -2,22 +2,6 @@ import { HubAPI } from './hub';
 
 class API extends HubAPI {
   apiPath = this.getUIPath('groups/');
-
-  getPermissions(id) {
-    return this.http.get(
-      this.apiPath + id + '/model-permissions/?limit=100000&offset=0',
-    );
-  }
-
-  addPermission(id, data) {
-    return this.http.post(this.apiPath + id + '/model-permissions/', data);
-  }
-
-  removePermission(id, permissionId) {
-    return this.http.delete(
-      this.apiPath + id + '/model-permissions/' + permissionId + '/',
-    );
-  }
 }
 
 export const GroupAPI = new API();

src/api/index.ts

@@ -56,6 +56,7 @@ export { ContainerDistributionAPI } from './container-distribution';
 export { ExecutionEnvironmentNamespaceAPI } from './execution-environment-namespace';
 export { ControllerAPI } from './controller';
 export { TaskManagementAPI } from './task-management';
+export { GroupRoleAPI } from './group-role';
 export { GenericPulpAPI } from './generic-pulp';
 export { SettingsAPI } from './settings';
 export { SettingsType } from './response-types/settings';

src/api/pulp.ts

@@ -1,7 +1,20 @@
 import { BaseAPI } from './base';
 
 export class PulpAPI extends BaseAPI {
-  constructor() {
-    super(API_HOST + PULP_API_BASE_PATH);
+  constructor(extendPath?: string) {
+    if (extendPath) {
+      super(API_HOST + PULP_API_BASE_PATH + extendPath);
+    } else {
+      super(API_HOST + PULP_API_BASE_PATH);
+    }
+  }
+
+  list(params?, apiPath?) {
+    const changedParams = { ...params };
+    if (changedParams['sort']) {
+      changedParams['ordering'] = changedParams['sort'];
+      delete changedParams['sort'];
+    }
+    return super.list(changedParams, apiPath);
   }
 }

src/api/response-types/feature-flags.ts

@@ -2,4 +2,5 @@ export class FeatureFlagsType {
   collection_auto_sign: boolean;
   collection_signing: boolean;
   execution_environments: boolean;
+  external_authentication?: boolean;
 }

src/api/role.ts

@@ -3,18 +3,30 @@ import { PulpAPI } from './pulp';
 export class API extends PulpAPI {
   apiPath = 'roles/';
 
-  list(params) {
-    const changedParams = { ...params };
-    if (changedParams['sort']) {
-      changedParams['ordering'] = changedParams['sort'];
-      delete changedParams['sort'];
-    }
-    return super.list(changedParams);
-  }
-
   updatePermissions(id, data: unknown) {
     return this.http.patch(this.apiPath + id, data);
   }
+
+  list(params?, apiPath?) {
+    const changedParams = { ...params, name__startswith: 'galaxy.' };
+    return super.list(changedParams, apiPath);
+  }
+
+  getPermissions(id) {
+    return this.http.get(
+      this.apiPath + id + '/model-permissions/?limit=100000&offset=0',
+    );
+  }
+
+  addPermission(id, data) {
+    return this.http.post(this.apiPath + id + '/model-permissions/', data);
+  }
+
+  removePermission(id, permissionId) {
+    return this.http.delete(
+      this.apiPath + id + '/model-permissions/' + permissionId + '/',
+    );
+  }
 }
 
 export const RoleAPI = new API();

src/components/empty-state/empty-state-custom.tsx

@@ -15,12 +15,17 @@ interface IProps {
   title: string;
   description: ReactNode;
   button?: ReactElement;
+  variant?: 'xs' | 'small' | 'large' | 'xl' | 'full';
 }
 
 export class EmptyStateCustom extends React.Component<IProps> {
+  static defaultProps = {
+    variant: 'small',
+  };
+
   render() {
     return (
-      <EmptyState variant={EmptyStateVariant.small}>
+      <EmptyState variant={EmptyStateVariant[this.props.variant]}>
         <EmptyStateIcon icon={this.props.icon} />
         <Title headingLevel='h4' size='lg'>
           {this.props.title}

src/components/index.ts

@@ -91,3 +91,4 @@ export { WriteOnlyField } from './patternfly-wrappers/write-only-field';
 export { ClipboardCopy } from './patternfly-wrappers/clipboard-copy';
 export { FileUpload } from './patternfly-wrappers/fileupload';
 export { ListItemActions } from './list-item-actions/list-item-actions';
+export { WizardModal } from './patternfly-wrappers/wizard-modal';

src/components/patternfly-wrappers/wizard-modal.tsx

@@ -0,0 +1,44 @@
+import { t } from '@lingui/macro';
+import React from 'react';
+import {
+  Modal,
+  ModalVariant,
+  Wizard as PFWizard,
+  WizardStep,
+} from '@patternfly/react-core';
+
+interface Props {
+  steps: WizardStep[];
+  title: string;
+  variant?: ModalVariant;
+  onClose: () => void;
+  onSave: () => void;
+}
+
+export const WizardModal = ({
+  steps,
+  title,
+  onClose,
+  onSave,
+  variant,
+}: Props) => (
+  <Modal
+    isOpen
+    variant={variant ?? ModalVariant.large}
+    showClose={false}
+    aria-label={title}
+    hasNoBodyWrapper
+  >
+    <PFWizard
+      hasNoBodyPadding
+      navAriaLabel={t`${title} steps`}
+      mainAriaLabel={t`${title} content`}
+      titleId='wizard-modal-title'
+      descriptionId='wizard-modal-description'
+      title={title}
+      steps={steps}
+      onClose={onClose}
+      onSave={onSave}
+    />
+  </Modal>
+);

src/components/permissions/permission-chip-selector.tsx

@@ -13,6 +13,7 @@ import {
 interface IProps {
   availablePermissions: string[];
   selectedPermissions: string[];
+  customPermissions?: string[];
   setSelected?: (selected: string[]) => void;
   isDisabled?: boolean;
   isViewOnly?: boolean;

src/components/role-list-table/role-list-table.tsx

@@ -43,7 +43,7 @@ export const RoleListTable: React.FC<Props> = ({
       {
         title: t`Role`,
         type: 'alpha',
-        id: 'name',
+        id: 'role',
       },
       {
         title: t`Description`,
@@ -84,12 +84,13 @@ export const ExpandableRow: React.FC<{
   rowIndex: number;
   expandableRowContent?: React.ReactNode;
   colSpan?: number;
-}> = ({ rowIndex, children, expandableRowContent, colSpan }) => {
+  'data-cy'?: string;
+}> = ({ rowIndex, children, expandableRowContent, colSpan, ...props }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
     <Tbody isExpanded={isExpanded}>
-      <Tr>
+      <Tr data-cy={props['data-cy']}>
         <Td
           expand={{
             onToggle: () => setIsExpanded(!isExpanded),
@@ -114,11 +115,14 @@ export const CheckboxRow: React.FC<{
   rowIndex?: number;
   isSelected: boolean;
   onSelect: (value) => void;
-}> = ({ rowIndex, children, isSelected, onSelect }) => (
+  isDisabled?: boolean;
+  'data-cy'?: string;
+}> = ({ rowIndex, children, isSelected, onSelect, isDisabled, ...props }) => (
   <Tbody>
-    <Tr>
+    <Tr data-cy={props['data-cy']}>
       <Td
         select={{
+          disable: isDisabled,
           variant: 'checkbox',
           rowIndex,
           onSelect,
@@ -134,9 +138,10 @@ export const RadioRow: React.FC<{
   rowIndex?: number;
   isSelected: boolean;
   onSelect: (value) => void;
-}> = ({ rowIndex, children, isSelected, onSelect }) => (
+  'data-cy'?: string;
+}> = ({ rowIndex, children, isSelected, onSelect, ...props }) => (
   <Tbody>
-    <Tr>
+    <Tr data-cy={props['data-cy']}>
       <Td
         select={{
           variant: 'radio',

src/containers/group-management/group-detail-role-management/group-detail-role-management.scss

@@ -0,0 +1,55 @@
+.hub-empty-state-box {
+  min-height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hub-custom-wizard-layout {
+  padding: 1rem 1.5rem 0;
+
+  .hub-select-roles-content {
+    overflow: auto;
+  }
+
+  .pf-c-pagination.pf-m-bottom {
+    padding-top: 0;
+  }
+
+  .hub-permission {
+    margin: 3px;
+  }
+
+  .hub-preview-roles {
+    margin-top: 20px;
+  }
+
+  .hub-permissions {
+    margin: 10px 0;
+  }
+
+  .hub-filter {
+    width: 250px;
+  }
+
+  .hub-selected-roles-list {
+    overflow-x: auto;
+  }
+
+  .hub-no-filter-data {
+    display: flex;
+    justify-content: center;
+    height: 400px;
+  }
+}
+
+.hub-loading-wizard {
+  display: flex;
+  align-items: center;
+}
+
+.hub-no-data {
+  display: flex;
+  justify-content: center;
+  min-height: 590px;
+}