Skip to content

Commit

Permalink
Mfancher/left nav reorg (#827)
Browse files Browse the repository at this point in the history 
* save progress

* Finish Initial tutorial

Added a tutorial when a user access' tombolo and doesn't have applications or clusters set up.

Locked all components until these are set up.

Guided tour with links to guides

Once set up, unlocks rest of application

* Initial tour finished

Added back cluster tour on the cluster screen to work with new workflows.

* Update leftNav

reorganize left nav, comment out unused components,  and fix highlighting
  • Loading branch information
@FancMa01
FancMa01 authored Aug 19, 2024
1 parent ffe4611 commit 912306d
Showing 1 changed file with 64 additions and 81 deletions.
145 changes: 64 additions & 81 deletions Tombolo/client-reactjs/src/components/layout/LeftNav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
} from '@ant-design/icons';

import { hasEditPermission } from '../common/AuthUtil.js';
import Text from '../common/Text';

function getItem(label, key, icon, children, type, disabled) {
return {
Expand All @@ -34,27 +33,29 @@ const { Sider } = Layout;

class LeftNav extends Component {
state = {
current: '1',
current: '0',
};

componentDidUpdate(prevProps) {
const applicationId = this.props?.applicationId;
const prevApplicationId = prevProps?.applicationId;
if (applicationId !== prevApplicationId) {
// if current app and prev app is not same we are redirected to /appid/asset page, so we will reset menu highlight
this.setState({ current: '1' });
}
}

componentDidMount() {
const options = {
assets: '1',
dataflow: '2',
dataflowinstances: '3',
actions: '4',
clusters: '5',
github: '6',
consumers: '7',
applications: '8',
fileMonitoring: '4a',
directoryMonitoring: '4b',
clustermonitoring: '4c',
jobmonitoring: '4d',
superfileMonitoring: '4e',
orbitMonitoring: '4f',
notifications: '5a',
clusterUsage: '5b',
Orbit: '5c',
clusters: '6',
github: '8',
consumers: '9',
applications: '10',
integrations: '11',
msTeams: '12a',
};

// on init we check pathname if it contains options key in name, if it does => highlight that menu item
Expand Down Expand Up @@ -96,7 +97,7 @@ class LeftNav extends Component {
else return '';
};

const items = [
const workflowItems = [
getItem(
<>
{disabled || clusterDisabled ? (
Expand Down Expand Up @@ -157,6 +158,9 @@ class LeftNav extends Component {
null,
clusterDisabled
),
];

const monitoringItems = [
getItem(
<>
<DashboardOutlined />
Expand Down Expand Up @@ -289,7 +293,7 @@ class LeftNav extends Component {
),
];

const settingItems = [
const connectionItems = [
getItem(
<>
{disabled ? (
Expand All @@ -310,28 +314,6 @@ class LeftNav extends Component {
null,
clusterDisabled
),
getItem(
<>
<BellOutlined />
<span style={{ marginLeft: '1rem' }}>Notifications</span>
</>,
'7',
null,
[
getItem(
<Link to={'/admin/notification-settings/msTeams'}>
<span>
<i className="fa fa-windows" /> MS Teams
</span>
</Link>,
'7a',
null,
null
),
],
null,
clusterDisabled
),
getItem(
<>
{disabled || clusterDisabled ? (
Expand All @@ -352,26 +334,6 @@ class LeftNav extends Component {
null,
clusterDisabled
),
getItem(
<>
{disabled || clusterDisabled ? (
<>
<i className="fa fa-fw fa-user-circle" />
<span style={{ marginLeft: '1rem' }}>Collaborator</span>
</>
) : (
<Link style={{ color: 'rgba(255, 255, 255, 0.65)' }} to={'/admin/consumers'}>
<i className="fa fa-fw fa-user-circle" />
<span style={{ marginLeft: '1rem' }}>Collaborator</span>
</Link>
)}
</>,
'9',
null,
null,
null,
clusterDisabled
),
];

const adminItems = [
Expand Down Expand Up @@ -403,6 +365,28 @@ class LeftNav extends Component {
null,
clusterDisabled
),
getItem(
<>
<BellOutlined />
<span style={{ marginLeft: '1rem' }}>Notifications</span>
</>,
'12',
null,
[
getItem(
<Link to={'/admin/notification-settings/msTeams'}>
<span>
<i className="fa fa-windows" /> MS Teams
</span>
</Link>,
'12a',
null,
null
),
],
null,
clusterDisabled
),
//TODO: Uncomment when compliance is ready
// getItem(
// <Link style={{ color: 'rgba(255, 255, 255, 0.65)' }} to={'/admin/compliance'}>
Expand All @@ -418,6 +402,18 @@ class LeftNav extends Component {
this.setState({ current: e.key });
};

const title = (title) => {
return (
<Typography.Title ellipsis={true} className="left-nav-title">
{title}
</Typography.Title>
);
};

const menu = (items) => {
return <Menu theme="dark" mode="inline" items={items} selectedKeys={[this.state.current]} onClick={onClick} />;
};

return (
<Sider
collapsible
Expand All @@ -436,27 +432,14 @@ class LeftNav extends Component {
bottom: 0,
zIndex: 100,
}}>
<Menu theme="dark" mode="inline" items={items} selectedKeys={[this.state.current]} onClick={onClick} />

{canEdit && this.props.collapsed ? null : (
<Typography.Title ellipsis={true} className="left-nav-title">
{<Text text="Settings" />}
</Typography.Title>
)}

{canEdit ? (
<Menu theme="dark" mode="inline" items={settingItems} selectedKeys={[this.state.current]} onClick={onClick} />
) : null}

{canEdit && this.props.collapsed ? null : (
<Typography.Title ellipsis={true} className="left-nav-title">
{<Text text="Admin" />}
</Typography.Title>
)}

{canEdit ? (
<Menu theme="dark" mode="inline" items={adminItems} selectedKeys={[this.state.current]} onClick={onClick} />
) : null}
{this.props.collapsed ? null : title('Workflows')}
{menu(workflowItems)}
{this.props.collapsed ? null : title('Monitoring')}
{menu(monitoringItems)}
{canEdit && this.props.collapsed ? null : title('Connections')}
{menu(connectionItems)}
{canEdit && this.props.collapsed ? null : title('Admin')}
{canEdit && menu(adminItems)}
</Sider>
);
}
Expand Down

0 comments on commit 912306d

Please sign in to comment.