supernav-test 1.0.0 → 2.2.1

package/dist/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/dist/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/dist/components/lsac-supernavbar/components/SidebarTab.js

@@ -1,66 +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 /*#__PURE__*/React.createElement("div", {
-    key: identifier,
-    className: identifier
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "lsac-sidebar-tab-text"
-  }, text));
-}
-
-const MemoizedSidebarTab = /*#__PURE__*/React.memo(SidebarTab);

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

@@ -1,140 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-import {useDispatch, useSelector} from "react-redux";
-import { ReactComponent as Hamburger } from '../static/images/hamburger-icon.svg';
-import { ReactComponent as CloseHamburger } from '../static/images/close-hamburger-icon.svg'
-import { ReactComponent as SaamaLogo } from '../static/images/saama_logo.svg';
-import { ReactComponent as 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/dist/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 => app.attributes && !app.attributes['grouping']).forEach(app => {
-      if (app.rank && app.rank.length > 0) {
-        appWithRank.push(app);
-      } else {
-        appWithoutRank.push(app);
-      }
-    })
-    applications.filter(app => 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;

package/dist/components/lsac-supernavbar/components/sidebar_submenus/Marketplace.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-interface Props { }
-
-function Marketplace(props: Props) {
-  return (
-    <div>
-      <div className='title'>Marketplace</div>
-    </div>
-  )
-}
-
-export default Marketplace;

package/dist/components/lsac-supernavbar/constants/SidebarConstants.ts

@@ -1,8 +0,0 @@
-export enum SidebarMenuTypes {
-  Home = 'home',
-  MyApps = 'my_apps',
-  Management = 'management',
-  Collaboration = 'collaboration',
-  Marketplace = 'marketplace',
-  Engagement = 'engagement',
-}

package/dist/components/lsac-supernavbar/constants/UtilityConstants.ts

@@ -1,17 +0,0 @@
-export enum SidebarDisplayModes {
-  ALL = 'all',
-  MINIMAL = 'minimal',
-  HIDDEN = 'hidden',
-}
-
-export enum TopnavDisplayModes {
-  ALL = 'all',
-  MINIMAL = 'minimal'
-}
-
-export enum RunModes {
-  DEVELOPMENT = 'development',
-  VALIDATION = 'validation',
-  PRODUCTION = 'production',
-  UI_DEV_MODE = 'ui_dev_mode',
-}

package/dist/components/lsac-supernavbar/interfaces/Models.ts

@@ -1,71 +0,0 @@
-export interface User {
-  Username: string;
-  HasApiAccess: boolean;
-  OrganizationRole: string;
-  LastName: string;
-  FirstName: string;
-  Id: string;
-  IsRegistered: boolean;
-  AgreementVersion: string;
-  Phone: string;
-}
-
-export enum SidebarCategory {
-  MY_APPS = 'my_apps',
-  COLLABORATION = 'collaboration',
-  ENGAGEMENT = 'engagement',
-  MANAGEMENT = 'management',
-  MY_HOME = 'my_home',
-  MARKETPLACE = 'marketplace'
-}
-
-export interface SidebarOption {
-  label: string;
-  onClick(): void;
-  icon?: any;
-  category?: SidebarCategory;
-  icomoonId?: string;
-  id?: string; 
-  url?: string;
-}
-
-export interface ApplicationLinkInfo {
-  icon?: any;
-  label: string;
-  onClick?(): void;
-  url?: string;
-  icomoonId?: string;
-}
-
-export interface Application {
-  linkInfo: ApplicationLinkInfo;
-  appKey: string;
-  subApplications?: Array<ApplicationLinkInfo>;
-  category?: string;
-  rank?: string;
-  subRank?: number | null;
-  attributes?: any;
-}
-
-export interface KeycloakAppInfo {
-  id: string;
-  name: string;
-  description?: string;
-  url: string;
-  attributes: any
-  subRank?: number;
-}
-
-export interface UserInfo {
-  sub: string;
-  email_verified: boolean;
-  name: string;
-  accounts: Array<string>;
-  preferred_username: string;
-  "account-groups": Map<string, Array<any>>;
-  given_name: string;
-  "account-roles": Map<string, Array<string>>;
-  family_name: string;
-  email: string;
-  applications: Array<KeycloakAppInfo>;
-}