qpp-style 2.1.13 → 2.2.0-sm.0

package/components/SanitizedContent/index.jsx

@@ -0,0 +1,223 @@
+import React from "react";
+import xss from "xss";
+import PropTypes from "prop-types";
+
+// Override the default allowed HTML tags
+const defaultAllowedTags = [
+  "a",
+  "abbr",
+  "address",
+  "article",
+  "aside",
+  "b",
+  "blockquote",
+  "br",
+  "button",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "hr",
+  "i",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "mark",
+  "meter",
+  "nav",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "tr",
+  "ul",
+  "svg",
+  "use",
+  "polygon",
+  "circle",
+  "g",
+  "path",
+  "rect",
+  "polygon",
+  "line",
+];
+
+// Override the default allowed HTML attributes for all tags
+const defaultAllowedAttributes = {
+  "*": [
+    "action",
+    "alt",
+    "aria-*",
+    "autocomplete",
+    "cite",
+    "class",
+    "cols",
+    "colspan",
+    "data-*",
+    "datetime",
+    "disabled",
+    "download",
+    "for",
+    "headers",
+    "height",
+    "hidden",
+    "href",
+    "hreflang",
+    "id",
+    "lang",
+    "list",
+    "max",
+    "maxlength",
+    "minlength",
+    "media",
+    "method",
+    "min",
+    "multiple",
+    "name",
+    "novalidate",
+    "open",
+    "pattern",
+    "placeholder",
+    "readonly",
+    "rel",
+    "required",
+    "reversed",
+    "rows",
+    "rowspan",
+    "sandbox",
+    "scope",
+    "scoped",
+    "selected",
+    "size",
+    "sizes",
+    "span",
+    "spellcheck",
+    "src",
+    "srcset",
+    "start",
+    "step",
+    "style",
+    "summary",
+    "tabindex",
+    "target",
+    "title",
+    "type",
+    "value",
+    "width",
+    "wrap",
+    "fill",
+    "fill-rule",
+    "transform",
+    "stroke",
+    "stroke-width",
+    "d",
+    "points",
+    "viewbox",
+    "x",
+    "y",
+    "cx",
+    "cy",
+    "r",
+    "xmlns",
+    "xmlns:xlink",
+    "xlink:href",
+    "version",
+    "preserveaspectratio",
+    "enable-background",
+    "points",
+    "stroke-linecap",
+    "x1",
+    "x2",
+    "y1",
+    "y2",
+  ],
+};
+
+const SanitizedContent = ({
+  html = "<div/>",
+  customClassName = null,
+  allowedTags = defaultAllowedTags,
+  allowedAttributes = defaultAllowedAttributes,
+}) => {
+  const whiteList = allowedTags.reduce((map, tag) => {
+    map[tag] = allowedAttributes["*"];
+    return map;
+  }, {});
+
+  const xssOptions = {
+    whiteList,
+    onIgnoreTagAttr: (tag, name, value, isWhiteAttr) => {
+      const isDataOrAriaAttr = name.includes("data-") || name.includes("aria-");
+      if (isDataOrAriaAttr) {
+        return `${name}="${xss.escapeAttrValue(value)}"`;
+      }
+    },
+  };
+
+  const sanitizedHTML = xss(html, xssOptions);
+
+  return (
+    <div
+      {...(customClassName && { className: customClassName })}
+      dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
+    />
+  );
+};
+
+SanitizedContent.propTypes = {
+  html: PropTypes.string,
+  customClassName: PropTypes.string,
+  allowedTags: PropTypes.array,
+  allowedAttributes: PropTypes.array,
+};
+
+export default SanitizedContent;

package/components/Search/index.js

