Merge pull request #52 from rciam/admin-group-ui

Manage Enrollments v2

src/main/resources/theme/rciam-group/account/messages/messages_en.properties

@@ -5,7 +5,8 @@ joingroupsActivitySidebarTitle=Join group(s)
 enrollmentAccountsSidebarTitle=View enrollment progress
 groupsSidebarTitle=Groups
 groupLabel=My Groups
-groupsIntroMessage=Manage everything related to advanced Group management (groups, enrollment flow etc)
+adminGroupsIntroMessage=Manage everything related to advanced Group management (groups, enrollment flow etc)
+groupsIntroMessage=Access information about your group memberships, explore group details, and conveniently track your enrollment requests
 adminGroupLabel=Manage Groups
 adminNoGroupsText=You are not an admin in any groups
 nameDatalistTitle=Name
@@ -178,7 +179,8 @@ NO_APPROVAL=No approval
 makeDefault=Set this enrollment as default
 copyEnrollmentLink=Copy direct link to this enrollment
 deleteEnrollmentTooltip=Delete this enrollment configuration
-deleteEnrollmentConfirmation=Are you sure you want to delete this enrollment
+deleteEnrollmentConfirmationTitle=Are you sure you want to proceed with the deletion of this enrollment configuration?
+deleteEnrollmentConfirmationMessage=Deleting this enrollment configuration will result in the removal of any pending enrollment requests and the historical records of completed enrollment requests associated with this configuration.
 approveRequestTooltip=Approve this Request
 copiedTooltip=Copied to clipboard
 copyTooltip=Copy direct link to this enrollment request
@@ -208,5 +210,9 @@ EnrollmentRequestFilterTooltip=Filter Enrollment Requests
 EnrollmentRequestFilterCancel=View All Enrollment Requests
 ReviewEnrollmentTooltip=Review this enrollment request.
 ViewEnrollmentTooltip=View this enrollment request
-DefaultEnrollmentTooltip=The default enrollment configuration will be preselected on the enrollment page.
-copyGroupEnrollmentLink= Copy enrollment link to this group
+DefaultEnrollmentTooltip=The default enrollment that will be preselected on the enrollment page.
+copyGroupEnrollmentLink=Copy enrollment link to this group
+visibleEnrollmentTooltip=This enrollment will be discoverable on the enrollment page
+groupMyEnrollmentsLabel=View My Enrollment Requests
+viewMyGroupsLabel=View My Groups
+UniqueIdentifier=Unique Identifier

src/main/resources/theme/rciam-group/account/resources/content.json

@@ -58,19 +58,12 @@
     "hidden": "!features.isMyResourcesEnabled"
   },
   {
-    "id": "groups",
+    "id": "managegroups",
     "icon": "pf-icon-applications",
-    "label": "groupsSidebarTitle",
-    "descriptionLabel": "groupsIntroMessage",
+    "label": "adminGroupLabel",
+    "descriptionLabel": "adminGroupsIntroMessage",
     "hidden": "!features.isViewGroupsEnabled",
     "content": [
-      {
-        "id": "showgroups",
-        "path": "groups/showgroups",
-        "label": "groupLabel",
-        "modulePath": "/content/group-page/GroupsPage.js",
-        "componentName": "GroupsPage"
-      },
       {
         "id": "admingroups",
         "path": "groups/admingroups",
@@ -82,9 +75,33 @@
         "id": "groupenrollments",
         "path": "groups/groupenrollments",
         "label": "groupManageEnrollmentsLabel",
-        "modulePath": "/content/group-management-pages/ManageEnrollmentRequests.js",
-        "componentName": "ManageEnrollmentRequests"
+        "modulePath": "/content/group-management-pages/EnrollmentRequests.js",
+        "componentName": "EnrollmentRequests"
+      }
+    ]
+  },
+  {
+    "id": "groups",
+    "icon": "pf-icon-applications",
+    "label": "groupLabel",
+    "descriptionLabel": "groupsIntroMessage",
+    "hidden": "!features.isViewGroupsEnabled",
+    "content": [
+      {
+        "id": "showgroups",
+        "path": "groups/showgroups",
+        "label": "viewMyGroupsLabel",
+        "modulePath": "/content/group-page/GroupsPage.js",
+        "componentName": "GroupsPage"
+      },
+      {
+        "id": "mygroupenrollments",
+        "path": "groups/mygroupenrollments",
+        "label": "groupMyEnrollmentsLabel",
+        "modulePath": "/content/group-management-pages/EnrollmentRequests.js",
+        "componentName": "EnrollmentRequests"
       }
+
     ]
   }
 ]

