supernav-test 2.2.24 → 2.2.28

package/src/App.test.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-test('renders learn react link', () => {
- 
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

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

@@ -1,63 +0,0 @@
-import React, { useEffect } from 'react';
-import { useDispatch } from "react-redux";
-import { setUiDevMode, setUserInfo } from "./actions/AuthActions";
-import { SetLocalApps } from './actions/SidebarActions';
-import TopNav from './components/Topnav';
-import Sidebar from "./components/Sidebar";
-import { LsacSidebarProps } from "./LsacSidebar";
-import { RunModes } from "./constants/UtilityConstants";
-import { UserInfo } from "./interfaces/Models";
-import Util from "./util/Util";
-
-function AuthWrapper(props: LsacSidebarProps) {
-  const { currentNav, sidebarOptions, appContext, extraTopNavComponent, ignoreUniversalFontSizer, topNavHeight, applicationTitle, runMode, userInfo, accountName, accountSwitchUrl, logoutUrl, topnavDisplayMode, sidebarDisplayMode } = props;
-  const uiDevMode = runMode === RunModes.UI_DEV_MODE;
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(setUiDevMode(uiDevMode));
-  }, [uiDevMode]);
-
-  // Once we have an initialized keycloak, then fetch the userInfo's information
-  useEffect(() => {
-    if (!uiDevMode && userInfo) {
-      dispatch(setUserInfo(userInfo));
-    }
-  }, [uiDevMode, userInfo]);
-
-  useEffect(() => {
-    if (uiDevMode) {
-      dispatch(setUserInfo({
-        name: 'test-userInfo'
-      } as UserInfo));
-    }
-  }, [uiDevMode]);
-
-  // If the calling application has local application links, set those in the store so they can be consumed by the Sidebar
-  useEffect(() => {
-    if (sidebarOptions && sidebarOptions.length > 0) {
-      const applications = Util.sidebarOptionsToApplication(sidebarOptions);
-      dispatch(SetLocalApps(applications));
-    }
-  }, [sidebarOptions]);
-
-  const isReady = uiDevMode || userInfo;
-
-  return isReady
-    ? (
-      <div id='lsac-supernavbar-root'>
-        <TopNav extraTopNavComponent={extraTopNavComponent} topNavHeight={topNavHeight} applicationTitle={applicationTitle}
-          accountName={accountName} accountSwitchUrl={accountSwitchUrl} logoutUrl={logoutUrl} sidebarDisplayMode={sidebarDisplayMode} 
-          topnavDisplayMode={topnavDisplayMode} />
-        <Sidebar currentNav={currentNav}
-          appContext={appContext}
-          topNavHeight={topNavHeight}
-          sidebarDisplayMode={sidebarDisplayMode}
-          sidebarOptions={sidebarOptions}
-        /> 
-      </div>
-    )
-    : null;
-}
-
-export default AuthWrapper;

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

@@ -1,60 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useDispatch } from "react-redux";
-
-import AuthWrapper from "./AuthWrapper";
-import { SidebarOption, UserInfo } from "./interfaces/Models";
-import { RunModes, SidebarDisplayModes, TopnavDisplayModes } from "./constants/UtilityConstants";
-
-require('./stylesheets/LsacSidebar.css');
-require('./stylesheets/fontIcons.css');
-require('./stylesheets/font-sizer.scss');
-
-export interface LsacSidebarProps {
-  currentNav: string;
-  sidebarOptions: Array<SidebarOption>;
-  applicationTitle: string;
-  appContext?: string;
-  componentTitle: String;
-  extraTopNavComponent: any;
-  ignoreUniversalFontSizer: boolean;
-  topNavHeight: string;
-  runMode: RunModes;
-  hasKeycloakInstance: boolean;
-  userInfo?: UserInfo;
-  accountName: string;
-  accountSwitchUrl: string;
-  logoutUrl: string;
-  sidebarDisplayMode: SidebarDisplayModes;
-  topnavDisplayMode: TopnavDisplayModes;
-}
-
-function LsacSidebar(props: LsacSidebarProps) {
-
-  const content = <AuthWrapper {...props} />;
-
-  return (
-    content 
-  )
-}
-
-LsacSidebar.defaultProps = {
-  componentTitle: 'Lsac Supernavbar',
-  apiKey: null,
-  currentNav: '',
-  appContext: '',
-  sidebarOptions: [],
-  extraTopNavComponent: null,
-  ignoreUniversalFontSizer: false,
-  topNavHeight: '3.5rem',
-  applicationTitle: '',
-  runMode: 'ui_dev_mode',
-  hasKeycloakInstance: false,
-  userInfo: null,
-  accountName: '',
-  accountSwitchUrl: '',
-  logoutUrl: '',
-  topnavDisplayMode: TopnavDisplayModes.ALL,
-  sidebarDisplayMode: SidebarDisplayModes.MINIMAL
-};
-
-export default LsacSidebar;