@@ -0,0 +1,98 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SearchIcon } from "../../lib/SvgComponents";
+
+const Search = ({
+  id,
+  name,
+  placeholder,
+  disableSearchBtn,
+  disabled,
+  inputValue,
+  onClick,
+  onChange,
+  inputAriaLabel,
+  buttonAriaLabel,
+  inputWidth,
+  label,
+  parentElement,
+}) => {
+  const ContainerElement = parentElement || "span";
+  const inputStyle = {
+    width: inputWidth,
+  };
+  return (
+    <ContainerElement className="qppds">
+      <form role="search" className="qpp-c-search qpp-c-search--compact">
+        <label
+          className={label ? "qpp-u-margin-bottom--8" : "qpp-u-visually-hidden"}
+          htmlFor={id}
+        >
+          {label ? label : "Search"}
+        </label>
+
+        <div className="qpp-c-search__wrap">
+          <input
+            style={inputStyle}
+            className="qpp-c-text-input"
+            type="search"
+            id={id}
+            name={name}
+            placeholder={placeholder}
+            value={inputValue}
+            disabled={disabled}
+            onChange={onChange}
+            aria-label={inputAriaLabel}
+          />
+
+          <button
+            data-testid="search-btn"
+            aria-label={buttonAriaLabel}
+            onClick={onClick}
+            disabled={disableSearchBtn}
+            id={`${id}-submit`}
+            type="submit"
+            className="qpp-c-search__submit qpp-c-button qpp-c-button--text"
+          >
+            <span className="qpp-u-visually-hidden">Search</span>
+            <SearchIcon viewBox="0 0 45 50" />
+          </button>
+        </div>
+      </form>
+    </ContainerElement>
+  );
+};
+
+Search.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  disableSearchBtn: PropTypes.bool,
+  disabled: PropTypes.bool,
+  inputValue: PropTypes.string,
+  onClick: PropTypes.func,
+  onChange: PropTypes.func,
+  inputAriaLabel: PropTypes.string,
+  buttonAriaLabel: PropTypes.string,
+  inputWidth: PropTypes.string,
+  label: PropTypes.string,
+  parentElement: PropTypes.string,
+};
+
+Search.defaultProps = {
+  label: null,
+  id: "search-input",
+  name: "",
+  placeholder: "",
+  disableSearchBtn: false,
+  disabled: false,
+  inputValue: "",
+  onClick: () => null,
+  onChange: () => null,
+  inputAriaLabel: "",
+  buttonAriaLabel: "",
+  inputWidth: "auto",
+  parentElement: "span",
+};
+
+export default Search;

package/components/Session/Session.jsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import cookie from "cookie";
+import Modal from "../Modal";
+import { fetchTtl } from "../../session";
+import refreshSession from "../../session/refresh";
+import logoutSession from "../../session/logout";
+
+// calculate TWO_MINUTES for interval
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const TWO_MINUTES = 2 * MINUTE;
+const DEFAULT_SESSION_CHECK_INTERVAL = TWO_MINUTES;
+
+// 120 seconds is 2 minutes
+const DEFAULT_WARNING_TIMEOUT_SECONDS = 120;
+
+function shouldShowInactiveDialog(
+  timeRemainingSeconds,
+  warningTimeoutSeconds = DEFAULT_WARNING_TIMEOUT_SECONDS
+) {
+  return timeRemainingSeconds < warningTimeoutSeconds;
+}
+
+const Session = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  let ttlInterval;
+
+  useEffect(() => {
+    let didCancel = false;
+    const cookies = cookie.parse(document.cookie);
+    const hasAuthToken = !!cookies.qpp_auth_token;
+
+    async function isSessionValid() {
+      if (hasAuthToken) {
+        const timeRemaining = await fetchTtl(cookies.qpp_auth_token);
+        // safeguard against unmounted component
+        if (didCancel) return;
+        // token expired
+        if (timeRemaining === 0) {
+          logoutSession(window);
+          return;
+        }
+        // token is about to expire
+        if (shouldShowInactiveDialog(timeRemaining)) {
+          setIsOpen(true);
+        }
+      }
+    }
+
+    ttlInterval = setInterval(isSessionValid, DEFAULT_SESSION_CHECK_INTERVAL);
+
+    return () => {
+      clearInterval(ttlInterval);
+      didCancel = true;
+    };
+  }, []);
+
+  // This Dialog shows up 2 minutes before the user session ends
+  // giving the user an opportunity to refresh the token
+  // or to sign out
+  return (
+    <Modal
+      useDesignSystem
+      title="You will be signed out within two minutes"
+      isOpen={isOpen}
+      primary={{
+        title: "Keep me signed in",
+        onClick: () => {
+          refreshSession();
+          clearInterval(ttlInterval);
+          setIsOpen(false);
+        },
+      }}
+      secondary={{
+        title: "Sign me out now",
+        onClick: () => logoutSession(window),
+      }}
+      onRequestClose={() => setIsOpen(false)}
+    >
+      <p>
+        You have been inactive for thirty minutes. For your security, we will
+        sign you out automatically.
+      </p>
+    </Modal>
+  );
+};
+
+export default Session;

package/components/Session/SessionDialogWrapped.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { render } from "react-dom";
+import SessionDialogUI from "../Session";
+
+/**
+ * Renders the Session Dialog UI content.
+ */
+export default class SessionDialog {
+  constructor(options) {
+    render(<SessionDialogUI />, options.rootElement);
+  }
+}

package/components/Session/index.jsx

@@ -0,0 +1,3 @@
+import Session from "./Session";
+
+export default Session;

