Merge pull request #1198 from pmatthews05/main

Update react-application-messagebanner to version SPFX 1.18.2
pnp · Mar 10, 2024 · 31069fa · 31069fa
2 parents 19a2f6e + 585185b
commit 31069fa
Show file tree

Hide file tree

Showing 17 changed files with 416 additions and 52 deletions.
diff --git a/.metadata/samples.json b/.metadata/samples.json
@@ -2645,7 +2645,7 @@
       "A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites. Can target either Site or Web Scoped. Allows a site owner to modify the text, font size, colours and height of the banner. Specify a start date to control when the banner is visible to members of a site. Uses the latest v1.15.2 of SPFX framework."
     ],
     "creationDateTime": "2022-11-09",
-    "updateDateTime": "2022-11-09",
+    "updateDateTime": "2024-01-10",
     "products": [
       "SharePoint"
     ],
@@ -2656,7 +2656,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.15.2"
+        "value": "1.18.2"
       }
     ],
     "thumbnails": [

diff --git a/samples/react-application-messagebanner/.eslintrc.js b/samples/react-application-messagebanner/.eslintrc.js
diff --git a/samples/react-application-messagebanner/.nvmrc b/samples/react-application-messagebanner/.nvmrc
@@ -0,0 +1 @@
+v18.18.0
diff --git a/samples/react-application-messagebanner/.yo-rc.json b/samples/react-application-messagebanner/.yo-rc.json
@@ -2,12 +2,17 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": false,
     "environment": "spo",
-    "version": "1.15.2",
+    "version": "1.18.2",
     "libraryName": "message-banner",
     "libraryId": "004b6d5e-aee8-499b-9fe8-06757cfd043b",
     "packageManager": "npm",
     "isDomainIsolated": false,
     "componentType": "extension",
-    "extensionType": "ApplicationCustomizer"
+    "extensionType": "ApplicationCustomizer",
+    "nodeVersion": "18.19.0",
+    "sdkVersions": {
+      "@microsoft/teams-js": "2.12.0",
+      "@microsoft/microsoft-graph-client": "3.0.2"
+    }
   }
 }
diff --git a/samples/react-application-messagebanner/README.md b/samples/react-application-messagebanner/README.md
@@ -17,11 +17,11 @@ Built using a SharePoint Framework Application Customizer Extension with the Top
 
 ## Compatibility
 
