Part V of Security Classification Header - Conditional Header

ClassificationHeader.tsx

import * as React from "react";
import { IClassificationHeaderProps, IClassificationHeaderState, DefaultClassification } from "./ClassificationHeader.types";
import { MessageBar, MessageBarType } from "office-ui-fabric-react/lib/MessageBar";
import { Link } from "office-ui-fabric-react/lib/Link";
import { Web } from "sp-pnp-js/lib/pnp";
import { ClassificationPropertyBag } from "../../../../lib/extensions/classificationExtension/components/ClassificationHeader.types";

export default class ClassificationHeader extends React.Component<IClassificationHeaderProps, IClassificationHeaderState> {
  constructor(props: IClassificationHeaderProps) {
    super(props);
    this.state = {
      isLoading: true,
      businessImpact: null
    };
  }

  public componentDidMount(): void {
    this.setState({
      isLoading: true,
      businessImpact: null
    });

    const web: Web = new Web(this.props.context.pageContext.web.absoluteUrl);
    web.select("Title", "AllProperties")
      .expand("AllProperties")
      .get()
      .then(r => {
        var businessImpact:string = DefaultClassification;

        // handle the default situation where there is no classification
        if (r.AllProperties && r.AllProperties[ClassificationPropertyBag]) {
            businessImpact = r.AllProperties[ClassificationPropertyBag];
        }

        this.setState({
          isLoading: false,
          businessImpact: businessImpact
        });
        console.log("All properties results", r);
      });
  }

  public render(): React.ReactElement<IClassificationHeaderProps> {
    // get the business impact from the state
    let { businessImpact } = this.state;

     // change this switch statement to suit your security classification
     var barType: MessageBarType;
     switch (businessImpact) {
       case "MBI":
         barType = MessageBarType.warning;
         break;
       case "HBI":
         barType = MessageBarType.severeWarning;
         break;
       case "LBI":
         barType = MessageBarType.info;
         break;
         default:
         barType = undefined;
     }

     // if no security classification, do not display a header
     if (barType === undefined) {
       return null;
     }

    return (
      <MessageBar
        messageBarType={barType}
      >
        This site is classified as {this.state.businessImpact}. <Link href="www.bing.com">Learn more about the proper handling procedures.</Link>
      </MessageBar>
    );
  }
}

ClassificationHeader.types.ts

import { ExtensionContext } from "@microsoft/sp-extension-base";

export interface IClassificationHeaderProps {
    context: ExtensionContext;
}

export interface IClassificationHeaderState {
    isLoading: boolean;
    businessImpact: string;
}

// change this value to whatever you want to use as the property bag value name
export const ClassificationPropertyBag: string = "sc_x005f_BusinessImpact";

// change this value to whatever you want the default classification you wish to use. "undefined" means no default.
export const DefaultClassification: string = undefined;