src/main/resources/theme/rciam-group/account/resources/static/css/account.css

@@ -478,7 +478,10 @@
     margin-bottom: -0.1rem;
     margin-left:0.1rem;
 }
-
+.gm_trash-icon {
+    font-size: 1.1rem;
+    margin-left: 0.5rem;
+}
 .gm_view-groups-header .pf-c-data-list__cell {
      cursor:pointer;
 }
@@ -745,4 +748,8 @@
 .gm_search-input-double-controls .gm_cancel-icon-container{
     margin-top: 0!important;   
     height: 1.1rem!important;
+}
+
+.gm_primary-color {
+    color: #0d6efd!important;;
 }

src/main/resources/theme/rciam-group/account/src/app/ContentPages.tsx

@@ -27,7 +27,7 @@ import {GroupPage} from './content/group-management-pages/GroupPage';
 import {AdminGroupPage} from './content/group-management-pages/AdminGroupPage';
 import { InvitationLandingPage } from './content/group-management-pages/InvitationLandingPage';
 import { CreateEnrollment } from './group-widgets/GroupEnrollment/CreateEnrollment';
-import { EnrollmentRequests } from './content/group-management-pages/ManageEnrollmentRequests';
+import { EnrollmentRequests } from './content/group-management-pages/EnrollmentRequests';
 
 
 export interface ContentItem {
@@ -214,7 +214,8 @@ export function makeRoutes(): React.ReactNode {
     const customComponents = {
         GroupPage:GroupPage,
         AdminGroupPage:AdminGroupPage,
-        CreateEnrollment:CreateEnrollment
+        CreateEnrollment:CreateEnrollment,
+        EnrollmentRequests:EnrollmentRequests
     }
     const pageDefs: PageDef[] = flattenContent(content);
 
@@ -229,7 +230,8 @@ export function makeRoutes(): React.ReactNode {
     });
 
     return (<Switch>
-                <Route path="/groups/groupenrollments" component={EnrollmentRequests}/>
+                <Route path="/groups/groupenrollments" render={(props) => <EnrollmentRequests {...props} manage={true} />} />
+                <Route path="/groups/mygroupenrollments" component={EnrollmentRequests} />
                 {routes}
                 {customPages.map((item,index)=>{
                     return <Route path={item.path} component={customComponents[item.componentName]}/>

src/main/resources/theme/rciam-group/account/src/app/content/group-management-pages/ManageEnrollmentRequest.tsx → src/main/resources/theme/rciam-group/account/src/app/content/group-management-pages/EnrollmentRequest.tsx

@@ -1,21 +1,14 @@
 import * as React from 'react';
 import {FC,useState,useEffect} from 'react';
-import {  DataList,DataListItem,DataListItemCells,DataListItemRow,DataListCell, Button, Tooltip, DataListAction, SelectVariant, Checkbox,Select,SelectOption, FormAlert, Alert, Form, FormGroup, TextInput, Modal, ModalVariant, Switch, FormFieldGroupHeader, FormFieldGroup, DatePicker, Popover, NumberInput, HelperTextItem, TextArea, Badge} from '@patternfly/react-core';
+import {Button, Tooltip, Alert, Form, FormGroup, Modal, ModalVariant, FormFieldGroupHeader, FormFieldGroup, TextArea, Badge} from '@patternfly/react-core';
 // @ts-ignore
 import { HttpResponse, GroupsServiceClient } from '../../groups-mngnt-service/groups.service';
-// @ts-ignore
-import { ConfirmationModal } from '../Modals';
-import {isIntegerOrNumericString,getCurrentDate} from '../../js/utils.js'
 import { Loading } from '../../group-widgets/LoadingModal';
 import { Msg } from '../../widgets/Msg';
-import { CopyIcon, ExternalLinkSquareAltIcon, HelpIcon, ShareSquareIcon } from '@patternfly/react-icons';
-
-
-const reg_url = /^(https?|chrome):\/\/[^\s$.?#].[^\s]*$/
+import { CopyIcon, ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 export const EnrollmentRequest: FC<any> = (props) => {
 
-    const [modalInfo,setModalInfo] = useState({});
     const [loading,setLoading] = useState(false); 
     const [enrollmentRequest,setEnrollmentRequest] = useState<any>({});
     const [copyTooltip,setCopyTooltip] = useState(false);
@@ -25,7 +18,6 @@ export const EnrollmentRequest: FC<any> = (props) => {
 
     useEffect(()=>{
       if(Object.keys(props.enrollmentRequest).length !== 0) {
-
             setIsModalOpen(true);
             setEnrollmentRequest({...props.enrollmentRequest});
         }
@@ -39,12 +31,9 @@ export const EnrollmentRequest: FC<any> = (props) => {
       setCopyTooltip(true);
       setTimeout(() => {
         setCopyTooltip(false);
-      }, 2000);
-
+      }, 2000);      
     }
 
-
-
     let reviewEnrollmentRequest = (action)=>{
       setLoading(true);
       groupsService!.doPost<any>("/group-admin/enroll-request/"+ enrollmentRequest.id +"/" + action,{},{params:{...(reviewerComment?{adminJustification:reviewerComment}:{})}})
@@ -54,19 +43,17 @@ export const EnrollmentRequest: FC<any> = (props) => {
           props.close();
         }
       }).catch((err)=>{console.log(err)})
-
     }
 
     return (
       <React.Fragment>
-
         <Modal
                 variant={ModalVariant.large}
                 header={
                   <React.Fragment >
                     <h1 className="pf-c-modal-box__title gm_flex-center">
                       {enrollmentRequest?.status==='PENDING_APPROVAL'?<Msg msgKey='reviewRequestTitle'/>:<Msg msgKey='viewRequestTitle'/>}
-                      <Tooltip {...(!!(copyTooltip) ? { trigger:'manual', isVisible:true }:{trigger:'mouseenter'})}
+                      {props.managePage&&<Tooltip {...(!!(copyTooltip) ? { trigger:'manual', isVisible:true }:{trigger:'mouseenter'})}
                             content={
                                 <div>
                                     {copyTooltip?<Msg msgKey='copiedTooltip'/>:<Msg msgKey='copyTooltip'/>}
@@ -77,15 +64,15 @@ export const EnrollmentRequest: FC<any> = (props) => {
                         disapearingTooltip();
                         let link = groupsService.getBaseUrl() + '/account/#/groups/groupenrollments?id=' + encodeURI(enrollmentRequest?.id);
                         navigator.clipboard.writeText(link)}} ><CopyIcon/> </Button>
-                      </Tooltip>              
+                      </Tooltip>}              
                     </h1>
 
                   </React.Fragment>
                 }
                 isOpen={isModalOpen}
                 onClose={()=>{props.close()}}
                 actions={[
-                  ...(enrollmentRequest?.status==='PENDING_APPROVAL'?
+                  ...(enrollmentRequest?.status==='PENDING_APPROVAL'&&props.managePage?
                     [<Tooltip 
                         content={
                             <div>
@@ -124,7 +111,7 @@ export const EnrollmentRequest: FC<any> = (props) => {
 
                   <Alert variant={enrollmentRequest?.status==='ACCEPTED'?"success":enrollmentRequest?.status==='REJECTED'?"danger":"info"} title={
                     <React.Fragment>
-                      <p><Msg msgKey='reviewAlertSubmitted'/><span className="gm_normal-text">{enrollmentRequest?.submittedDate}</span></p>
+                      <p><Msg msgKey='reviewAlertSubmitted'/><span className="gm_normal-text"> {enrollmentRequest?.submittedDate}</span></p>
                       {enrollmentRequest?.approvedDate&&
                         <p className="gm_margin-top-1rem"><Msg msgKey={enrollmentRequest?.status}/>: <span className="gm_normal-text">{enrollmentRequest?.approvedDate}</span></p>
                       }
@@ -234,7 +221,7 @@ export const EnrollmentRequest: FC<any> = (props) => {
                             </FormGroup>
                           }
                         </FormFieldGroup>
-                        {enrollmentRequest?.status==='PENDING_APPROVAL'&&
+                        {enrollmentRequest?.status==='PENDING_APPROVAL'&&props.managePage&&
                           <FormFieldGroup
                             header={
                             <FormFieldGroupHeader