Minor adjustments to <LatestGitHubRelease /> component

SharePointFramework/PortfolioExtensions/src/components/Footer/InstallVersionTooltipContent/LatestGitHubRelease/index.tsx

@@ -1,22 +1,23 @@
 import { ActionButton, Icon, Link } from '@fluentui/react'
 import strings from 'PortfolioExtensionsStrings'
 import React, { FC } from 'react'
+import { ILatestGitHubReleaseProps } from './types'
 import styles from './LatestGitHubRelease.module.scss'
 import { useLatestGitHubRelease } from './useLatestGitHubRelease'
 
 /**
  * Component for displaying the latest GitHub release and a
  * comparison between the latest GitHub release and the installed version.
  */
-export const LatestGitHubRelease: FC = () => {
+export const LatestGitHubRelease: FC<ILatestGitHubReleaseProps> = (props) => {
   const { latestGitHubRelease, latestGitHubVersion, installedVersion, versionComparisonIconProps } =
-    useLatestGitHubRelease()
+    useLatestGitHubRelease(props)
 
   return (
     <div className={styles.root}>
       <div>
         <span className={styles.label}>{strings.LatestGitHubReleaseLabel}</span>
-        <span className={styles.latestGitHubReleaseLink}>
+        <span className={styles.latestGitHubReleaseLink} title={strings.LatestGitHubReleaseLinkTitle}>
           <Link href={latestGitHubRelease.html_url} target='_blank' rel='noopener noreferrer'>
             {latestGitHubVersion.toString()}
           </Link>
@@ -38,3 +39,12 @@ export const LatestGitHubRelease: FC = () => {
     </div>
   )
 }
+
+LatestGitHubRelease.defaultProps = {
+  latestGitHubReleaseIsNewerIconName: 'ChevronUp',
+  latestGitHubReleaseIsNewerIconColor: 'green',
+  latestGitHubReleaseIsOlderIconName: 'ChevronDown',
+  latestGitHubReleaseIsOlderIconColor: 'red',
+  latestGitHubReleaseIsSameIconName: 'ChevronRight',
+  latestGitHubReleaseIsSameIconColor: 'black'
+}

SharePointFramework/PortfolioExtensions/src/components/Footer/InstallVersionTooltipContent/LatestGitHubRelease/types.ts

@@ -0,0 +1,9 @@
+
+export interface ILatestGitHubReleaseProps {
+  latestGitHubReleaseIsNewerIconName?: string;
+  latestGitHubReleaseIsNewerIconColor?: string;
+  latestGitHubReleaseIsOlderIconName?: string;
+  latestGitHubReleaseIsOlderIconColor?: string;
+  latestGitHubReleaseIsSameIconName?: string;
+  latestGitHubReleaseIsSameIconColor?: string;
+}

SharePointFramework/PortfolioExtensions/src/components/Footer/InstallVersionTooltipContent/LatestGitHubRelease/useLatestGitHubRelease.ts

@@ -2,12 +2,20 @@ import { Version } from '@microsoft/sp-core-library'
 import strings from 'PortfolioExtensionsStrings'
 import { useContext } from 'react'
 import { FooterContext } from '../../context'
+import { ILatestGitHubReleaseProps } from './types'
 
-export function useLatestGitHubRelease() {
-  const { props } = useContext(FooterContext)
-  const latestGitHubRelease = props.gitHubReleases[0]
+/**
+ * Component logic hook for the `LatestGitHubRelease` component. 
+ * Returns the latest GitHub release, latest GitHub version, installed 
+ * version and version comparison icon props.
+ * 
+ * @param props Props for the `LatestGitHubRelease` component
+ */
+export function useLatestGitHubRelease(props: ILatestGitHubReleaseProps) {
+  const context = useContext(FooterContext)
+  const latestGitHubRelease = context.props.gitHubReleases[0]
   const latestGitHubVersion = Version.parse(latestGitHubRelease.tag_name.substring(1))
-  const installedVersion = props.installEntries[0].installVersion
+  const installedVersion = context.props.installEntries[0].installVersion
 
   /**
    * Get icon props based on the comparison between the latest GitHub version and the installed version.
@@ -17,35 +25,36 @@ export function useLatestGitHubRelease() {
   const getVersionComparisonIconProps = () => {
     if (latestGitHubVersion.greaterThan(installedVersion)) {
       return {
-        iconName: 'ChevronUp',
+        iconName: props.latestGitHubReleaseIsNewerIconName,
         styles: {
           root: {
-            color: 'green'
+            color: props.latestGitHubReleaseIsNewerIconColor
           }
         },
         title: strings.LatestGitHubReleaseIsNewerText
       }
     } else if (latestGitHubVersion.lessThan(installedVersion)) {
       return {
-        iconName: 'ChevronDown',
+        iconName: props.latestGitHubReleaseIsOlderIconName,
         styles: {
           root: {
-            color: 'red'
+            color: props.latestGitHubReleaseIsOlderIconColor
           }
         },
         title: strings.LatestGitHubReleaseIsOlderText
       }
     }
     return {
-      iconName: 'CircleRing',
+      iconName: props.latestGitHubReleaseIsSameIconName,
       styles: {
         root: {
-          color: 'orange'
+          color: props.latestGitHubReleaseIsSameIconColor
         }
       },
       title: strings.LatestGitHubReleaseIsSameText
     }
   }
+
   return {
     latestGitHubRelease,
     latestGitHubVersion,

SharePointFramework/PortfolioExtensions/src/components/Footer/InstallVersionTooltipContent/index.tsx

@@ -5,6 +5,10 @@ import { FooterContext } from '../context'
 import styles from './InstallVersionTooltipContent.module.scss'
 import { LatestGitHubRelease } from './LatestGitHubRelease'
 
+/**
+ * Component for displaying information about the latest installation
+ * of Prosjektportalen 365.
+ */
 export const InstallVersionTooltipContent: FC = () => {
   const { latestEntry, props } = useContext(FooterContext)
   const dateTimeFormatOptions: Intl.DateTimeFormatOptions = {

SharePointFramework/PortfolioExtensions/src/components/Footer/useFooter.ts

@@ -2,7 +2,8 @@ import { IFooterProps } from './types'
 
 /**
  * Component logic hook for the `Footer` component. Returns the latest entry
- * from the `entries` prop (which is sorted by `InstallStartTime`).
+ * from the `entries` prop (which is sorted by `InstallStartTime`) and
+ * the installed version string.
  *
  * @param props Props for the `Footer` component
  */

SharePointFramework/PortfolioExtensions/src/loc/myStrings.d.ts

@@ -1,4 +1,5 @@
 declare interface IPortfolioExtensionsStrings {
+  LatestGitHubReleaseLinkTitle: string
   LatestGitHubReleaseDownloadButtonText: string
   LatestGitHubReleaseIsNewerText: any
   LatestGitHubReleaseIsOlderText: any

SharePointFramework/PortfolioExtensions/src/loc/nb-no.js

@@ -43,6 +43,7 @@ define([], function () {
     LatestGitHubReleaseIsNewerText: 'En nyere versjon er tilgjengelig på GitHub',
     LatestGitHubReleaseIsOlderText: 'Versjonen som er installert er nyere enn den siste release fra GitHub',
     LatestGitHubReleaseIsSameText: 'Versjonen som er installert er den siste release fra GitHub',
-    LatestGitHubReleaseDownloadButtonText: 'Last ned siste release fra GitHub'
+    LatestGitHubReleaseDownloadButtonText: 'Last ned siste release fra GitHub',
+    LatestGitHubReleaseLinkTitle: 'Se siste release på GitHub'
   }
 })