supernav-test 2.2.14 → 2.2.18

package/src/components/lsac-supernavbar/components/SidebarForm.tsx

@@ -0,0 +1,15 @@
+const styles = require('../stylesheets/form.scss');
+
+interface SidebarFormProps {
+
+}
+function SidebarForm(props: SidebarFormProps) {
+  return (
+    <div className='sidebar-form'>
+      <div className='sidebar-header'>Form Launched From Sidebar Action</div>
+      <div className='sidebar-form-body'>Contents of the form</div>
+    </div>
+  );
+}
+
+export default SidebarForm;

package/src/components/lsac-supernavbar/components/SidebarMainLink.tsx

@@ -0,0 +1,86 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../reducers/RootReducer";
+import { SetSelectedSidebarOption, SetExpandSidebar, SetMinimalSidebar } from "../actions/SidebarActions";
+import { SidebarMenuTypes } from "../constants/SidebarConstants";
+import { KeycloakAppInfo, SidebarCategory } from "../interfaces/Models";
+// import IconRight from '../static/images/sidebar-icons/rightIcon.svg';
+
+const styles = require('../stylesheets/sidebar-main-link.scss');
+
+
+export interface SidebarMainLinkProps {
+  appContext?: string;
+  id: SidebarMenuTypes;
+  icon?: any;
+  label: string;
+  onClick: () => void;
+  click?: () => void;
+  selectedOption?: any;
+  subMenu: boolean;
+}
+
+function SidebarMainLink(props: SidebarMainLinkProps) {
+  const { icon, label, id, click, selectedOption, subMenu } = props;
+  const dispatch = useDispatch();
+
+  const selectedSidebarOption = useSelector((state: RootState) => state.sidebar.selectedSidebarOption);
+  const selected = id === selectedSidebarOption;
+  const apps = useSelector((state: RootState) => state.auth.userInfo?.applications || new Array<KeycloakAppInfo>());
+  const active = id === selectedOption
+  const onClick = useCallback(() => {
+    if (id === 'marketplace') {
+      const marketplaceUrl = apps.filter((e:any) => e.attributes !== undefined && e.attributes !== null)
+        .filter((f:any) => Object.keys(f.attributes).length > 0)
+        .filter((e:any) => e.attributes['category'] !== undefined)
+        .filter((app:any) => app.attributes['category'].toLowerCase() === SidebarCategory.MARKETPLACE)[0].url;
+      window.location.href = marketplaceUrl;
+      dispatch(SetExpandSidebar(false));
+      dispatch(SetMinimalSidebar(true));
+    } else if (id === 'home') {
+      const home_url = apps.filter((e:any) => e.attributes !== undefined)
+        .filter((f:any) => Object.keys(f.attributes).length > 0)
+        .filter((e:any) => e.attributes['category'] !== undefined)
+        .filter((app:any) => app.attributes['category'].toLowerCase() === SidebarCategory.MY_HOME)[0].url;
+      window.location.href = home_url;
+      dispatch(SetExpandSidebar(false));
+      dispatch(SetMinimalSidebar(true));
+    }
+  }, [id, dispatch]);
+
+  const onHover = useCallback((id: any) => {
+    dispatch(SetSelectedSidebarOption(id));
+    if (id === 'marketplace' || id === 'home') {
+      dispatch(SetExpandSidebar(false));
+      dispatch(SetMinimalSidebar(true));
+    } else {
+      dispatch(SetExpandSidebar(true));
+      dispatch(SetMinimalSidebar(false));
+    }
+  }, [id, dispatch]);
+
+  const iconRight = (
+    <div className="icon-right" >
+      <div className="icon-right-arrow">
+        {/* <IconRight /> */}
+      </div>
+    </div>
+  );
+
+  if (subMenu) {
+    return (
+      <div className={cx('lsac-sidebar-main-link', { selected: selected }, { active: active })} onClick={onClick} onMouseOver={(e:any) => { onHover(id) }} title={label}>
+        {icon}
+        {iconRight}
+      </div>);
+  } else {
+    return (
+      <div className={cx('lsac-sidebar-main-link', { selected: selected }, { active: active })} onClick={onClick} onMouseOver={(e:any) => { onHover(id) }} title={label}>
+        {icon}
+      </div>
+    );
+  }
+}
+
+export default SidebarMainLink;

package/src/components/lsac-supernavbar/components/SidebarOption.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {SidebarOption as ISidebarOption} from "../interfaces/Models";
+
+function SidebarOption(props: ISidebarOption) {
+  const { label, onClick } = props;
+  return (
+    <div className='lsac-sidebar-option' onClick={onClick}>
+      {label}
+    </div>
+  )
+}
+
+export default SidebarOption;

