feat: introduces usePii hook and withPii HOC to pass vendor-specific …

…masking HTML attributes

env.config.js

@@ -3,6 +3,26 @@
 // Also note that in an actual application this file would be added to .gitignore.
 const config = {
  JS_FILE_VAR: 'JS_FILE_VAR_VALUE_FOR_EXAMPLE_APP',
+ piiOptions: {
+ selectors: {
+ username: [
+ // Datadog
+ {
+ attributeName: 'data-dd-privacy',
+ attributeValue: 'mask',
+ },
+ // Hotjar
+ {
+ attributeName: 'data-hj-suppress',
+ attributeValue: '',
+ },
+ // Fullstory
+ {
+ className: 'fs-mask',
+ },
+ ],
+ },
+ },
 };
 
 export default config;

example/ExamplePage.jsx

@@ -48,6 +48,7 @@ class ExamplePage extends Component {
  <p>EXAMPLE_VAR env var came through: <strong>{getConfig().EXAMPLE_VAR}</strong></p>
  <p>JS_FILE_VAR var came through: <strong>{getConfig().JS_FILE_VAR}</strong></p>
  <p>Visit <Link to="/authenticated">authenticated page</Link>.</p>
+ <p>Visit <Link to="/pii">PII page</Link>.</p>
  <p>Visit <Link to="/error_example">error page</Link>.</p>
  </div>
  );

example/PiiPage.jsx

@@ -0,0 +1,95 @@
+import React, {
+ forwardRef, useContext, useEffect, useRef, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+
+import { AppContext, usePii, withPii } from '@edx/frontend-platform/react';
+
+// Example via `usePii` (hook)
+const UsernameWithPii = forwardRef(({ children, ...rest }, ref) => {
+ const piiProps = usePii('username', rest);
+ return <span ref={ref} {...piiProps}>{children}</span>;
+});
+UsernameWithPii.displayName = 'UsernameWithPii';
+UsernameWithPii.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+// Example via `withPii` (HOC)
+const Username = forwardRef(({ children, ...rest }, ref) => (
+ <span ref={ref} {...rest}>{children}</span>
+));
+Username.displayName = 'Username';
+Username.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+const UsernameWithPii2 = withPii('username')(Username);
+
+export default function PiiPage() {
+ const { authenticatedUser, config } = useContext(AppContext);
+ const firstUsernameRef = useRef(null);
+ const secondUsernameRef = useRef(null);
+ const [firstUsernameNode, setFirstUsernameNode] = useState(null);
+ const [secondUsernameNode, setSecondUsernameNode] = useState(null);
+
+ useEffect(() => {
+ if (firstUsernameRef.current) {
+ setFirstUsernameNode(firstUsernameRef.current.outerHTML);
+ }
+ if (secondUsernameRef.current) {
+ setSecondUsernameNode(secondUsernameRef.current.outerHTML);
+ }
+ }, []);
+
+ const { piiOptions } = config;
+ return (
+ <div>
+ <h1>Privacy options to obfuscate PII</h1>
+
+ <h2>Current PII configuration</h2>
+ {piiOptions ? (
+ <pre>
+ {JSON.stringify(piiOptions, null, 2)}
+ </pre>
+ ) : (
+ <p>
+ No PII-related configuration found. Consider updating this application&apos;s <code>env.config.js</code> to
+ configure any vendor-specific PII-related attributes/values.
+ </p>
+ )}
+
+ <h2>Examples</h2>
+ <p>
+ The following examples below demonstrate using <code>usePii</code> and <code>withPii</code> to
+ obfuscate PII (e.g., username) based on the application&apos;s configuration. Inspect the DOM
+ elements for the rendered usernames below to observe the configured PII attributes/values.
+ </p>
+
+ {/* Example 1 (usePii) */}
+ <h3><code>usePii</code> (hook)</h3>
+ <p>
+ <i>Obfuscated username:</i>{' '}
+ <UsernameWithPii ref={firstUsernameRef}>
+ {authenticatedUser.username}
+ </UsernameWithPii>
+ </p>
+ <i>Result:</i>{' '}
+ <pre>
+ <code>{firstUsernameNode}</code>
+ </pre>
+
+ {/* Example 2 (withPii) */}
+ <h3><code>withPii</code> (HOC)</h3>
+ <p>
+ <i>Obfuscated username:</i>{' '}
+ <UsernameWithPii2 ref={secondUsernameRef}>
+ {authenticatedUser.username}
+ </UsernameWithPii2>
+ </p>
+ <i>Result:</i>{' '}
+ <pre>
+ <code>{secondUsernameNode}</code>
+ </pre>
+ </div>
+ );
+}

example/index.jsx

@@ -16,6 +16,7 @@ import { Routes, Route } from 'react-router-dom';
 import './index.scss';
 import ExamplePage from './ExamplePage';
 import AuthenticatedPage from './AuthenticatedPage';
+import PiiPage from './PiiPage';
 
 subscribe(APP_READY, () => {
  ReactDOM.render(
@@ -27,6 +28,7 @@ subscribe(APP_READY, () => {
  element={<PageWrap><ErrorPage message="Test error message" /></PageWrap>}
  />
  <Route path="/authenticated" element={<AuthenticatedPageRoute><AuthenticatedPage /></AuthenticatedPageRoute>} />
+ <Route path="/pii" element={<AuthenticatedPageRoute><PiiPage /></AuthenticatedPageRoute>} />
  </Routes>
  </AppProvider>,
  document.getElementById('root'),