@pega/react-sdk-overrides 0.23.26 → 8.8.21

package/lib/template/ListView/{utils.js → utils.ts}

@@ -1,6 +1,8 @@
-/* eslint-disable no-undef */
 import getDefaultViewMeta from './DefaultViewMeta';
 
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 5 errors)
+declare const PCore: any;
+
 const USER_REFERENCE = 'UserReference';
 const PAGE = '!P!';
 const PAGELIST = '!PL!';
@@ -11,13 +13,49 @@ export const formatConstants = {
   WorkLink: 'WorkLink',
 };
 
+class DataApi {
+  mappedPropertyToOriginalProperty: any;
+  originalPropertyToMappedProperty: any;
+  constructor() {
+    ;
+    this.originalPropertyToMappedProperty = {};
+    this.mappedPropertyToOriginalProperty = {};
+    this.setPropertyMaps = this.setPropertyMaps.bind(this);
+    this.getMappedProperty = this.getMappedProperty.bind(this);
+    this.getOriginalProperty = this.getOriginalProperty.bind(this);
+  }
+
+  setPropertyMaps(originalToMappedPropertyObj = {}, mappedToOriginalPropertyObj = {}) {
+    this.originalPropertyToMappedProperty = {
+      ...this.originalPropertyToMappedProperty,
+      ...originalToMappedPropertyObj
+    };
+    this.mappedPropertyToOriginalProperty = {
+      ...this.mappedPropertyToOriginalProperty,
+      ...mappedToOriginalPropertyObj
+    };
+  }
+
+  getMappedProperty(propertyName) {
+    return this.originalPropertyToMappedProperty[propertyName] ?? propertyName;
+  }
+
+  getOriginalProperty(propertyName) {
+    return this.mappedPropertyToOriginalProperty[propertyName] ?? propertyName;
+  }
+}
+
 export async function getContext(componentConfig) {
   const {
     promisesArray = [], // array of promises which can be invoked paralelly,
   } = componentConfig;
   const promisesResponseArray = await Promise.all(promisesArray);
+  const dataApi = new DataApi();
   return {
     promisesResponseArray,
+    setPropertyMaps: dataApi.setPropertyMaps,
+    getMappedProperty: dataApi.getMappedProperty,
+    getOriginalProperty: dataApi.getOriginalProperty,
   };
 }
 
