Notes

import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {Link} from 'react-router-dom';
import get from 'lodash-es/get';
import isEmpty from 'lodash-es/isEmpty';
import moment from 'moment-timezone';
import Input from '@aosprodsys/brucke-ui-core/dist/es/components/Input';
import Xmark from '@apple/symbols/medium/xmark.circle.fill.svg';
import CheckMark from '@apple/symbols/medium/checkmark.circle.fill.svg';
import Header from '@aosprodsys/brucke-ui-core/dist/es/components/Header';
import Checkbox from '@aosprodsys/brucke-ui-core/dist/es/components/Checkbox';
import ConfirmModal from '@aosprodsys/brucke-ui-core/dist/es/components/Modal';
import Position from '@aosprodsys/brucke-ui-core/dist/es/components/Position';
import FilterTable from '@aosprodsys/brucke-ui-core/dist/es/components/filterTable/FilterTable';
import Trash from '@apple/symbols/medium/trash.svg';
import Pencil from '@apple/symbols/medium/square.and.pencil.svg';
import {StoreContext} from '../../utils/StoreContext';
import Constants from '../../constants/AppConstants';
import styles from '../../sass/pages/bruckeManagement/app-management.scss';

export class AppManagement extends Component {
static contextType = StoreContext;
componentWillUnmount() {
this.context.appManagement.reset();
}

componentDidMount() {
this.context.appManagement.initialize();
}

render() {
const {
selectedDomain,
domainName,
description,
notificationGroup,
isEditCreateDomainModalOpen,
deleteConfirmation,
isDeleteDomainModalOpen,
isDeleteAppModalOpen,
isSaving,
isDeleting,
listView,
domainList,
groupViewTableData,
groupByPairs
} = this.context.appManagement;
const flattenDomainList = domainList.flatMap(domain => {
if (domain.appData.length === 0) {
return [
{
domainName: domain.domainName,
notificationType: domain.notification?.notificationType,
notificationGroup: domain.notification.notificationGroup,
modifiedBy: domain.modifiedBy,
modifyDate: domain.modifyDate,
appId: null,
appName: null,
description: null,
ownerGroupId: null,
disclosureEnabled: null,
auditEnabled: null,
analyticsIntgEnabled: null
}
];
}
return domain.appData.map(app => ({
...app,
domainName: domain.domainName,
notificationType: domain.notification?.notificationType,
notificationGroup: domain.notification.notificationGroup,
modifiedBy: domain.modifiedBy,
modifyDate: domain.modifyDate,
disclosureEnabled: app?.appBehavior?.disclosureEnabled,
auditEnabled: app?.appBehavior?.auditEnabled,
analyticsIntgEnabled: app?.appBehavior?.analyticsIntgEnabled
}));
});
const isFetching = this.context.appState.isFetching;
const groupByLength = Object.keys(groupByPairs).length;
const validNotificationGroup = notificationGroup
? /^[a-zA-Z0-9_-.][email protected]$/g.test(notificationGroup)
: false;
const validDescription = /^.{0,400}$/.test(description);
const validDomainName = /^[A-Za-z][A-Za-z0-9 -]{0,19}$/.test(domainName);
const checkCondition = condition => (typeof condition !== 'boolean' ? 'N/A' : condition ? 'Yes' : 'No');
let groupColumn = [];
let groupViewColumns = [
...groupColumn,
{
Header: 'Stats',
hideFilter: true,
accessor: 'stats',
//Cell: props => this.getStatsCellRenderer(props),
minWidth: 650,
disableSort: true
}
];
const listViewColumns = [
{
Header: 'Domain',
accessor: 'domainName',
minWidth: 200
},
{
Header: 'App Name',
accessor: 'appName',
filterType: 'discrete',
minWidth: 160,
Cell: ({value}) => <div>{value ? value : 'N/A'}</div>
},
{
Header: 'App Id',
accessor: 'appId',
filterType: 'discrete',
minWidth: 160,
Cell: ({value}) => <div>{value ? value : 'N/A'}</div>
},
{
Header: 'App Description',
accessor: 'description',
filterType: 'discrete',
minWidth: 160,
Cell: ({value}) => <div>{value ? value : 'N/A'}</div>
},
{
Header: 'Owner Directory Group',
accessor: 'ownerGroupId',
filterType: 'discrete',
minWidth: 160,
Cell: ({value}) => <div>{value ? value : 'N/A'}</div>
},
{
Header: 'Disclosure Enabled',
accessor: 'appBehavior?.disclosureEnabled',
hideFilter: true,
disableSort: true,
minWidth: 140,
Cell: ({}) => {
return (
<div className="callback-enabled">
{checkCondition(disclosureEnabled) === 'Yes' ? (
<CheckMark desiredFontSize={12} title="xmark" className="checkmark" />
) : checkCondition(disclosureEnabled) === 'No' ? (
<Xmark desiredFontSize={12} title="xmark" className="xmark" />
) : (
<span>N/A</span>
)}
</div>
);
}
},
{
Header: 'Audit Enabled',
accessor: 'appBehavior?.auditEnabled',
hideFilter: true,
disableSort: true,
minWidth: 140,
Cell: ({}) => {
return (
<div className="callback-enabled">
{checkCondition(auditEnabled) === 'Yes' ? (
<CheckMark desiredFontSize={12} title="xmark" className="checkmark" />
) : checkCondition(auditEnabled) === 'No' ? (
<Xmark desiredFontSize={12} title="xmark" className="xmark" />
) : (
<span>N/A</span>
)}
</div>
);
}
},
{
Header: 'Analytics Integration Enabled',
accessor: 'appBehavior?.analyticsIntgEnabled',
hideFilter: true,
disableSort: true,
minWidth: 140,
Cell: ({}) => {
return (
<div className="callback-enabled">
{checkCondition(analyticsIntgEnabled) === 'Yes' ? (
<CheckMark desiredFontSize={12} title="xmark" className="checkmark" />
) : checkCondition(analyticsIntgEnabled) === 'No' ? (
<Xmark desiredFontSize={12} title="xmark" className="xmark" />
) : (
<span>N/A</span>
)}
</div>
);
}
},
{
Header: 'Notification Type',
accessor: 'notificationType',
hideFilter: true,
disableSort: true,
minWidth: 140
},
{
Header: 'Notification Group',
accessor: 'notificationGroup',
hideFilter: true,
disableSort: true,
minWidth: 125
},
{
Header: 'Modified By',
accessor: 'modifiedBy',
minWidth: 210
},
{
Header: 'Modified Date',
accessor: 'modifyDate',
filterType: 'date-picker',
Cell: ({value}) => <div>{value && moment(value).format(Constants.FORMAT_DATE)}</div>,
minWidth: 160
},
{
Header: 'Actions',
accessor: 'actions',
hideFilter: true,
minWidth: 220,
disableSort: true,
Cell: ({row}) => {
const {domainName, description, notification} = row;

return (
<div className="row-actions-container">
<Pencil
desiredFontSize={9}
title="Edit"
className="action-icon edit"
onClick={event => {
this.context.appManagement.updateSelectedDomain(row, domainName, description, notification);
event.stopPropagation();
}}
/>

<Trash
desiredFontSize={10}
title="Delete"
className="delete action-btn"
onClick={event => {
this.context.appManagement.updateValue({key: 'isDeleteDomainModalOpen', value: true});
this.context.appManagement.updateValue({key: 'selectedDomain', value: row});
event.stopPropagation();
}}
/>
</div>
);
}
}
];
const tableActionContainer = rowCount => (
<section className={`header-action-container ${get(this.table, 'state.showFilters') ? 'padding-left' : ''}`}>
<div className="table-action-container">
<div className="actions-right-container">
<div className="expanded-label">
<button
className="view-select-button"
id="list-view"
disabled={listView}
onClick={() => {
this.context.appManagement.updateValue({key: 'listView', value: true});
this.table?.resetTable();
this.table?.table?.table?.scrollToPosition(0);
}}
>
<div className={`label ${listView ? 'active' : ''}`}>
<span className="apple-icons ac-icon-list" />
List View
</div>
</button>
<button
className="view-select-button"
id="grid-view"
disabled={!listView}
onClick={() => {
this.context.appManagement.updateValue({key: 'listView', value: false});
this.table?.resetTable();
if (isEmpty(groupViewTableData)) {
this.context.appManagement.getMappingStats();
}
this.table?.table?.table?.scrollToPosition(0);
}}
>
<div className={`label ${listView ? '' : 'active'}`}>
<span className="apple-icons ac-icon-grid" />
Group View
</div>
</button>
</div>
<div className="links-action-container">
<div className="row-count">{`${rowCount} ${listView ? 'Rows Displayed' : 'Groups Displayed'}`}</div>
</div>
</div>
</div>
</section>
);
const data = listView ? flattenDomainList : groupViewTableData;
const columns = listView ? listViewColumns : groupViewColumns;

return (
<div className={`${styles.page}`}>
<Header
onNavIconClick={this.context.appState.toggleLeftNav}
title={'App Management'}
rightRenderer={() => (
<div className="actions-container">
<button
className="button button-block button-elevated"
onClick={() => {
this.context.appManagement.updateValue({key: 'isEditCreateDomainModalOpen', value: 'Create'});
}}
>
Create Domain
</button>
<Link className="button button-elevated button-block" to="/app-mgmt/apps/app-setup">
Add App
</Link>
</div>
)}
/>
<section className="table-wrapper">
<Position>
{({windowInnerHeight = window.innerHeight, width = window.innerWidth}) => {
if (isFetching) return <div className="loader" />;
const groupViewWidth = 650 + groupByLength * 235;
const tableWidth = listView ? Math.max(2450, width) : Math.max(groupViewWidth, width);
return (
<FilterTable
ref={ref => {
this.table = ref;
}}
height={windowInnerHeight - 305}
width={tableWidth}
columns={columns}
enableGlobalSearch={true}
data={data}
rowCountRenderer={tableActionContainer}
infiniteScroll
defaultShowResults={100}
showNoResultsEmptyTable
enableGlobalFilter={false}
tableProps={{
estimatedRowSize: listView ? 60 : 116,
...(!listView && {autoHeight: false})
}}
/>
);
}}
</Position>
</section>
<ConfirmModal
className={styles.deleteConfirmModal}
show={isDeleteDomainModalOpen}
onHide={() => {
this.context.appManagement.resetDeleteDomainModal();
}}
modalType="warning"
modalFooter={() => (
<>
<button
className="button button-block button-secondary button-base"
onClick={() => {
this.context.appManagement.resetDeleteDomainModal();
}}
>
Cancel
</button>
<button
className="button button-block button-base"
disabled={isDeleting || !deleteConfirmation}
onClick={() => {
this.context.appManagement.deleteDomain();
}}
>
Confirm
</button>
</>
)}
>
<section>
<span className="info-text">Do you want to delete this domain?</span>
<Checkbox
inputProps={{
checked: deleteConfirmation,
onChange: () => {
this.context.appManagement.updateValue({key: 'deleteConfirmation', value: !deleteConfirmation});
}
}}
label={'Check here to confirm the deletion.'}
/>
</section>
</ConfirmModal>
<ConfirmModal
className={styles.deleteConfirmModal}
show={isDeleteAppModalOpen}
onHide={() => {
this.context.appManagement.resetDeleteAppModal();
}}
modalType="warning"
modalFooter={() => (
<>
<button
className="button button-block button-secondary button-base"
onClick={() => {
this.context.appManagement.resetDeleteAppModal();
}}
>
Cancel
</button>
<button
className="button button-block button-base"
disabled={isDeleting || !deleteConfirmation}
onClick={() => {
this.context.appManagement.deleteApp();
}}
>
Confirm
</button>
</>
)}
>
<section>
<span className="info-text">Do you want to delete this app?</span>
<Checkbox
inputProps={{
checked: deleteConfirmation,
onChange: () => {
this.context.appManagement.updateValue({key: 'deleteConfirmation', value: !deleteConfirmation});
}
}}
label={'Check here to confirm the deletion.'}
/>
</section>
</ConfirmModal>
<ConfirmModal
className={styles.editCreateConfirmModal}
show={isEditCreateDomainModalOpen}
onHide={() => {
this.context.appManagement.resetEditCreateDomainModal();
}}
modalFooter={() => (
<>
<button
className="button button-block button-secondary button-base"
onClick={() => {
this.context.appManagement.resetEditCreateDomainModal();
}}
>
Cancel
</button>
<button
className="button button-block button-base"
disabled={isSaving || !domainName || !validDomainName || !validDescription || !validNotificationGroup}
onClick={() => {
const body = {
...(isEditCreateDomainModalOpen === 'Edit' && {domainId: selectedDomain.domainId}),
domainName,
description,
notification: {
notificationGroup
}
};
isEditCreateDomainModalOpen === 'Edit'
? this.context.appManagement.editDomain(body)
: this.context.appManagement.createDomain(body);
}}
>
Save
</button>
</>
)}
>
<section>
<div className="info-text">{`${isEditCreateDomainModalOpen} Domain`}</div>
<div className="form-container">
<div className="form-dropdown">
<Input
placeholder="Domain Name"
errorMessage={
domainName &&
!validDomainName &&
'Domain Name must start with an alphabet, and supports only alphanumeric, hyphens, spaces, and have a maximum length of 20 characters.'
}
inputProps={{
debounceTimeout: 500,
value: domainName,
disabled: isSaving || isEditCreateDomainModalOpen === 'Edit',
onChange: e => {
this.context.appManagement.updateValue({key: 'domainName', value: e.target.value});
}
}}
/>
</div>
<div className="form-dropdown">
<Input
placeholder="Description"
maxCharCount={400}
inputProps={{
element: 'textarea',
value: description,
disabled: isSaving,
onChange: e => {
this.context.appManagement.updateValue({key: 'description', value: e.target.value});
}
}}
/>
</div>
<div className="form-dropdown">
<Input
placeholder="Notification Group"
errorMessage={notificationGroup && !validNotificationGroup && "Please enter valid AD's email"}
inputProps={{
debounceTimeout: 500,
value: notificationGroup,
disabled: isSaving,
onChange: e => {
this.context.appManagement.updateValue({key: 'notificationGroup', value: e.target.value});
}
}}
/>
</div>
</div>
</section>
</ConfirmModal>
</div>
);
}
}

export default observer(AppManagement);