supernav-test 2.2.14 → 2.2.18

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@testing-library/jest-dom");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "supernav-test",
-  "version": "2.2.14",
+  "version": "2.2.18",
   "private": false,
   "dependencies": {
     "@testing-library/jest-dom": "5.14.1",
@@ -34,10 +34,13 @@
     "@types/classnames": "2.2.11",
     "@types/react": "17.0.21",
     "@types/react-dom": "17.0.9",
-    "@types/react-redux": "7.1.11",
+    "@types/react-redux": "^7.1.11",
     "@types/react-router": "5.1.8",
+    "@types/redux": "^3.6.0",
+    "@types/redux-thunk": "^2.1.0",
     "@webpack-cli/serve": "^1.5.2",
     "babel-loader": "8.1.0",
+    "copyfiles": "^2.4.1",
     "css-loader": "5.0.0",
     "customize-cra": "1.0.0",
     "eslint-plugin-node": "11.0.0",
@@ -61,9 +64,11 @@
     "webpack": "4.44.2",
     "webpack-cli": "3.3.12"
   },
-  "main": "dist/index.js",
+  "main": "dist/LsacContainer.js",
+  "types": "dist/LsacContainer.d.ts",
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "scripts": {
@@ -73,7 +78,9 @@
     "eject": "react-scripts eject",
     "clean": "rm dist/index.js",
     "build-dev": "webpack --mode development",
-    "build-prod": "webpack --mode production"
+    "build-prod": "webpack --mode production",
+    "tsc-build": "copyfiles -u 1 src/**/*.html src/**/*.css && npx tsc",
+    "publish:npm": "set NODE_ENV=production && rm -rf dist && mkdir dist && npx babel --extensions .tsx,.jsx,.ts,.js src --out-dir dist --copy-files"
   },
   "eslintConfig": {
     "extends": [

package/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/App.test.tsx

@@ -0,0 +1,8 @@
+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/LsacContainer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './App.css';
+import LsacSidebar, { LsacSidebarProps } from './components/lsac-supernavbar/LsacSidebar';
+import { Provider } from "react-redux";
+import store from './components/lsac-supernavbar/Store';
+
+function LsacContainer(props: any) {
+  return (
+    <div className="App">
+      <Provider store={store}>
+        <LsacSidebar {...props} />
+      </Provider>
+    </div>
+  );
+}
+
+export default LsacContainer;

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

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

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

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

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

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

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