@@ -32,7 +70,7 @@ export async function getContext(componentConfig) {
  * getFieldNameFromEmbeddedFieldName('!P!Organisation:Name') return 'Organisation.Name'
  * getFieldNameFromEmbeddedFieldName('!PL!Employees:Name') return 'Employees.Name'
  */
- export function getFieldNameFromEmbeddedFieldName(propertyName) {
+export function getFieldNameFromEmbeddedFieldName(propertyName) {
   let value = propertyName;
   if (value.startsWith(PAGE) || value.startsWith(PAGELIST)) {
     value = value.substring(value.lastIndexOf('!') + 1);
@@ -47,7 +85,7 @@ export async function getContext(componentConfig) {
  * @ignore
  * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields.
  */
- export function updateMetaEmbeddedFieldID(metaFields) {
+export function updateMetaEmbeddedFieldID(metaFields) {
   return metaFields.forEach((metaField) => {
     if (metaField.fieldID?.startsWith(PAGE) || metaField.fieldID?.startsWith(PAGELIST)) {
       metaField.fieldID = getFieldNameFromEmbeddedFieldName(metaField.fieldID);
@@ -63,6 +101,94 @@ export const isEmbeddedField = (field) => {
   return field?.indexOf('.') > 0;
 };
 
+/**
+ * [isPageListProperty]
+ * Description    -        checking if propertyName is pageList or not
+ * @ignore
+ * @param {string} propertyName   PropertyName
+ * @returns {boolean}  true if property is pageList else false
+ *
+ * @example <caption>Example for isPageListProperty </caption>
+ * isPageListProperty('!PL!Employees.Name') return true
+ * isPageListProperty('!P!Employees.Name') return false
+ * isPageListProperty('Name') return false
+ */
+export function isPageListProperty(propertyName) {
+  return propertyName.startsWith(PAGELIST);
+}
+
+export const isPageListInPath = (propertyName, currentClassID) => {
+  if (!propertyName.includes('.')) {
+    return false;
+  }
+  const [first, ...rest] = propertyName.split('.');
+  const metadata = PCore.getMetadataUtils().getPropertyMetadata(first, currentClassID);
+  if (metadata?.type === 'Page List') {
+    return true;
+  }
+  return isPageListInPath(rest.join('.'), metadata?.pageClass);
+};
+
+/**
+ * [getEmbeddedFieldName]
+ * Description    -               converting normal field name to embedded field starting with !P! or !PL!
+ * @ignore
+ * @param {string} propertyName   Field name
+ * @param {string} classID        classID of datapage
+ * @returns {string}              returns converted string with !P! or !PL! and :
+ *
+ * @example <caption>Example for getEmbeddedFieldName </caption>
+ * For page property, getEmbeddedFieldName('Organisation.Name') return '!P!Organisation:Name'
+ * For pageList property, getEmbeddedFieldName('Employees.Name') return '!PL!Employees:Name'
+ */
+
+export function getEmbeddedFieldName(propertyName, classID) {
+  let value = propertyName;
+  if (isPageListInPath(value, classID)) {
+    value = `!PL!${value.replace(/\./g, ':')}`;
+  } else {
+    value = `!P!${value.replace(/\./g, ':')}`;
+  }
+  return value;
+}
+
+/**
+ * [preparePropertyMaps]
+ * Description    -        preparing maps for property names and set it in dataApi context
+ * @ignore
+ * @param {Array} fields   fields array
+ * @param {string} classID  classID of datapage
+ * @param {string} context  dataApi context
+ * @returns {boolean} true if pageListProperty is present
+ */
+export function preparePropertyMaps(fields, classID, context) {
+  const { setPropertyMaps } = context;
+  const maps = fields.reduce(
+    (acc, field) => {
+      let { value } = field.config;
+      if (value.startsWith('@')) {
+        value = value.substring(value.indexOf(' ') + 1);
+        if (value[0] === '.') value = value.substring(1);
+      }
+      let name = value;
+      // Preparing name for embedded property
+      if (isEmbeddedField(name)) {
+        name = getEmbeddedFieldName(name, classID);
+      }
+      if (isPageListProperty(name) && !acc[2]) {
+        acc[2] = true;
+      }
+      acc[0][value] = name;
+      acc[1][name] = value;
+
+      return acc;
+    },
+    [{}, {}, false]
+  );
+  setPropertyMaps(maps[0], maps[1]);
+  return maps[2];
+}
+
 /**
  * [getConfigEmbeddedFieldsMeta]
  * Description    -           Get the metadata for configured embedded fields
@@ -72,7 +198,7 @@ export const isEmbeddedField = (field) => {
  * @returns {Array}           Metadata of configured embedded fields
  */
 export function getConfigEmbeddedFieldsMeta(configFields, classID) {
-  const configEmbeddedFieldsMeta = [];
+  const configEmbeddedFieldsMeta: Array<any> = [];
   configFields.forEach((field) => {
     let value = field;
     if (isEmbeddedField(value)) {
@@ -115,7 +241,7 @@ const oldToNewFieldTypeMapping = {
  * @ignore
  * @param {Array} metaFields  Fields metadata Array. Contains metadata of all the fields.
  */
- function updateFieldType(metaFields) {
+function updateFieldType(metaFields) {
   metaFields.forEach((metaField) => {
     if (metaField.type) metaField.type = oldToNewFieldTypeMapping[metaField.type] || metaField.type;
   });
@@ -141,7 +267,7 @@ function getPresetMetaAttribute(attribute) {
  * @param   {string}  classID          Class ID from the response
  * @returns {Array}                    List of fields with updated meta objects.
  */
- function generateViewMetaData(rawFields, classID, showField) {
+function generateViewMetaData(rawFields, classID, showField) {
   return rawFields.map((item) => getDefaultViewMeta(item, classID, showField));
 }
 
@@ -155,7 +281,7 @@ function getPresetMetaAttribute(attribute) {
  * @param   {string}  classID           Class ID from the response
  * @returns {Array}                     List of all fields with their meta updated.
  */
- function getConfigFields(configFields, primaryFields, metaFields, classID) {
+function getConfigFields(configFields, primaryFields, metaFields, classID) {
   const presetConfigFields = configFields;
   const primaryFieldsViewIndex = presetConfigFields.findIndex((field) => field.config.value === 'pyPrimaryFields');
   if (!primaryFields || !primaryFields.length) {
@@ -172,7 +298,7 @@ function getPresetMetaAttribute(attribute) {
       (primaryField) =>
         !presetConfigFields.some((presetConfigField) => presetConfigField.config.value.split('.')[1] === primaryField)
     );
-    const uncommonFieldsRawMeta = [];
+    const uncommonFieldsRawMeta: Array<any> = [];
     uncommonFieldsList.forEach((uncommonField) => {
       const uncommonFieldMeta = metaFields.find((metaField) => metaField.fieldID === uncommonField);
       if (uncommonFieldMeta) uncommonFieldsRawMeta.push(uncommonFieldMeta);
@@ -196,7 +322,7 @@ function getPresetMetaAttribute(attribute) {
  * @param   {Array}     metaFields          List of all metafields
  * @returns {object}                        Table config object
  */
- export function getTableConfigFromPresetMeta(
+export function getTableConfigFromPresetMeta(
   presetMeta,
   isMetaWithPresets,
   getPConnect,
@@ -281,7 +407,7 @@ function getPresetMetaAttribute(attribute) {
  * @param   {object} response -
  * @returns {Set} Set of columns from the report response
  */
- function getReportColumns(response) {
+function getReportColumns(response) {
   const {
     data: { data: reportColumns }
   } = response;
@@ -305,7 +431,7 @@ function getPresetMetaAttribute(attribute) {
  *                   config.value - Raw value
  * @returns {string} value - Value with out any annotations or "."
  */
- function getConfigFieldValue(config) {
+function getConfigFieldValue(config) {
   let { value } = config;
   if (value.startsWith('@')) {
     value = value.substring(value.indexOf(' ') + 1);
@@ -340,7 +466,7 @@ function prepareConfigFields(configFields, pushToComponentsList) {
  * @param   {string}  fieldID      Filter
  * @returns {object}              config with its field value equal to fieldID, which means an authored field
  */
- function findAuthoredField(configFields, fieldID) {
+function findAuthoredField(configFields, fieldID) {
   return configFields.find((configField) => {
     const val = getConfigFieldValue(configField.config);
     return val === fieldID;
@@ -355,7 +481,7 @@ function prepareConfigFields(configFields, pushToComponentsList) {
  * @param   {object}  item        Field item to copy displayAs and category information
  * @param   {string}  classId     classID from the response
  */
- function findAndUpdateAuthoredFieldConfig(configFields, item, classId) {
+function findAndUpdateAuthoredFieldConfig(configFields, item, classId) {
   const authoredField = findAuthoredField(configFields, item.fieldID);
   if (authoredField?.config) {
     if (item.displayAs) {
@@ -387,7 +513,7 @@ function prepareConfigFields(configFields, pushToComponentsList) {
  * @param   {boolean} showDynamicFields Flag indicating whether fields are fetched dynamically at runtime
  * @returns {boolean}                  true If the field is an extra field else false.
  */
- function isAnExtraField(configFields, configFieldSet, reportColumnsSet, item, classId, showDynamicFields) {
+function isAnExtraField(configFields, configFieldSet, reportColumnsSet, item, classId, showDynamicFields) {
   // Is the field already present in authoring metadata?
   // Mutates config fields to copy displayAs and category information
   if (configFieldSet.has(item.fieldID)) {
@@ -411,7 +537,7 @@ function prepareConfigFields(configFields, pushToComponentsList) {
  * @param   {boolean} showDynamicFields Flag indicating whether fields are fetched dynamically at runtime
  * @returns {Array}                    List of extra fields with their meta updated.
  */
- function prepareExtraFields(
+function prepareExtraFields(
   metaFields,
   configFields,
   configFieldSet,
@@ -444,8 +570,8 @@ function populateRenderingOptions(name, config, field) {
   }
 }
 export function initializeColumns(
-  fields = [],
-  getMappedProperty
+  fields: Array<any> = [],
+  getMappedProperty: any = null
 ) {
   return fields.map((field, originalColIndex) => {
     let name = field.config.value;
@@ -495,9 +621,9 @@ export const getItemKey = (fields) => {
 };
 
 export function preparePatchQueryFields(fields, isDataObject = false, classID = '') {
-  const queryFields = [];
+  const queryFields: Array<any> = [];
   fields.forEach((field) => {
-    const patchFields = [];
+    const patchFields: Array<any> = [];
     if (field.cellRenderer === 'WorkLink') {
       if (field.customObject && field.customObject.isAssignmentLink) {
         const associationName = field.name.includes(':') ? `${field.name.split(':')[0]}:` : '';
@@ -530,6 +656,23 @@ export function preparePatchQueryFields(fields, isDataObject = false, classID =
   return queryFields;
 }
 
+/**
+ * Update the renderer type for the properties of type Page.
+ */
+export function updatePageFieldsConfig(configFields, parentClassID) {
+  return configFields.forEach((item) => {
+    const {
+      type,
+      config: { value }
+    } = item;
+    const propertyName = PCore.getAnnotationUtils().getPropertyName(value);
+    if (isEmbeddedField(value) && !isPageListInPath(propertyName, parentClassID)) {
+      item.config.componentType = type;
+      item.type = 'PagePropertyRenderer';
+    }
+  });
+}
+
 export const readContextResponse = async (context, params) => {
   const {
     getPConnect,
@@ -542,7 +685,7 @@ export const readContextResponse = async (context, params) => {
   } = params;
   const { promisesResponseArray, apiContext: otherContext } = context;
   // eslint-disable-next-line sonarjs/no-unused-collection
-  const listOfComponents = [];
+  const listOfComponents: Array<any> = [];
   const {
     data: { fields: metaFields, classID, isQueryable }
   } = promisesResponseArray[0];
@@ -562,7 +705,7 @@ export const readContextResponse = async (context, params) => {
 
 
   if (isDataObject) {
-    const compositeKeys = [];
+    const compositeKeys: Array<any> = [];
     const dataViewName = PCore.getDataTypeUtils().getSavableDataPage(classID);
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach((item) =>
@@ -617,13 +760,19 @@ export const readContextResponse = async (context, params) => {
       showDynamicFields
     );
 
+    if (isQueryable) {
+      updatePageFieldsConfig(configFields, classID);
+      preparePropertyMaps([...configFields, ...extraFields], classID, context);
+    }
+
+    const { getMappedProperty } = context;
 
     fields = initializeColumns(
-      [...configFields, ...extraFields],
+      [...configFields, ...extraFields], getMappedProperty
     );
     const patchQueryFields = preparePatchQueryFields(fields, isDataObject, classID);
     const itemKey = getItemKey(fields);
-    tableConfig = { fieldDefs: fields, patchQueryFields, itemKey, isQueryable}
+    tableConfig = { fieldDefs: fields, patchQueryFields, itemKey, isQueryable };
   });
   const meta = tableConfig;
   setListContext({

package/lib/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -1,9 +1,15 @@
-import PropTypes from "prop-types";
 import React from "react";
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-declare const PCore;
-export default function MultiReferenceReadOnly(props) {
-  const { getPConnect, label, hideLabel, config } = props;
+interface MultiReferenceReadOnlyProps extends PConnProps {
+  config: { referenceList: any, readonlyContextList: any },
+  label: string,
+  hideLabel: boolean
+}
+
+
+export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProps) {
+  const { getPConnect, label = '', hideLabel = false, config } = props;
   const { referenceList, readonlyContextList } = config;
 
   // When referenceList does not contain selected values, it should be replaced with readonlyContextList while calling SimpleTableManual
@@ -22,21 +28,10 @@ export default function MultiReferenceReadOnly(props) {
       label,
       hideLabel
     }
-  });
+  },
+  null, null, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
 
    return (
     <React.Fragment>{component}</React.Fragment>
   )
 }
-
-MultiReferenceReadOnly.defaultProps = {
-  label: "",
-  hideLabel: false
-};
-
-MultiReferenceReadOnly.propTypes = {
-  config: PropTypes.object.isRequired,
-  getPConnect: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  hideLabel: PropTypes.bool
-};

package/lib/template/NarrowWide/NarrowWide/NarrowWide.tsx

@@ -2,7 +2,22 @@ import React from "react";
 
 import './NarrowWide.css';
 
-export default function NarrowWide(props) {
+// NarrowWide does NOT have getPConnect. So, no need to extend from PConnProps
+interface NarrowWideProps {
+  // If any, enter additional props that only exist on this component
+  a: any,
+  b: any,
+  children?: Array<any>,
+  // eslint-disable-next-line react/no-unused-prop-types
+  title?: string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  cols?: string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  icon?: string
+}
+
+
+export default function NarrowWide(props: NarrowWideProps) {
   // const {a, b /*, cols, icon, title */ } = props;
   const {a, b, children} = props;
 

package/lib/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,14 +1,27 @@
 import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
 import { GridSize } from '@material-ui/core/Grid';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// import type { PConnProps } from '../../../../types/PConnProps';
+
+// Can't use PConnProps until getPConnect().getChildren() type is ok
+// interface NarrowWideDetailsProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   showLabel?: boolean,
+//   label: string,
+//   showHighlightedData?: boolean
+// }
+
 
 const COLUMN_WIDTHS = [4, 8];
 
-export default function NarrowWideDetails(props) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+export default function NarrowWideDetails(props /* : NarrowWideDetailsProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
@@ -40,7 +53,8 @@ export default function NarrowWideDetails(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field,
+        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -65,16 +79,3 @@ export default function NarrowWideDetails(props) {
     </FieldGroup>
   );
 }
-
-NarrowWideDetails.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-NarrowWideDetails.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/lib/template/NarrowWide/NarrowWideForm/NarrowWideForm.tsx

@@ -2,7 +2,15 @@ import React from "react";
 
 import './NarrowWideForm.css';
 
-export default function NarrowWideForm(props) {
+// NarrowWideForm does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface NarrowWideFormProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
+export default function NarrowWideForm(props: NarrowWideFormProps) {
   const {children} = props;
 
   return (

package/lib/template/NarrowWide/NarrowWidePage/NarrowWidePage.tsx

@@ -1,15 +1,27 @@
 import React, { Children } from "react";
-import PropTypes from "prop-types";
-
 // import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import NarrowWide from '@pega/react-sdk-components/lib/components/template/NarrowWide/NarrowWide';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+
+// NarrowWidePage does NOT have getPConnect. So, no need to extend from PConnProps
+interface NarrowWidePageProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  title: string,
+  templateCol: string,
+  icon: string
+}
+
 
 /*
  * The wrapper handles knowing how to take in just children and mapping
  * to the Cosmos template.
  */
-export default function NarrowWidePage(props) {
-  const { children, title, templateCol, icon } = props;
+export default function NarrowWidePage(props: NarrowWidePageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const NarrowWide = getComponentFromMap('NarrowWide');
+
+  const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
   const childArray = Children.toArray(children);
 
   return (
@@ -24,15 +36,3 @@ export default function NarrowWidePage(props) {
     </div>
   );
 }
-
-NarrowWidePage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  title: PropTypes.string.isRequired,
-  templateCol: PropTypes.string,
-  icon: PropTypes.string
-};
-
-NarrowWidePage.defaultProps = {
-  templateCol: "1fr 1fr",
-  icon: ""
-};

package/lib/template/OneColumn/OneColumn/OneColumn.tsx

@@ -1,8 +1,14 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Grid } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
 
+// OneColumn does NOT have getPConnect. So, no need to extend from PConnProps
+interface OneColumnProps{
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
 const useStyles = makeStyles((/* theme */) => ({
   colStyles: {
     display: "grid",
@@ -12,7 +18,7 @@ const useStyles = makeStyles((/* theme */) => ({
 }));
 
 
-export default function OneColumn(props) {
+export default function OneColumn(props: OneColumnProps) {
   const classes = useStyles();
 
   const { children} = props;
@@ -25,8 +31,3 @@ export default function OneColumn(props) {
     </Grid>
   )
 }
-
-OneColumn.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // template: PropTypes.string.isRequired
-};

package/lib/template/OneColumn/OneColumnPage/OneColumnPage.tsx

@@ -1,13 +1,20 @@
 import React from "react";
-import PropTypes from "prop-types";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// OneColumnPage does NOT have getPConnect. So, no need to extend from PConnProps
+interface OneColumnPageProps{
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
 
-import OneColumn from '@pega/react-sdk-components/lib/components/template/OneColumn/OneColumn';
 
 /*
  * The wrapper handles knowing how to take in just children
  *  and mapping to the TwoColumn template.
  */
-export default function OneColumnPage(props) {
+export default function OneColumnPage(props: OneColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const OneColumn = getComponentFromMap('OneColumn');
 
   return (
     <OneColumn
@@ -15,10 +22,3 @@ export default function OneColumnPage(props) {
     />
   );
 }
-
-OneColumnPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
-OneColumnPage.defaultProps = {
-};

package/lib/template/OneColumn/OneColumnTab/OneColumnTab.tsx

@@ -1,7 +1,10 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default function OneColumnTab(props) {
+interface OneColumnTabProps{
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+export default function OneColumnTab(props: OneColumnTabProps) {
   const { children} = props;
 
   return (
@@ -10,8 +13,3 @@ export default function OneColumnTab(props) {
     </div>
   )
 }
-
-OneColumnTab.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // template: PropTypes.string.isRequired
-};