@learningpool/ui 1.6.3 → 1.6.6

package/src/lib/components/stream/AppSwitcher/AppSwitcher.tsx

@@ -1,381 +0,0 @@
-import React, { useState, useEffect, ReactElement } from 'react'
-import PropTypes from 'prop-types'
-import jwtDecode from 'jwt-decode'
-import queryString from 'query-string'
-import { defaultMessages } from '../../../lang/en-us'
-import AppSwitcherItem, { LogoVariants } from './AppSwitcherItem'
-import {
-  AppListHeader, AppListItem, AppOrganisationCount, StyledSVG,
-  BackButton, MenuContent, OrganisationLink, OrganisationList,
-  SearchBox, SearchContent, SelectedOrganisation, AppSwitcherPanel
-} from './AppSwitcherStyles'
-import { Constants } from './constants'
-import { DRAWER_WIDTH } from '../../navigation/VerticalNavigation/VerticalNavigationStyles'
-import { IApplication } from '../../../types'
-
-interface IProps {
-  userId?: string
-  layout?: string
-  token?: string
-  apiKey?: string
-  baseUrl?: string
-  applications?: IApplication[] | null
-  currentApplicationId?: number
-  localization?: any
-  isAppSwitcherOpen?: boolean
-  setIsAppSwitcherOpen?: any
-  isDrawerOpen?: boolean
-}
-
-const AppSwitcher = (props: IProps): ReactElement | null => {
-  const {
-    isAppSwitcherOpen, setIsAppSwitcherOpen,
-    isDrawerOpen, localization,
-    apiKey = '', baseUrl
-  } = props
-  let { token } = props
-
-  // Holds the applications which are displayed.
-  const [applications, setApplications] = useState<IApplication[]>([])
-  // Controls which tab is active.
-  const [activeTab, setActiveTab] = useState(Constants.Tabs.ListApplications)
-  // Holds the list of filtered organisations (on the second tab).
-  const [filteredOrgs, setFilteredOrgs] = useState<any[] | undefined>([])
-  // Holds a reference to the active application (on the second tab).
-  const [activeApplication, setActiveApplication] = useState<IApplication | null>(null)
-  // Stores any org filter text (on the second tab).
-  const [searchString, setSearchString] = useState('')
-
-  const messages = { ...localization, ...defaultMessages }
-
-  let userId = props.userId ?? ''
-
-  /**
-   * Handles closing of the application dialog.
-   */
-  const handleDialogClose = (): void => {
-    setIsAppSwitcherOpen(false)
-
-    setTimeout(() => {
-      setSearchString('')
-      setActiveApplication(null)
-      setActiveTab(Constants.Tabs.ListApplications)
-    }, 400)
-  }
-
-  /**
-   * Updates the search/filter text.
-   * @param event {React.ChangeEvent}
-   */
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setSearchString(event.target.value)
-  }
-
-  /**
-   * Navigates to the organisation tab for an application with children.
-   * @param event {React.MouseEvent} - Click event.
-   * @param applicationId {number | undefined} - Unique identifier of the application.
-   * @returns {void}
-   */
-  const handleGoToAppClick = (event: React.MouseEvent, applicationId: number | undefined): any => {
-    event?.preventDefault()
-    event?.stopPropagation()
-
-    if (!applicationId) {
-      return
-    }
-
-    const selectedApplication = applications.find(a => a.applicationId === applicationId)
-
-    if (!selectedApplication) {
-      return
-    }
-
-    setFilteredOrgs(selectedApplication.children)
-    setActiveApplication(selectedApplication)
-    setActiveTab(Constants.Tabs.ListOrgs)
-  }
-
-  /**
-   * Renders an application logo.
-   * @param internalName {string | null | undefined } - Internal name of the application.
-   * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
-   */
-  const renderApplicationLogo = (internalName: string | null | undefined, logoVariant: string): ReactElement | null => {
-    if (!internalName) {
-      return <></>
-    }
-
-    const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`
-
-    return (
-      <svg>
-        <image xlinkHref={urlToIcon} width="60" height="60" />
-      </svg>
-    )
-  }
-
-  /**
-   * Queries the Steam Home API to fetch a list of applications.
-   * @returns {Promise<IApplication[]>} A list of applications the user has access to.
-   */
-  const getApplicationsForUser = async (): Promise<IApplication[]> => {
-    // If the access token has changed the endpoint should be called again.
-    if (token && typeof token === 'string' && token !== window.localStorage.getItem(Constants.LocalStorageKey.Token)) {
-      if (!userId) {
-        // Extract user identifier from the JWT.
-        const decodedToken: any = jwtDecode(token)
-        userId = decodedToken[Constants.HomeAttributes.UserId]
-      }
-
-      const response = await fetch(`${baseUrl ?? Constants.BaseUrl}/users/${userId}/application-instances`, {
-        method: 'get',
-        headers: new Headers({
-          Authorization: `Bearer ${token}`,
-          'x-api-key': apiKey
-        })
-      })
-
-      if (response.status !== 200) {
-        console.error('Unable to retrieve user applications from Stream Home')
-        return []
-      }
-
-      const data = await response.json()
-
-      // Store the latest access token.
-      window.localStorage.setItem(Constants.LocalStorageKey.Token, token)
-
-      return data.map((application: IApplication) => {
-        const { applicationId, applicationName, shortName, internalName, customName, url } = application
-
-        return {
-          applicationId,
-          applicationName,
-          shortName,
-          internalName,
-          customName,
-          url: url || ''
-        }
-      }) as [IApplication]
-    } else {
-      return []
-    }
-  }
-
-  useEffect(() => {
-    const loadData = async (): Promise<void> => {
-      let applicationInstances: IApplication[] = []
-      let userApplications: IApplication[] = []
-
-      if (!token) {
-        const parsedQueryString = queryString.parse(window.location.search)
-
-        if (parsedQueryString.token && typeof parsedQueryString.token === 'string') {
-          token = parsedQueryString.token
-        }
-      }
-
-      if (!props.applications || props.applications.length === 0) {
-        applicationInstances = await getApplicationsForUser()
-      } else {
-        // A hard-coded list of applications has been passed to the component.
-        applicationInstances = props.applications
-      }
-
-      if (Array.isArray(applicationInstances) && applicationInstances.length) {
-        // Get a distinct list of applications the user has access to.
-        const uniqueApplicationIds: number[] = applicationInstances.map((item: { applicationId: number }) => item.applicationId).filter((value: number, index: number, self: number[]) => self.indexOf(value) === index)
-
-        // Iterate over these to build up the userApplications array.
-        uniqueApplicationIds.forEach(applicationId => {
-          const applications = applicationInstances.filter(instance => instance.applicationId === applicationId)
-
-          if (applications.length > 1) {
-            // This is an application with multiple orgs/tenants the user has access to.
-            userApplications.push({
-              applicationId,
-              applicationName: applications[0].applicationName,
-              shortName: applications[0].shortName,
-              internalName: applications[0].internalName,
-              url: '',
-              children: applications.map(a => {
-                return {
-                  name: a.customName ?? a.applicationName,
-                  url: a.url
-                }
-              })
-            })
-          } else {
-            // This is a standalone application.
-            userApplications.push({
-              applicationId: applications[0].applicationId,
-              applicationName: applications[0].applicationName,
-              shortName: applications[0].shortName,
-              internalName: applications[0].internalName,
-              url: applications[0].url
-            })
-          }
-        })
-
-        // Serialize and cache the applications returned.
-        window.localStorage.setItem(Constants.LocalStorageKey.Applications, JSON.stringify(userApplications))
-      } else {
-        const localApplications: string | null = window.localStorage.getItem(Constants.LocalStorageKey.Applications)
-
-        if (localApplications) {
-          // Recreate the application state from local storage.
-          userApplications = JSON.parse(localApplications)
-        }
-      }
-
-      // Store the user's applications.
-      setApplications(userApplications)
-    }
-
-    loadData()
-      .catch(console.error)
-  }, [token, apiKey, baseUrl, userId])
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event && event.type === 'keydown') {
-      // Close AppSwitcher if Escape key is pressed
-      if ((event as React.KeyboardEvent).key === 'Escape') {
-        handleDialogClose()
-
-        // Doesnt return focus but we need to investigate MUI again
-        // so that should handle it
-      }
-    }
-  }
-
-  if (!props.applications && (!token || !apiKey)) {
-    return null
-  }
-
-  return (
-    <AppSwitcherPanel
-      id="app-switcher-menu"
-      style={{
-        display: isAppSwitcherOpen ? 'block' : 'none',
-        left: isDrawerOpen ? DRAWER_WIDTH.Expanded : DRAWER_WIDTH.Collapsed - 3
-      }}
-      role='dialog'
-      aria-label="App Switcher"
-      onKeyDown={handleKeyDown}
-    >
-      {activeTab === Constants.Tabs.ListApplications
-        ? (
-          <div>
-            <AppListHeader>
-              <svg>
-                <image
-                  xlinkHref={`${Constants.AssetsUrl}suite/logo/latest/icon.svg`}
-                  width="24"
-                  height="24" />
-              </svg>
-              {messages['your-apps']}
-            </AppListHeader>
-            <MenuContent
-              style={{
-                display: activeTab === 1 ? 'flex' : 'none'
-              }}
-            >
-              {applications.map(({ applicationId, applicationName, shortName, internalName, url, children }) => (
-                <AppListItem key={applicationId}>
-                  {url && (
-                    <AppSwitcherItem
-                      internalName={internalName}
-                      shortName={shortName}
-                      url={url}
-                      handleGoToAppClick={handleGoToAppClick}
-                    />
-                  )}
-                  {!url && (
-                    <AppSwitcherItem
-                      internalName={internalName}
-                      shortName={shortName}
-                      handleGoToAppClick={handleGoToAppClick}
-                      applicationId={applicationId}
-                    />
-                  )}
-                  {children && (
-                    <AppOrganisationCount>
-                      {children.length}
-                    </AppOrganisationCount>
-                  )}
-                </AppListItem>
-              ))}
-            </MenuContent>
-          </div>)
-        : null}
-      {activeTab === Constants.Tabs.ListOrgs
-        ? (
-          <SearchContent
-            style={{
-              display: activeTab === 2 ? 'flex' : 'none'
-            }}
-          >
-            <BackButton
-              onClick={() => {
-                setActiveTab(Constants.Tabs.ListApplications)
-                setSearchString('')
-              }}
-            >
-              <StyledSVG className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ChevronLeftIcon">
-                <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
-              </StyledSVG>
-              {messages['back-to']}
-            </BackButton>
-            <SelectedOrganisation>
-              {renderApplicationLogo(activeApplication?.internalName, LogoVariants.Solid)}
-              <span>
-                {activeApplication ? activeApplication.applicationName : ''}
-              </span>
-            </SelectedOrganisation>
-            <SearchBox
-              id="app-switcher-search-org"
-              type={'text'}
-              value={searchString}
-              onChange={handleSearchChange}
-              placeholder={messages.search}
-            />
-            <OrganisationList>
-              {filteredOrgs?.filter(o => o.name.toLowerCase().includes(searchString.toLowerCase())).map((org, i) => (
-                <OrganisationLink
-                  key={i}
-                  href={org.url}
-                  target="_blank"
-                >
-                  {org.name}
-                  <StyledSVG className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ChevronRightIcon">
-                    <path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
-                  </StyledSVG>
-                </OrganisationLink>
-              ))}
-            </OrganisationList>
-          </SearchContent>)
-        : null}
-    </AppSwitcherPanel>
-  )
-}
-
-AppSwitcher.propTypes = {
-  accessToken: PropTypes.string,
-  apiKey: PropTypes.string,
-  layout: PropTypes.string,
-  userId: PropTypes.number,
-  baseUrl: PropTypes.string,
-  localization: PropTypes.object,
-  currentApplicationId: PropTypes.number,
-  applications: PropTypes.array
-}
-
-AppSwitcher.defaultProps = {
-  layout: Constants.Layout.Vertical,
-  baseUrl: Constants.BaseUrl,
-  localization: {},
-  applications: []
-}
-
-export default AppSwitcher

package/src/lib/components/stream/AppSwitcher/AppSwitcherItem.tsx

@@ -1,84 +0,0 @@
-import { ReactElement } from 'react'
-import { Constants } from './constants'
-import { AppLink, AppName, StyledLogoSVG } from './AppSwitcherStyles'
-
-// Bug in the naming of the icons on the CDN
-export const LogoVariants = {
-  Default: 'icon',
-  Solid: 'icon-solid',
-  Outlined: 'icon-outlined',
-  White: 'icon-white'
-}
-
-interface IAppSwitcherItemProps {
-  internalName: string
-  shortName: string
-  customName?: string
-  handleGoToAppClick: Function
-  applicationId?: number
-  url?: string
-}
-
-/**
- * Renders an application logo.
- * @param internalName {string | null | undefined } - Internal name of the application.
- * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
- */
-const renderApplicationLogo = (internalName: string | null | undefined, logoVariant: string): ReactElement | null => {
-  if (!internalName) {
-    return <></>
-  }
-
-  const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`
-
-  return (
-    <StyledLogoSVG>
-      <image xlinkHref={urlToIcon} width="60" height="60" />
-    </StyledLogoSVG>
-  )
-}
-
-const AppSwitcherItem = (props: IAppSwitcherItemProps): ReactElement => {
-  const {
-    applicationId, internalName, shortName, customName,
-    url, handleGoToAppClick
-  } = props
-
-  const solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid)
-
-  return (
-    <AppLink
-      href={url ?? '#'}
-      target="_blank"
-      onClick={event => applicationId ? handleGoToAppClick(event, applicationId) : null}
-    >
-      {applicationId && (
-        // Create a stack effect to indicate multiple
-        <>
-          <span style={{
-            position: 'absolute',
-            top: '4px',
-            transform: 'scale(0.8)',
-            zIndex: 0
-          }}>
-            {solidLogo}
-          </span>
-          <span style={{
-            position: 'absolute',
-            top: '10px',
-            transform: 'scale(0.9)',
-            zIndex: 0
-          }}>
-            {solidLogo}
-          </span>
-        </>
-      )}
-      {solidLogo}
-      <AppName>
-        {customName ?? shortName}
-      </AppName>
-    </AppLink>
-  )
-}
-
-export default AppSwitcherItem