@learningpool/ui 1.6.0 → 1.6.1

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

@@ -0,0 +1,392 @@
+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
+
+  // Controls whether the application panel is open or not.
+  // const [isOpen, setIsOpen] = useState(isAppSwitcherOpen)
+  // 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 ?? ''
+
+  /**
+   * Toggles display of the Stream suite application dialog.
+   * @param event {React.MouseEvent} - Click event.
+   */
+  // const handleToggleAppsClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+  //   setIsOpen(!isOpen)
+  // }
+
+  /**
+   * Handles closing of the application dialog.
+   */
+  const handleDialogClose = (): void => {
+    // setIsOpen(false)
+    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

@@ -0,0 +1,83 @@
+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
+  handleGoToAppClick: Function
+  applicationId?: number
+  url?: string
+}
+
+const AppSwitcherItem = (props: IAppSwitcherItemProps): ReactElement => {
+  const {
+    applicationId, internalName, shortName,
+    url, handleGoToAppClick
+  } = props
+
+  /**
+   * 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 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>
+        {shortName}
+      </AppName>
+    </AppLink>
+  )
+}
+
+export default AppSwitcherItem