Notes

import React from 'react';
import {observer} from 'mobx-react';
import {Link, withRouter} from 'react-router-dom';
import ActionsMenu from '@aosprodsys/brucke-ui-core/dist/es/components/ActionsMenuV2';
import styles from '../sass/components/nav-action-menu.scss';
import {ROLES, hasPermissions} from '../utils/hasPermissions';

const renderLinks = (links, pathname) => {
return links.length > 0 ? (
<li>
<ul className="links-wrapper">
{links.map((obj, i) => (
<li key={`${obj.url}-${i}`} className="list-link global-body-medium">
<Link to={obj.url} className={`global-link ${pathname.startsWith(obj.url) ? 'active' : ''}`}>
{obj.name}
</Link>
</li>
))}
</ul>
</li>
) : null;
};

const CSMLinks = [
...(hasPermissions([ROLES.Admin, ROLES.Read, ROLES.Write])
? [{name: 'Aggregation', url: '/aggregation/page-1'}]
: []),
...(hasPermissions([ROLES.Admin, ROLES.Read, ROLES.Write])
? [{name: 'Subscription', url: '/subscription/partners'}]
: []),
...(hasPermissions([ROLES.Admin, ROLES.Read, ROLES.Write]) ? [{name: 'Validation', url: '/validation'}] : [])
];

export const NavActionMenu = ({location: {pathname}}) => {
return (
<ActionsMenu
className="nav-action-menu"
title={isMenuOpen => <button className={`apple-icons ac-icon-${!isMenuOpen ? 'primary-nav' : 'close'}`} />}
tooltipStyles={{
top: '10px',
left: '17px',
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
padding: '14px 5px'
}}
menuRenderer={() => (
<ul className={`${styles.navActionMenu} links-wrapper`} id="navmenu">
{renderLinks(CSMLinks, pathname)}
</ul>
)}
/>
);
};

export default withRouter(observer(NavActionMenu));
import React from 'react';
import {observer} from 'mobx-react';
import {NavLink} from 'react-router-dom';
import Header from '../components/Header';
import styles from '../sass/pages/catalog-syndication-manager-workflow.scss';
import {ROLES, hasPermissions} from '../utils/hasPermissions';
import Nosign from '@apple/symbols/medium/nosign.svg';

const CSMWorkflow = () => {
return (
<section className={`${styles.page}`}>
<Header title="Catalog Syndication Manager" />
<div className="csm-manager-workflow-container" data-testid="csm-manager-workflow-container" id="home">
<section className="container-section csm-syndication">
<div className="links-wrapper">
<ul className="links">
<li>
<NavLink to="/aggregation/page-1" className={`link-card disabled-link`}>
<h3 className={`global-body-large-bold ${!hasPermissions([]) ? 'active' : ''}`}>
Aggregation Management
</h3>
</NavLink>

<span className="global-body-small-bold-permission">
<Nosign className="nosign icon" desiredFontSize={10} style={{fill: 'red'}} />
Module Not Configured
</span>
</li>

<li>
<NavLink
to="/subscription/partners"
className={`link-card ${
!hasPermissions([ROLES.Admin, ROLES.Read, ROLES.Write]) ? 'disabled-link' : ''
}`}
>
<h3
className={`global-body-large-bold ${
!hasPermissions([ROLES.Admin, ROLES.Read, ROLES.Write]) ? 'active' : ''
}`}
>
Subscription Management
</h3>
</NavLink>
{!hasPermissions([ROLES.Admin, ROLES.Read, ROLES.Write]) && (
<span className="global-body-small-bold-permission">
<Nosign className="nosign icon" desiredFontSize={10} style={{fill: 'red'}} />
Insufficient Permissions
</span>
)}
</li>

<li>
<NavLink
className={`link-card ${!hasPermissions([ROLES.Validation]) ? 'disabled-link' : ''}`}
to="/validation"
>
<h3 className={`global-body-large-bold ${!hasPermissions([ROLES.Validation]) ? 'active' : ''}`}>
Validation
</h3>
</NavLink>
{!hasPermissions([ROLES.Validation]) && (
<span className="global-body-small-bold-permission">
<Nosign className="nosign icon" desiredFontSize={10} style={{fill: 'red'}} />
Insufficient Permissions
</span>
)}
</li>
</ul>
</div>
</section>
</div>
</section>
);
};

export default observer(CSMWorkflow);
import React from 'react';
import {observer} from 'mobx-react';
import Header from '../components/Header';
import styles from '../sass/pages/validation.scss';

const Validation = () => {
return (
<section className={`${styles.validate}`}>
<Header title="Validator" link="https://tools.dv01aws-store.ucp.apple.com/deltamakervalidator/validate" />

<a
className="npi-dashboard-link"
href="https://tools.dv01aws-store.ucp.apple.com/deltamakervalidator/validate"
target="_blank"
>
<span className="global-header-app-name icon icon-after icon-external">Validator</span>
</a>
</section>
);
};
export default observer(Validation);