package/src/components/lsac-supernavbar/components/SidebarSubMenu.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { SidebarMenuTypes } from "../constants/SidebarConstants";
+import CategorizedSubmenu from './sidebar_submenus/CategorizedSubmenu';
+import { Application, KeycloakAppInfo, SidebarCategory } from "../interfaces/Models";
+import { useSelector } from "react-redux";
+import { RootState } from "../reducers/RootReducer";
+
+import SubmenuUtil from "../util/SubmenuUtil";
+
+interface Props {
+
+}
+
+interface GroupedApps {
+  myApps: Array<Application>;
+  engagementApps: Array<Application>;
+  collaborationApps: Array<Application>;
+  managementApps: Array<Application>;
+}
+
+function groupApplicationsByCategory(applications: Array<Application>) {
+  return applications.reduce((memo, application) => {
+    const { category } = application;
+    const updatedGrouping = { ...memo };
+    const { myApps, engagementApps, collaborationApps, managementApps } = updatedGrouping;
+    switch (category) {
+      case SidebarCategory.COLLABORATION:
+        updatedGrouping.collaborationApps = [...collaborationApps, application];
+        break;
+      case SidebarCategory.ENGAGEMENT:
+        updatedGrouping.engagementApps = [...engagementApps, application];
+        break;
+      case SidebarCategory.MANAGEMENT:
+        updatedGrouping.managementApps = [...managementApps, application];
+        break;
+      case SidebarCategory.MY_APPS:
+        updatedGrouping.myApps = [...myApps, application];
+        break;
+      default:
+    }
+
+    return updatedGrouping;
+  }, {
+    myApps: [],
+    engagementApps: [],
+    collaborationApps: [],
+    managementApps: [],
+  } as GroupedApps);
+}
+
+
+function getMenuForSelection(selection: SidebarMenuTypes, groupedApps: GroupedApps) {
+  const { myApps, engagementApps, collaborationApps, managementApps } = groupedApps;
+  const myAppsComponent = <CategorizedSubmenu applications={myApps} title='My Apps' className='lsac-my-apps-pane' />;
+  switch (selection) {
+    case SidebarMenuTypes.MyApps:
+      return myAppsComponent;
+    case SidebarMenuTypes.Engagement:
+      return <CategorizedSubmenu applications={engagementApps} title='Engagement' className='lsac-engagement-pane' />;
+    case SidebarMenuTypes.Collaboration:
+      return <CategorizedSubmenu applications={collaborationApps} title='Collaboration' className='lsac-collaboration-pane' />;
+    case SidebarMenuTypes.Management:
+      return <CategorizedSubmenu applications={managementApps} title='Administration' className='lsac-management-pane'/>;
+    case SidebarMenuTypes.Home:
+      return null;
+    default:
+      return <div></div>;
+  }
+}
+
+function SidebarSubMenu(props: Props) {
+  const selectedOption = useSelector((state: RootState) => state.sidebar.selectedSidebarOption);
+  const localApps = useSelector((state: RootState) => state.sidebar.localApplications);
+  const keycloakApps: Array<KeycloakAppInfo> = useSelector((state: RootState) => state.auth.userInfo?.applications) || [];
+  const applications = useMemo(() => [...localApps, ...(keycloakApps.map(SubmenuUtil.keycloakAppToApplication))], [localApps, keycloakApps]);
+  const groupedApps = useMemo(() => groupApplicationsByCategory(applications), [applications]);
+  const displayComponent = getMenuForSelection(selectedOption, groupedApps);
+
+  return displayComponent;
+}
+
+export default SidebarSubMenu;

package/src/components/lsac-supernavbar/components/SidebarTab.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import SidebarOption from "./SidebarOption";
+
+function getDetailsFromType(type) {
+  let color;
+  let text;
+  let options;
+
+  switch (type) {
+    case 'apps':
+      color = '#2d7cb5';
+      text = 'My Apps';
+      options = [];
+      break;
+    case 'collaboration':
+      color = '#0f7a11';
+      text = 'Collaboration';
+      options = [];
+      break;
+    case 'management':
+      color = '#3c003c';
+      text = 'Management';
+      options = [];
+      break;
+    case 'marketplace':
+      color = '#9a521c';
+      text = 'Marketplace';
+      options = [];
+      break;
+    case 'engage':
+      color = '#34190a';
+      text = 'Engage';
+      options = [];
+      break;
+
+    default:
+      color = '#fff';
+      text = '';
+      options = [];
+      break;
+  }
+}
+
+function SidebarTab({ type, selectedType }) {
+  const { color, text, options } = getDetailsFromType(type);
+
+  const identifier = `lsac-sidebar-tab-${type}`;
+  return (
+    <div key={identifier} className={identifier}>
+      <div className='lsac-sidebar-tab-text'>{text}</div>
+    </div>
+  )
+}
+
+const MemoizedSidebarTab = React.memo(SidebarTab);

