supernav-test 1.0.0 → 2.2.1

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

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

package/dist/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/dist/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/dist/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) => e.attributes !== undefined)
-                              .filter((e) => e.attributes['category'] !== undefined)
-                              .filter((d) => Object.keys(d.attributes).length > 0)
-                              .map(app => app.attributes['category'].toLowerCase());
-    const appCategoriesForSubApps = apps.filter(e => e.attributes !== undefined)
-                                        .filter(e => e.attributes['category'] !== undefined)
-                                        .map(app => app.attributes['category'].toLowerCase());
-
-    let appCategorySubAppsCount = appCategoriesForSubApps.reduce((object, element) => {
-      object[element] = ++object[element] || 1;
-      return object;
-    }, {});
-
-    if (appCategorySubAppsCount['my_apps'] >= 1) {
-      const index = SidebarMainLinks.findIndex((e) => e.id === 'my_apps')
-      SidebarMainLinks[index].subMenu = true
-    }
-
-    if (appCategorySubAppsCount['management'] >= 1) {
-      const index = SidebarMainLinks.findIndex((e) => 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) => e.id === 'engagement')
-      SidebarMainLinks[index].subMenu = true
-    }
-
-
-    if (appCategorySubAppsCount['collaboration'] >= 1 || isCollaboration.length) {
-      const index = SidebarMainLinks.findIndex((e) => 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;

package/dist/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/dist/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) => e.attributes !== undefined && e.attributes !== null)
-        .filter((f) => Object.keys(f.attributes).length > 0)
-        .filter((e) => e.attributes['category'] !== undefined)
-        .filter(app => 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) => e.attributes !== undefined)
-        .filter((f) => Object.keys(f.attributes).length > 0)
-        .filter((e) => e.attributes['category'] !== undefined)
-        .filter(app => 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) => { onHover(id) }} title={label}>
-        {icon}
-        {iconRight}
-      </div>);
-  } else {
-    return (
-      <div className={cx('lsac-sidebar-main-link', { selected: selected }, { active: active })} onClick={onClick} onMouseOver={(e) => { onHover(id) }} title={label}>
-        {icon}
-      </div>
-    );
-  }
-}
-
-export default SidebarMainLink;