package/src/components/lsac-supernavbar/Store.ts

@@ -1,8 +0,0 @@
-import {createStore, applyMiddleware, compose, Store} from "redux";
-import thunk from 'redux-thunk';
-import RootReducer from "./reducers/RootReducer";
-
-// @ts-ignore
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-const store:Store<any> = createStore(RootReducer, /* preloadedState, */ composeEnhancers(applyMiddleware(thunk)));
-export default store;

package/src/components/lsac-supernavbar/actions/AuthActions.ts

@@ -1,21 +0,0 @@
-import {Action, ThunkAction} from "../interfaces/Redux";
-import {UserInfo} from "../interfaces/Models";
-
-export enum actionTypes {
-  SET_UI_DEV_MODE = 'SET_UI_DEV_MODE',
-  SET_USER_INFO = 'SET_USER_INFO',
-}
-
-export function setUserInfo(user: UserInfo): Action {
-  return {
-    type: actionTypes.SET_USER_INFO,
-    payload: user,
-  }
-}
-
-export function setUiDevMode(uiDevMode: boolean): Action {
-  return {
-    type: actionTypes.SET_UI_DEV_MODE,
-    payload: uiDevMode,
-  }
-}

package/src/components/lsac-supernavbar/actions/SidebarActions.ts

@@ -1,81 +0,0 @@
-import {Application, SidebarOption} from "../interfaces/Models";
-import {Action, ThunkAction} from "../interfaces/Redux";
-import { SidebarMenuTypes } from "../constants/SidebarConstants";
-
-export enum actionTypes {
-  EXPAND_APP = 'EXPAND_APP',
-  REGISTER_EXTRA_TOP_NAV_COMPONENT = 'REGISTER_EXTRA_TOP_NAV_COMPONENT',
-  REGISTER_SIDEBAR_OPTIONS = 'REGISTER_SIDEBAR_OPTIONS',
-  SET_LOCAL_APPLICATIONS = 'SET_LOCAL_APPLICATIONS',
-  SET_EXPAND_SIDEBAR = 'SET_EXPAND_SIDEBAR',
-  SET_SELECTED_SIDEBAR_OPTION = 'SET_SELECTED_SIDEBAR_OPTION',
-  SET_TOPNAV_TOGGLE_REF = 'SET_TOPNAV_TOGGLE_REF',
-  SET_MINIMAL_SIDEBAR = 'SET_MINIMAL_SIDEBAR',
-  SET_SHOW_EXPANDED_APPS = 'SET_SHOW_EXPANDED_APPS'
-}
-
-export function registerSidebarOptions(options: SidebarOption): Action {
-  return {
-    type: actionTypes.REGISTER_SIDEBAR_OPTIONS,
-    payload: options,
-  };
-}
-
-export function registerExtraTopNavComponent(component: Element): Action {
-  return {
-    type: actionTypes.REGISTER_EXTRA_TOP_NAV_COMPONENT,
-    payload: component,
-  };
-}
-
-export function SetTopnavToggleref(ref: any): Action {
-  return {
-    type: actionTypes.SET_TOPNAV_TOGGLE_REF,
-    payload: ref
-  };
-}
-
-export function SetExpandSidebar(isExpanded: boolean): Action {
-  return {
-    type: actionTypes.SET_EXPAND_SIDEBAR,
-    payload: isExpanded,
-  };
-}
-
-export function SetMinimalSidebar(isMinimal: boolean): Action {
-  return {
-    type: actionTypes.SET_MINIMAL_SIDEBAR,
-    payload: isMinimal,
-  };
-}
-
-export function SetLocalApps(localApps: Array<Application>): Action {
-  return {
-    type: actionTypes.SET_LOCAL_APPLICATIONS,
-    payload: localApps,
-  }
-}
-
-export function SetSelectedSidebarOption(menuType: SidebarMenuTypes): Action {
-  return {
-    type: actionTypes.SET_SELECTED_SIDEBAR_OPTION,
-    payload: menuType,
-  }
-}
-
-export function ExpandApp(appKey: string, isExpanded: boolean): Action {
-  return {
-    type: actionTypes.EXPAND_APP,
-    payload: {
-      appKey,
-      isExpanded
-    },
-  }
-}
-
-export function SetShowExpandedApps(expanded: boolean): Action {
-  return {
-    type: actionTypes.SET_SHOW_EXPANDED_APPS,
-    payload: expanded
-  }
-}

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