package/src/components/lsac-supernavbar/components/Topnav.tsx

@@ -0,0 +1,140 @@
+import React, {useEffect, useRef} from 'react';
+import {useDispatch, useSelector} from "react-redux";
+// import Hamburger from '../static/images/hamburger-icon.svg';
+// import CloseHamburger from '../static/images/close-hamburger-icon.svg'
+// import SaamaLogo from '../static/images/saama_logo.svg';
+// import UserIcon from '../static/images/icon-user.svg';
+import cx from 'classnames';
+import {RootState} from "../reducers/RootReducer";
+import {SetExpandSidebar, SetTopnavToggleref, SetMinimalSidebar} from "../actions/SidebarActions";
+import {Dropdown} from "react-bootstrap";
+import {SidebarDisplayModes, TopnavDisplayModes} from "../constants/UtilityConstants";
+
+// icon imports
+import iconSet from "../resources/icomoon-library.json";
+import IcomoonReact from "icomoon-react";
+
+require('../stylesheets/topnav.scss');
+require('../stylesheets/study-filter.scss');
+require('../stylesheets/fontIcons.css');
+
+interface Props {
+  extraTopNavComponent: any;
+  topNavHeight: string;
+  applicationTitle: string;
+  accountName: string;
+  accountSwitchUrl: string;
+  logoutUrl: string;
+  sidebarDisplayMode: SidebarDisplayModes;
+  topnavDisplayMode: TopnavDisplayModes
+}
+
+function TopNav(props: Props) {
+  const { extraTopNavComponent, topNavHeight, applicationTitle, accountName, accountSwitchUrl, logoutUrl, sidebarDisplayMode, topnavDisplayMode } = props;
+
+  const dispatch = useDispatch();
+  const isMinimal = useSelector((state: RootState) => state.sidebar.isMinimal);
+  const expanded = useSelector((state: RootState) => state.sidebar.expanded);
+  const userName = useSelector((state: RootState) => state.auth.userInfo && state.auth.userInfo.name);
+  const uiDevMode = useSelector((state: RootState) => state.auth.uiDevMode);
+  const isLogoClickable = sidebarDisplayMode === SidebarDisplayModes.HIDDEN;
+
+  function handleToggleClick() {
+      // Don't handle click events if always showing the sidebar
+      if (!isLogoClickable) {
+        return;
+      }
+    dispatch(SetMinimalSidebar(!isMinimal));
+  };
+
+  const extraStyle: React.CSSProperties = {
+    height: topNavHeight,
+  };
+
+  // TODO - figure out what to do about logout
+  function logoutMenuClick() {
+    // Only handle logout when not in UI Dev mode
+    // if (!uiDevMode) {
+    //   keycloak?.logout();
+    // }
+  }
+
+
+  const expandButtonClassnames = cx('lsac-topnav-toggle', {
+    minimal: sidebarDisplayMode === SidebarDisplayModes.MINIMAL,
+  });
+
+  const userMenuClassnames = cx('logout-menu', 'icon-userInfo', {
+    "click-disabled": uiDevMode
+  });
+
+  const showHamburger = () => {
+    let menuIcon;
+    if(isLogoClickable){
+      // menuIcon = isMinimal || expanded ? <span className="close-hamburger-icon"><CloseHamburger /></span> : <Hamburger />
+    }else{
+      // menuIcon= <Hamburger />
+    }
+    return menuIcon
+  }
+
+  // create a reference to the topNav toggle button
+  // use effect to send that reference to the Sidebar store upon rendering
+  const topNavToggleref = useRef(null);
+
+  useEffect(() => {
+    dispatch(SetTopnavToggleref(topNavToggleref));
+  }, [topNavToggleref]);
+  const expandButton = (
+    <div className={expandButtonClassnames} ref = {topNavToggleref}>
+      <span className={cx('hamburger-logo',{ clickable: isLogoClickable }, {disable: !isLogoClickable})} onClick={handleToggleClick}>
+        {showHamburger() }
+      </span>
+      <span className={cx('saama-logo', { clickable: isLogoClickable })} onClick={handleToggleClick}> 
+        {/* <SaamaLogo  /> */}
+      </span>
+      <span className='LSAC-logo'>Life Science <br/>Analytics Cloud</span>
+      { !!applicationTitle ? <span className="app-name">{applicationTitle}</span> : <></>}
+    </div>
+    );
+  const content = topnavDisplayMode === TopnavDisplayModes.MINIMAL ? (
+    <div className='top-nav-minimal header-logo'style={extraStyle}>
+      {expandButton}
+    </div>
+    )
+    : (
+      <div className='top-nav' style={extraStyle}>
+        <div className='top-nav-row'>
+          <div className='header-logo'>
+            {expandButton}
+          </div>
+          {extraTopNavComponent}
+          <div className={userMenuClassnames} onClick={logoutMenuClick}>
+            <div className="user-icon">
+              <Dropdown>
+                <Dropdown.Toggle variant="" id="dropdown-basic">
+                <span className="account-name">{accountName}</span>
+                  {/* <UserIcon /> */}
+                </Dropdown.Toggle>
+                <div className="user-dropdown-contents">
+                  <Dropdown.Menu>
+                    <span>{userName}</span>
+                    <span className="switch-account-link-wrapper">
+                      <Dropdown.Item href={accountSwitchUrl}><IcomoonReact iconSet={iconSet} icon="switch" /> Switch Account</Dropdown.Item>
+                    </span>
+                    <span className="user-details-logout">
+                      <Dropdown.Item href={logoutUrl}><IcomoonReact iconSet={iconSet} icon="exit" />Logout</Dropdown.Item>
+                    </span>
+                  </Dropdown.Menu>
+                </div>
+               </Dropdown>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+
+  return content;
+}
+
+export default TopNav;

package/src/components/lsac-supernavbar/components/sidebar_submenus/CategorizedSubmenu.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { RootState } from '../../reducers/RootReducer';
+import { Application, KeycloakAppInfo } from "../../interfaces/Models";
+import SubmenuUtil from "../../util/SubmenuUtil";
+import { SetSelectedSidebarOption, SetShowExpandedApps } from '../../actions/SidebarActions';
+
+interface MyAppsProps {
+  title: string;
+  applications: Array<Application>,
+  className: string;
+}
+
+function CategorizedSubmenu(props: MyAppsProps) {
+  const Dispatch = useDispatch();
+  const { title, applications, className } = props;
+  const showExpanded = useSelector((state: RootState) => state.sidebar.showExpandedApps);
+  const selectedSidebarOption = useSelector((state: RootState) => state.sidebar.selectedSidebarOption);
+  function setSelectedSidebarOption() {
+    Dispatch(SetSelectedSidebarOption(selectedSidebarOption));
+  };
+
+  function AppSequence(a: any, b: any) {
+    let x = (a.rank && a.rank.length > 0) ? parseInt(a.rank) : a.linkInfo.label.toUpperCase(),
+      y = (b.rank && b.rank.length > 0) ? parseInt(b.rank) : b.linkInfo.label.toUpperCase();
+    return x == y ? 0 : x > y ? 1 : -1;
+  };
+
+  function getSortedAppsList() {
+    let appWithRank: Array<any> = [], appWithoutRank: Array<any> = [];
+    applications.filter((app:any) => app.attributes && !app.attributes['grouping']).forEach(app => {
+      if (app.rank && app.rank.length > 0) {
+        appWithRank.push(app);
+      } else {
+        appWithoutRank.push(app);
+      }
+    })
+    applications.filter((app:any) => app.attributes === undefined).forEach(app => {
+      appWithoutRank.push(app);
+    })
+    appWithRank = appWithRank.sort(AppSequence);
+    appWithoutRank = appWithoutRank.sort(AppSequence);
+    return [...appWithRank, ...appWithoutRank];
+  }
+
+  const appLinks = getSortedAppsList();
+  const toggleShowExpanded = () => {
+    Dispatch(SetShowExpandedApps(!showExpanded));
+  };
+
+  const expandedApps = title === 'My Apps' && applications.filter((app) => app.attributes['grouping']);
+  expandedApps && appLinks.splice(2, 0, expandedApps);
+  const rankedApps = appLinks.map((app, idx) => {
+    if (app.linkInfo) {
+      return SubmenuUtil.generateLink(app, idx);
+    } else {
+      return SubmenuUtil.generateSubApplications(app, toggleShowExpanded, showExpanded)
+    }
+  })
+
+  return (
+    <div className={className} key={Math.random()}>
+      <div className='title'>{title}</div>
+      {rankedApps}
+    </div>
+  )
+}
+
+export default CategorizedSubmenu;