supernav-test 2.2.18 → 2.2.19

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

@@ -1,15 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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;