package/components/SideNav/AnimationGroup/AnimationGroup.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const hasDarkerBackground = (darkerBackground) => {
+  return darkerBackground ? "background-highlight" : "";
+};
+
+const AnimationGroup = ({ display, className, children, darkerBackground }) => {
+  return (
+    <div
+      className={`animation-group animation-group-${className || "default"}${
+        display ? " animation-group-enter" : " animation-group-exit"
+      } ${hasDarkerBackground(darkerBackground)}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+AnimationGroup.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  display: PropTypes.bool,
+  darkerBackground: PropTypes.bool,
+};
+
+export default AnimationGroup;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import cookie from "cookie";
+import jwtDecode from "jwt-decode";
+import SanitizedContent from "../../SanitizedContent";
+import AnimationGroup from "../AnimationGroup/AnimationGroup";
+import { isMultiRoleUser } from "../helpers";
+import SelectRole from "./SelectRole";
+
+const LevelOneContent = ({ isExpanded, levelOneContent }) => {
+  let { qpp_auth_token } = cookie.parse(document.cookie);
+
+  const [selectedRole, setSelectedRole] = useState("");
+
+  let name = "";
+  if (qpp_auth_token) {
+    const { firstName, lastName } = jwtDecode(qpp_auth_token);
+    name = `${firstName} ${lastName}`;
+  }
+  const path = window.location.pathname;
+  document.cookie = `current_path=${path}; Path=/;`;
+
+  const hasMultipleRoles = isMultiRoleUser(document.cookie);
+
+  return (
+    <div className="sidebar-content">
+      <AnimationGroup display={isExpanded}>
+        <h1 className="label">{name}</h1>
+      </AnimationGroup>
+      <div className="level-one-nav animation-flat">
+        {hasMultipleRoles && (
+          <SelectRole
+            selectedRole={selectedRole}
+            setSelectedRole={setSelectedRole}
+          />
+        )}
+
+        <SanitizedContent html={levelOneContent} />
+      </div>
+    </div>
+  );
+};
+
+LevelOneContent.propTypes = {
+  isExpanded: PropTypes.bool,
+  levelOneContent: PropTypes.object,
+};
+
+export default LevelOneContent;

package/components/SideNav/Content/SelectRole/index.js

@@ -0,0 +1,78 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import cookie from "cookie";
+import Dropdown from "../../../Dropdown";
+import {
+  loadRoleOptions,
+  redirectPage,
+  getLocalStorageRoleState,
+  initializeLocalStorageRoleState,
+  updateLocalStorageRoleState,
+} from "./utils";
+
+const SelectRole = ({ selectedRole, setSelectedRole }) => {
+  const {
+    qpp_has_authorizations: hasAuthorizations,
+    qpp_cms_internal_authorized: cmsInternalRoleValues,
+    qpp_impersonated_user: isHelpdeskRoleAndImpersonating,
+  } = cookie.parse(document.cookie);
+
+  const ROLE_OPTIONS = loadRoleOptions([
+    hasAuthorizations,
+    cmsInternalRoleValues,
+  ]);
+
+  const handleSelection = (e) => {
+    e.preventDefault();
+    const dropdownValue = e.target.value;
+    const newRoleSelected = ROLE_OPTIONS.filter(
+      (opt) => opt.value === dropdownValue
+    )[0].value;
+    // Update localStorage with the new role selected
+    updateLocalStorageRoleState(newRoleSelected);
+    setSelectedRole(newRoleSelected);
+    redirectPage(newRoleSelected);
+  };
+
+  // Set role on init render
+  // below is executed on every page refresh including on side nav link navigation & on role selection
+  useEffect(() => {
+    // Check localStorage & set initial selected role
+    const { selectedUserRole } = getLocalStorageRoleState();
+    const roleValue = selectedUserRole || ROLE_OPTIONS[0].value;
+
+    // Set localStorage values if not set
+    initializeLocalStorageRoleState(roleValue);
+
+    // Update state
+    setSelectedRole(roleValue);
+    document.cookie = `selected_role=${roleValue}; Path=/;`;
+
+    //Redirect to role default page IF localStorage was not set (indicates initial login)
+    if (!selectedUserRole) {
+      redirectPage(roleValue);
+    }
+  }, []);
+
+  return (
+    <div className="SelectRole__Container">
+      <p className="SelectRole__Text">You are viewing as a</p>
+      <Dropdown
+        value={selectedRole}
+        name="user-role-selection"
+        ariaLabel="Select User Role"
+        className="qpp-u-width--100 SelectRole__Dropdown"
+        options={ROLE_OPTIONS}
+        onChange={handleSelection}
+        disabled={isHelpdeskRoleAndImpersonating}
+      />
+    </div>
+  );
+};
+
+SelectRole.propTypes = {
+  selectedRole: PropTypes.string,
+  setSelectedRole: PropTypes.func,
+};
+
+export default SelectRole;