-![SPFx 1.15.2](https://img.shields.io/badge/SPFx-1.15.2-green.svg)
-![Node.js v16 | v14 | v12 ](https://img.shields.io/badge/Node.js-v16%20%7C%20v14%20%7C%20v12-green.svg)
+![SPFx 1.14](https://img.shields.io/badge/SPFx-1.14-green.svg)
+![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg)
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
-![Does not work with SharePoint 2016 (Feature Pack 2)](<https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg> "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
+![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
 ![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
 ![Hosted Workbench Incompatible](https://img.shields.io/badge/Hosted%20Workbench-Incompatible-red.svg "Does not work with hosted workbench")
 
@@ -30,17 +30,16 @@ Built using a SharePoint Framework Application Customizer Extension with the Top
 - [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
 - [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
-## Solution
+## Contributors
 
-| Solution                        | Author(s)                                                                                           |
-| ------------------------------- | --------------------------------------------------------------------------------------------------- |
-| react-application-messagebanner | [Brad Schlintz](https://github.com/bschlintz) ([@bschlintz](https://twitter.com/yourtwitterhandle)) |
-| react-application-messagebanner | [Paul Matthews](https://github.com/pmatthews05) ([@cann0nf0dder](https://twitter.com/cann0nf0dder)) |
+- [Brad Schlintz](https://github.com/bschlintz)
+- [Paul Matthews](https://github.com/pmatthews05) 
 
 ## Version history
 
 | Version | Date         | Comments                                                                                                               |
 | ------- | ------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| 1.4.1   | Feb 10, 2024 | Paul Matthews, upgraded to SPFX 1.18.2.                                                                                |
 | 1.4     | Aug 12, 2022 | Paul Matthews, upgraded to SPFX 1.15.2 obtained permission to submit to PNP Samples.                                   |
 | 1.0     | Nov 5, 2109  | Initial Commit 1.0 created by Brad Schlintz at [spfx-message-banner](https://github.com/bschlintz/spfx-message-banner) |
 
@@ -71,7 +70,7 @@ The banner settings are saved into the ClientSideComponentProperties on the cust
 | backgroundColor                | `"#ffffc6"`                                                                                               | Text. Background colour of the banner.                                                                                                                                                                                                                                                           |
 | textFontSizePx                 | `14`                                                                                                      | Integer. Font size of the banner text in pixels.                                                                                                                                                                                                                                                 |
 | bannerHeightPx                 | `30`                                                                                                      | Integer. Height of the banner in pixels.                                                                                                                                                                                                                                                         |
-| visibleStartDate               | `null` or `2023-09-01`                                                                                                 | Date String. (Optional). Date at which the banner message should be shown to members and visitors of the site. Message will always be visible to admins.                                                                                                                                         |
+| visibleStartDate               | `null` or `2023-09-01`                                                                                    | Date String. (Optional). Date at which the banner message should be shown to members and visitors of the site. Message will always be visible to admins.                                                                                                                                         |
 | disableSiteAdminUI             | `false`                                                                                                   | Boolean (Optional).To disable the site administrator user interface (edit icon). Additionally, if the `visibleStartDate` property is set to a future date, site administrators will no longer see the banner with the future visibility date badge.                                              |
 | enableSetPreAllocatedTopHeight | `false`                                                                                                   | Boolean (Optional). To enable setting the host property 'preAllocatedApplicationCustomizerTopHeight' when saving new banner height within the settings panel. This flag signals SharePoint to pre allocate the banner location height server-side to avoid the page shifting down during render. |
 

diff --git a/samples/react-application-messagebanner/assets/sample.json b/samples/react-application-messagebanner/assets/sample.json
@@ -9,7 +9,7 @@
       "A react Message Banner sample, allows to add a custom banner message to your SharePoint Online modern sites. Can target either Site or Web Scoped. Allows a site owner to modify the text, font size, colours and height of the banner. Specify a start date to control when the banner is visible to members of a site. Uses the latest v1.15.2 of SPFX framework."
     ],
     "creationDateTime": "2022-11-09",
-    "updateDateTime": "2022-11-09",
+    "updateDateTime": "2024-01-10",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.15.2"
+        "value": "1.18.2"
       }
     ],
     "thumbnails": [
@@ -83,4 +83,4 @@
       }
     ]
   }
-]
+]
diff --git a/samples/react-application-messagebanner/config/package-solution.json b/samples/react-application-messagebanner/config/package-solution.json
@@ -3,7 +3,7 @@
   "solution": {
     "name": "Message Banner",
     "id": "004b6d5e-aee8-499b-9fe8-06757cfd043b",
-    "version": "1.4.0.0",
+    "version": "1.4.1.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,

diff --git a/samples/react-application-messagebanner/config/sass.json b/samples/react-application-messagebanner/config/sass.json
@@ -0,0 +1,3 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}
diff --git a/samples/react-application-messagebanner/config/serve.json b/samples/react-application-messagebanner/config/serve.json
@@ -2,9 +2,10 @@
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
   "port": 4321,
   "https": true,
+  "initialPage": "https://cfcodedev.sharepoint.com/_layouts/workbench.aspx",
   "serveConfigurations": {
     "default": {
-      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
+      "pageUrl": "https://cfcodedev.sharepoint.com",
       "customActions": {
         "1e2688c4-99d8-4897-8871-a9c151ccfc87": {
           "location": "ClientSideExtension.ApplicationCustomizer",

diff --git a/samples/react-application-messagebanner/package.json b/samples/react-application-messagebanner/package.json
@@ -9,35 +9,38 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/decorators": "1.15.2",
-    "@microsoft/sp-adaptive-card-extension-base": "1.15.2",
-    "@microsoft/sp-application-base": "1.15.2",
-    "@microsoft/sp-core-library": "1.15.2",
+    "@fluentui/react": "8.106.4",
+    "@microsoft/decorators": "1.18.2",
+    "@microsoft/sp-adaptive-card-extension-base": "1.18.2",
+    "@microsoft/sp-application-base": "1.18.2",
+    "@microsoft/sp-core-library": "1.18.2",
     "date-fns": "^2.29.0",
-    "office-ui-fabric-react": "7.185.7",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "tslib": "2.3.1"
   },
   "resolutions": {
     "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/eslint-config-spfx": "1.15.2",
-    "@microsoft/eslint-plugin-spfx": "1.15.2",
+    "@microsoft/eslint-config-spfx": "1.18.2",
+    "@microsoft/eslint-plugin-spfx": "1.18.2",
     "@microsoft/generator-sharepoint": "^1.9.1",
-    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
-    "@microsoft/sp-build-web": "1.17.1",
-    "@microsoft/sp-module-interfaces": "1.15.2",
+    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
+    "@microsoft/sp-build-web": "1.18.2",
+    "@microsoft/sp-module-interfaces": "1.18.2",
     "@rushstack/eslint-config": "2.5.1",
     "@types/es6-promise": "0.0.33",
-    "@types/react": "16.9.51",
-    "@types/react-dom": "16.9.8",
+    "@types/react": "17.0.45",
+    "@types/react-dom": "17.0.17",
     "@types/webpack-env": "1.15.2",
     "ajv": "6.12.5",
     "eslint": "8.7.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "gulp": "4.0.2",
-    "typescript": "4.5.5"
+    "typescript": "4.7.4"
+  },
+  "engines": {
+    "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
   }
 }
diff --git a/...lication-messagebanner/src/extensions/messageBanner/MessageBannerApplicationCustomizer.ts b/...lication-messagebanner/src/extensions/messageBanner/MessageBannerApplicationCustomizer.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @microsoft/spfx/pair-react-dom-render-unmount */
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { override } from '@microsoft/decorators';
@@ -72,6 +73,7 @@ export default class MessageBannerApplicationCustomizer
     ReactDom.render(bannerComponent, this._topPlaceholder.domElement);
   }
 
+
   @override
   public onDispose(): void {
     if (this._topPlaceholder) {

diff --git a/...plication-messagebanner/src/extensions/messageBanner/components/Banner/Banner.module.scss b/...plication-messagebanner/src/extensions/messageBanner/components/Banner/Banner.module.scss
@@ -1,3 +1,5 @@
+@import '~@fluentui/react/dist/sass/References.scss';
+
 .BannerContainer {
   display: flex;
   align-items: center;

diff --git a/...react-application-messagebanner/src/extensions/messageBanner/components/Banner/Banner.tsx b/...react-application-messagebanner/src/extensions/messageBanner/components/Banner/Banner.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 const { useState, useEffect } = React;
 import { IBannerProps } from './IBannerProps';
 import styles from './Banner.module.scss';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import {IconButton} from '@fluentui/react/lib/Button';
 import BannerPanel from '../BannerPanel/BannerPanel';
 import * as strings from 'MessageBannerApplicationCustomizerStrings';
 import { BaseComponentContext } from '@microsoft/sp-component-base';
@@ -17,7 +17,7 @@ import { IHostProperties } from '../../../../models/IHostProperties';
 
 const BANNER_CONTAINER_ID = 'CustomMessageBannerContainer';
 
-const Banner = (props: IBannerProps) => {
+const Banner = (props: IBannerProps): JSX.Element => {
   const [defaultSettings, setDefaultSettings] = useState(props.settings);
   const [settings, setSettings] = useState(props.settings);
   const [isPanelOpen, setIsPanelOpen] = useState(false);

diff --git a/...messagebanner/src/extensions/messageBanner/components/BannerPanel/BannerPanel.module.scss b/...messagebanner/src/extensions/messageBanner/components/BannerPanel/BannerPanel.module.scss
@@ -1,3 +1,4 @@
+@import '~@fluentui/react/dist/sass/References.scss';
 .BannerPanelContainer {
   display: block;
 

diff --git a/...ication-messagebanner/src/extensions/messageBanner/components/BannerPanel/BannerPanel.tsx b/...ication-messagebanner/src/extensions/messageBanner/components/BannerPanel/BannerPanel.tsx
@@ -3,16 +3,16 @@ import { IBannerPanelProps } from './IBannerPanelProps';
 import styles from './BannerPanel.module.scss';
 import * as strings from 'MessageBannerApplicationCustomizerStrings';
 
-import { PanelType, Panel } from 'office-ui-fabric-react/lib/Panel';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { SwatchColorPicker, IColorCellProps } from 'office-ui-fabric-react/lib/SwatchColorPicker';
-import { getColorFromString, IColor } from 'office-ui-fabric-react/lib/Color';
-import { Slider } from 'office-ui-fabric-react/lib/Slider';
-import { Label } from 'office-ui-fabric-react/lib/Label';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
-import { DatePicker } from 'office-ui-fabric-react/lib/DatePicker';
-import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
+import { PanelType, Panel } from '@fluentui/react/lib/Panel';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { SwatchColorPicker, IColorCellProps } from '@fluentui/react/lib/SwatchColorPicker';
+import { getColorFromString, IColor } from '@fluentui/react/lib/Color';
+import { Slider } from '@fluentui/react/lib/Slider';
+import { Label } from '@fluentui/react/lib/Label';
+import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
+import { DatePicker } from '@fluentui/react/lib/DatePicker';
+import { Toggle } from '@fluentui/react/lib/Toggle';
 
 const TEXT_COLORS: IColorCellProps[] = [
   { id: 't1', label: 'Black', color: '#000000' },
@@ -32,7 +32,7 @@ const BACKGROUND_COLORS: IColorCellProps[] = [
   { id: 'b8', label: 'White', color: '#ffffff' }
 ];
 
-const BannerPanel = (props: IBannerPanelProps) => {
+const BannerPanel = (props: IBannerPanelProps): JSX.Element => {
   const textColor: IColor = getColorFromString(props.settings.textColor);
   const textColorMatch = TEXT_COLORS.filter((c: IColorCellProps) => textColor && c.color === textColor.str);
   const textColorSelectedId = textColorMatch && textColorMatch.length > 0 ? textColorMatch[0].id : null;

diff --git a/samples/react-application-messagebanner/src/services/ClientSideComponentService.ts b/samples/react-application-messagebanner/src/services/ClientSideComponentService.ts
@@ -17,9 +17,9 @@ class ClientSideComponentService {
     if (!customAction) return;
 
     try {
-      const body : { [key: string]: string} = {} ;
-      if (properties)     body["ClientSideComponentProperties"] = JSON.stringify(properties);
-      if (hostProperties) body["HostProperties"] = JSON.stringify(hostProperties);
+      const body: { [key: string]: string } = {};
+      if (properties) body.ClientSideComponentProperties = JSON.stringify(properties);
+      if (hostProperties) body.HostProperties = JSON.stringify(hostProperties);
 
       await this._context.spHttpClient.post(customAction["@odata.id"], SPHttpClient.configurations.v1, {
         headers: {

diff --git a/samples/react-application-messagebanner/tsconfig.json b/samples/react-application-messagebanner/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,