simplify web part

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.module.scss

@@ -1,6 +1,4 @@
 @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
 .workbenchCustomizer {
-    .redMessage {
+
-      color: red;
-    }
 }

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.ts

@@ -1,12 +1,11 @@
 import { Version } from '@microsoft/sp-core-library';
 import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-import { IPropertyPaneConfiguration, PropertyPaneToggle } from "@microsoft/sp-property-pane";
+import { IPropertyPaneConfiguration, PropertyPaneToggle, PropertyPaneHorizontalRule, PropertyPaneLabel } from "@microsoft/sp-property-pane";
-import styles from './WorkbenchCustomizerWebPart.module.scss';
+// import styles from './WorkbenchCustomizerWebPart.module.scss';
 
 import * as strings from 'WorkbenchCustomizerWebPartStrings';
 
 export interface IWorkbenchCustomizerWebPartProps {
-  requiresPageRefresh: boolean;
   customWorkbenchStyles: boolean;
   customWorkbenchStylesFullWidth: boolean;
   previewMode: boolean;
@@ -14,11 +13,6 @@ export interface IWorkbenchCustomizerWebPartProps {
 
 export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IWorkbenchCustomizerWebPartProps> {
 
-  public onInit(): Promise<void> {
-    this.properties.requiresPageRefresh = false;
-    return Promise.resolve();
-  }
-
   public async render(): Promise<void> {
 
     if (!this.renderedOnce) {
@@ -37,22 +31,14 @@ export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IW
       }
 
       this.domElement.innerHTML = `
-    <div class="${styles.workbenchCustomizer}">
+    <div>
-      ${this.properties.requiresPageRefresh
+      *** ${strings.TitleLabel} ***
-          ? `<div class="${styles.redMessage}">Please refresh the page to remove custom workbench styles</div>`
-          : ''
-        }
-      *** Workbench Customizer web part ***
     </div>`;
     }
   }
 
-  public onPropertyPaneFieldChanged(path: string, oldValue: any, newValue: any): void {
+  protected get disableReactivePropertyChanges(): boolean {
-    if (!newValue) {
+    return true;
-      // request a page refresh if any of the options was disabled
-      // no real smart logic implemented at this point
-      this.properties.requiresPageRefresh = true;
-    }
   }
 
   protected get dataVersion(): Version {
@@ -64,22 +50,26 @@ export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IW
       pages: [
         {
           header: {
-            description: strings.PropertyPaneDescription
+            description: strings.PropertyPaneDescription,
           },
           groups: [
             {
               groupName: strings.BasicGroupName,
               groupFields: [
                 PropertyPaneToggle('customWorkbenchStyles', {
-                  label: strings.CustomWorkbenchStylesFieldLabel
+                  label: strings.CustomWorkbenchStylesFieldLabel,
                 }),
                 PropertyPaneToggle('customWorkbenchStylesFullWidth', {
                   label: strings.customWorkbenchStylesFullWidthFieldLabel,
-                  disabled: !this.properties.customWorkbenchStyles
+                  disabled: !this.properties.customWorkbenchStyles,
                 }),
                 PropertyPaneToggle('previewMode', {
-                  label: strings.PreviewModeFieldLabel
+                  label: strings.PreviewModeFieldLabel,
-                })
+                }),
+                PropertyPaneHorizontalRule(),
+                PropertyPaneLabel('', {
+                  text: strings.RequestPageRefresh,
+                }),
               ]
             }
           ]

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/loc/en-us.js

@@ -1,9 +1,11 @@
 define([], function() {
   return {
-    "PropertyPaneDescription": "Web part that can customize the behaviour of the workbench page to work around some of the existing limitations. It's recommended that you refresh the page after changing web part properties.",
+    "PropertyPaneDescription": "Web part that can customize the behaviour of the workbench page to work around some of the existing limitations.",
     "BasicGroupName": "Configuration",
     "CustomWorkbenchStylesFieldLabel": "Enable custom styles for Workbench",
     "customWorkbenchStylesFullWidthFieldLabel": "Enable custom styles for full-width",
     "PreviewModeFieldLabel": "Enable Preview mode by default",
+    "TitleLabel": "Workbench Customizer web part",
+    "RequestPageRefresh": "IMPORTANT: Please refresh the page after you click the Apply button to update workbench styles",
   }
 });

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/loc/mystrings.d.ts

@@ -4,6 +4,8 @@ declare interface IWorkbenchCustomizerWebPartStrings {
   CustomWorkbenchStylesFieldLabel: string;
   customWorkbenchStylesFullWidthFieldLabel: string;
   PreviewModeFieldLabel: string;
+  TitleLabel: string;
+  RequestPageRefresh: string;
 }
 
 declare module 'WorkbenchCustomizerWebPartStrings' {