give users the ability to specify font color in tableview

Signed-off-by: pogi7 <aaronlevitt7@gmail.com>

view/src/components/Table/Table.tsx

@@ -20,7 +20,7 @@ import {
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { useWizards } from '../../providers/WizardController'
-import { getLifecycleStateStyles, getRowRange } from './tableUtils'
+import { getLifecycleStateStyles, getRowRange, setFontStyle } from './tableUtils'
 import ITableData from '../../interfaces/ITableData'
 import ITableDataQuery from '../../interfaces/ITableDataQuery'
 import { TableLayout } from '../../interfaces/DataLayoutsType'
@@ -553,7 +553,12 @@ function Table({
                 className={`select-none border-0
                   ${
                     row.original.maturity &&
-                    getLifecycleStateStyles(row.original.maturity)
+                    layout.rowMapping.fontStyle &&
+                    setFontStyle(
+                      layout.rowMapping.fontStyle.styles,
+                      layout.rowMapping.fontStyle.conditional,
+                      row
+                    )
                   }
                   ${row.getIsSelected() && "row-selected"}`}
                 data-index={virtualRow.index}

view/src/components/Table/tableUtils.ts

@@ -84,7 +84,13 @@ export const mapValueData = (layout: TableLayout, data: {[key: string]: ITableDa
   return recursiveMapper(layout.rowMapping);
 }
 
-// Each returned string is a concatenation of Tailwind CSS classes
+/**
+ * Styles the font color as a tailwind class.  Each returned string is a concatenation of Tailwind CSS classes 
+ *
+ * @deprecated
+ * This function is not generic for all OML models.  Remove after v1.0.0.
+ *
+ */
 export const getLifecycleStateStyles = (state: CMState) => {
   switch (state) {
     case CMState.Proposed:
@@ -104,6 +110,27 @@ export const getLifecycleStateStyles = (state: CMState) => {
   }
 }
 
+/**
+ * Sets the font style based on a conditional for a given row.
+ *
+ * @remarks
+ * This method uses styles from {@link https://tailwindcss.com/ | TailwindCSS}.
+ *
+ * @param styles - The styles that come from the OML model.
+ * @param conditional - The conditional that determines which style to apply.
+ * @param row - The row on which to set the font style.
+ *
+ */
+export const setFontStyle = (
+  styles: Record<string, Record<string, string>>,
+  conditional: string,
+  row: Row<ITableData>
+) => {
+  // Remove redundant double quotes from string
+  const formattedConditional = row.original[conditional].slice(1, -1)
+  return styles[formattedConditional];
+};
+
 // Helper to get row range on Shift + Click to select multiple rows
 export function getRowRange<ITableData>(rows: Array<Row<ITableData>>, idA: string, idB: string) {
   const range: Array<Row<ITableData>> = [];

view/src/interfaces/CMStates.ts

@@ -1,5 +1,19 @@
+/**
+ * Configuration Management State Array.
+ *
+ * @deprecated
+ * This array is not generalized to all OML models.  Remove after v1.0.0.
+ *
+ */
 export const CMStatesArray = ['Proposed', 'Preliminary', 'Threat', 'Baseline', 'Deprecated', 'Retracted'] as const;
 
+/**
+ * Configuration Management State Enumeration.
+ *
+ * @deprecated
+ * This enum is not generalized to all OML models.  Remove after v1.0.0.
+ *
+ */
 export enum CMState {
   Proposed = 'Proposed',
   Preliminary = 'Preliminary',

view/src/interfaces/DataLayoutsType.ts

@@ -2,11 +2,18 @@ export interface IRowMapping {
   id: string;
   name: string;
   labelFormat: string;
+  // Example of Record<string, Record<string, string>>: { "outerKey1": {"innerKey1": "innerValue1"} } 
+  fontStyle?: FontStyle;
   isRecursive?: boolean;
   canDeleteElements?: boolean;
   subRowMappings?: IRowMapping[];
 }
 
+interface FontStyle {
+  conditional: string;
+  styles: Record<string, Record<string, string>>;
+}
+
 export interface IDiagramRowMapping extends IRowMapping {
   nodeColor: string;
   nodeTextColor: string;