@@ -1,235 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from "react-redux";
-import cx from 'classnames';
-import SidebarForm from "./SidebarForm";
-import { RootState } from "../reducers/RootReducer";
-import { SetExpandSidebar, SetSelectedSidebarOption, SetMinimalSidebar, SetShowExpandedApps } from "../actions/SidebarActions";
-import SidebarMainLink, { SidebarMainLinkProps } from "./SidebarMainLink";
-import SidebarSubMenu from "./SidebarSubMenu";
-import { SidebarMenuTypes } from "../constants/SidebarConstants";
-import { SidebarDisplayModes } from "../constants/UtilityConstants";
-import { KeycloakAppInfo, SidebarCategory, SidebarOption } from "../interfaces/Models";
-// icon imports
-import iconSet from "../resources/icomoon-library.json";
-import IcomoonReact from "icomoon-react";
-
-const styles = require('../stylesheets/sidebar.scss');
-
-interface SidebarProps {
-  currentNav: string;
-  appContext?: string;
-  topNavHeight: string;
-  sidebarDisplayMode: SidebarDisplayModes;
-  sidebarOptions: Array<SidebarOption>;
-}
-
-// TODO - get proper icons
-const SidebarMainLinks: Array<SidebarMainLinkProps> = [
-  {
-    id: SidebarMenuTypes.Home,
-    label: 'My Home',
-    icon: (<IcomoonReact
-      iconSet={iconSet}
-      icon="home"
-    />),
-    onClick: () => console.log('My Home'),
-    subMenu: false,
-  },
-  {
-    id: SidebarMenuTypes.MyApps,
-    label: 'My Apps',
-    icon: (<IcomoonReact
-      iconSet={iconSet}
-      icon="my-apps"
-    />),
-    onClick: () => console.log('My Apps'),
-    subMenu: false,
-  },
-  {
-    id: SidebarMenuTypes.Management,
-    label: 'Administration',
-    icon: (<IcomoonReact
-      iconSet={iconSet}
-      icon="marketplace-administration"
-    />),
-    onClick: () => console.log('Management'),
-    subMenu: false,
-  },
-  {
-    id: SidebarMenuTypes.Marketplace,
-    label: 'Marketplace',
-    icon: (<IcomoonReact
-      iconSet={iconSet}
-      icon="marketplace"
-    />),
-    onClick: () => console.log('Marketplace'),
-    subMenu: false,
-  },
-  {
-    id: SidebarMenuTypes.Collaboration,
-    label: 'Collaboration',
-    icon: (<IcomoonReact
-      iconSet={iconSet}
-      icon="collboration"
-    />),
-    onClick: () => console.log('Collaboration'),
-    subMenu: false,
-  },
-  {
-    id: SidebarMenuTypes.Engagement,
-    label: 'Engagement',
-    icon: (<IcomoonReact
-      iconSet={iconSet}
-      icon="engagement"
-    />),
-    onClick: () => console.log('Engagement'),
-    subMenu: false,
-  }
-];
-
-
-function Sidebar(props: SidebarProps) {
-  const { appContext, topNavHeight, sidebarDisplayMode, sidebarOptions } = props;
-
-  const reduxDispatch = useDispatch();
-  const expanded = useSelector((state: RootState) => sidebarDisplayMode === SidebarDisplayModes.ALL ? true : state.sidebar.expanded);
-  const isMinimal = useSelector((state: RootState) => state.sidebar.isMinimal);
-  const topNavToggleref = useSelector((state: RootState) => state.sidebar.topnavToggleref);
-  const selectedOption = mapContextToAppsId();
-
-  function mapContextToAppsId() {
-    let selectedSidebarOption = SidebarMenuTypes.MyApps;
-    if (appContext === 'management') {
-      selectedSidebarOption = SidebarMenuTypes.Management;
-    } else if (appContext === 'marketplace') {
-      selectedSidebarOption = SidebarMenuTypes.Marketplace;
-    } else if (appContext === 'collaboration') {
-      selectedSidebarOption = SidebarMenuTypes.Collaboration;
-    } else if (appContext === 'home') {
-      selectedSidebarOption = SidebarMenuTypes.Home;
-    }
-    return selectedSidebarOption;
-  }
-  // When component is loaded fetch the userInfo's available applications
-  useEffect(() => {
-    let selectedSidebarOption = mapContextToAppsId()
-    reduxDispatch(SetMinimalSidebar(sidebarDisplayMode === SidebarDisplayModes.MINIMAL));
-    reduxDispatch(SetSelectedSidebarOption(selectedSidebarOption))
-  }, [reduxDispatch, appContext]);
-
-  //when sidebar is loaded attach listener to detect clicks external to it
-  function useExternalClickListener(ref: any) {
-    useEffect(() => {
-      function handleClickOutside(event: any) {
-        let eventPath = event.composedPath();
-        if (ref.current && !(eventPath.includes(ref.current) || eventPath.includes(topNavToggleref.current)) && expanded === true) {
-          reduxDispatch(SetExpandSidebar(false));
-        }
-      }
-
-      // Bind the event listener
-      document.addEventListener("mousedown", handleClickOutside);
-
-      return () => {
-        // Unbind the event listener on clean up
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }, [ref, topNavToggleref, expanded]);
-  }
-
-  const [showForm, setShowForm] = useState(false);
-  const formDisplay = showForm ? <SidebarForm /> : '';
-
-  function CheckManagementAndMarketplaceAccess() {
-    const apps = useSelector((state: RootState) => state.auth.userInfo?.applications || new Array<KeycloakAppInfo>());
-    const appCategories = apps.filter((e:any) => e.attributes !== undefined)
-                              .filter((e:any) => e.attributes['category'] !== undefined)
-                              .filter((d:any) => Object.keys(d.attributes).length > 0)
-                              .map((app:any) => app.attributes['category'].toLowerCase());
-    const appCategoriesForSubApps = apps.filter((e:any) => e.attributes !== undefined)
-                                        .filter((e:any) => e.attributes['category'] !== undefined)
-                                        .map((app:any) => app.attributes['category'].toLowerCase());
-
-    let appCategorySubAppsCount = appCategoriesForSubApps.reduce((object:any, element:any) => {
-      object[element] = ++object[element] || 1;
-      return object;
-    }, {});
-
-    if (appCategorySubAppsCount['my_apps'] >= 1) {
-      const index = SidebarMainLinks.findIndex((e:any) => e.id === 'my_apps')
-      SidebarMainLinks[index].subMenu = true
-    }
-
-    if (appCategorySubAppsCount['management'] >= 1) {
-      const index = SidebarMainLinks.findIndex((e:any) => e.id === 'management')
-      SidebarMainLinks[index].subMenu = true
-    }
-
-    const isCollaboration = sidebarOptions.filter(option => option.category === SidebarCategory.COLLABORATION)
-    if (appCategorySubAppsCount['engagement'] >= 1) {
-      const index = SidebarMainLinks.findIndex((e:any) => e.id === 'engagement')
-      SidebarMainLinks[index].subMenu = true
-    }
-
-
-    if (appCategorySubAppsCount['collaboration'] >= 1 || isCollaboration.length) {
-      const index = SidebarMainLinks.findIndex((e:any) => e.id === 'collaboration')
-      SidebarMainLinks[index].subMenu = true
-    }
-
-    const hasManagementAccess = appCategories.includes(SidebarCategory.MANAGEMENT);
-    const hasMarketplaceAccess = appCategories.includes(SidebarCategory.MARKETPLACE);
-    const hasHomeAccess = appCategories.includes(SidebarCategory.MY_HOME);
-    const hasMyAppAccess = appCategories.includes(SidebarCategory.MY_APPS);
-    const hasCollaborationAccess = appCategories.includes(SidebarCategory.COLLABORATION) || sidebarOptions.map(option => option.category).includes(SidebarCategory.COLLABORATION);
-
-    return SidebarMainLinks.filter(mainLinkProps => (mainLinkProps.id.toLowerCase() !== SidebarMenuTypes.Marketplace || hasMarketplaceAccess))
-      .filter(mainLinkProps => (mainLinkProps.id.toLowerCase() !== SidebarMenuTypes.Management || hasManagementAccess))
-      .filter(mainLinkProps => (mainLinkProps.id.toLowerCase() !== SidebarMenuTypes.Home || hasHomeAccess))
-      .filter(mainLinkProps => (mainLinkProps.id.toLowerCase() !== SidebarMenuTypes.MyApps || hasMyAppAccess))
-      .filter(mainLinkProps => (mainLinkProps.id.toLowerCase() !== SidebarMenuTypes.Collaboration || hasCollaborationAccess))
-      .map((mainLinkProps, index) => <SidebarMainLink appContext={appContext} {...mainLinkProps} key={`lsac-sidebar-main-link-${index}`} selectedOption={selectedOption} />);
-  }
-  const mainLinks = CheckManagementAndMarketplaceAccess();
-
-  const topNavHeightBuffer: React.CSSProperties = {
-    top: topNavHeight
-  };
-
-  const sidebarRef = useRef(null);
-  useExternalClickListener(sidebarRef);
-
-
-
-  const handleMouseLeave = () => {
-    if (!isMinimal) {
-      reduxDispatch(SetExpandSidebar(false));
-      reduxDispatch(SetMinimalSidebar(true));
-    }
-    reduxDispatch(SetSelectedSidebarOption(selectedOption));
-    reduxDispatch(SetShowExpandedApps(false));
-  };
-
-  return (
-    <div className={'lsac-sidebar-container'}>
-      <div className={cx('lsac-sidebar', { expanded, isMinimal })}
-        style={topNavHeightBuffer}
-        ref={sidebarRef}
-
-        onMouseLeave={handleMouseLeave}
-      >
-        <div className='icon-strip'>
-          {mainLinks}
-        </div>
-        <div className='submenu'>
-          <SidebarSubMenu />
-        </div>
-      </div>
-      {formDisplay}
-    </div>
-  )
-}
-
-const MemoizedSidebar = React.memo(Sidebar);
-
-export default MemoizedSidebar;