update based on test comments

Author: Christina Mullen

packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss

@@ -27,7 +27,7 @@
   flex-flow: row wrap;
   justify-content: space-between;
   width: 100%;
-  max-height: 180px;
+  max-height: 11.25rem;
   overflow-y: auto;
   margin-top: 0.75rem;
 
@@ -37,24 +37,6 @@
     box-sizing: border-box;
     padding: 0.125rem 0;
     line-height: 1.75rem;
-
-    .global-variable-label {
-      display: block;
-      font-size: 0.875rem;
-      font-weight: bold;
-      color: var(--mds-color-theme-text-secondary-normal);
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    .global-variable-value {
-      display: block;
-      font-size: 0.875rem;
-      font-weight: 250;
-      color: var(--mds-color-theme-text-primary-normal);
-      word-break: break-word;
-    }
   }
 }
 

packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx

@@ -10,8 +10,8 @@ import {
   CallControlComponentProps,
   getCallerIdentifier,
   CallAssociatedDataMap,
-  getAgentViewableGlobalVariables,
 } from '../task.types';
+import {getAgentViewableGlobalVariables} from '../Task/task.utils';
 
 import {getMediaTypeInfo} from '../../../utils';
 import {
@@ -293,8 +293,12 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
                 className="global-variable-item"
                 data-testid={`cc-cad:global-var-${variable.name}`}
               >
-                <span className="global-variable-label">{variable.displayName || variable.name}</span>
-                <span className="global-variable-value">{variable.value || ''}</span>
+                <Text type="body-secondary" tagName={'small'}>
+                  {variable.displayName || variable.name}
+                </Text>
+                <Text type="body-secondary" tagName={'small'}>
+                  {variable.value || ''}
+                </Text>
               </div>
             ))}
           </div>

packages/contact-center/cc-components/src/components/task/Task/task.utils.ts

@@ -1,6 +1,43 @@
-import type {MEDIA_CHANNEL as MediaChannelType, TaskComponentData} from '../task.types';
+import type {
+  MEDIA_CHANNEL as MediaChannelType,
+  TaskComponentData,
+  CADVariable,
+  CallAssociatedDataMap,
+} from '../task.types';
 import {getMediaTypeInfo} from '../../../utils';
 
+/** System CAD variable keys that are already displayed elsewhere in the UI. */
+export const SYSTEM_CAD_KEYS = new Set([
+  'ani',
+  'dn',
+  'customerName',
+  'virtualTeamName',
+  'ronaTimeout',
+  'FC-DESKTOP-VIEW',
+]);
+
+/**
+ * Returns agent-viewable global variables from a callAssociatedData map,
+ * excluding system variables that are already rendered elsewhere.
+ */
+export const getAgentViewableGlobalVariables = (
+  callAssociatedData: CallAssociatedDataMap | undefined
+): CADVariable[] => {
+  if (!callAssociatedData || typeof callAssociatedData !== 'object') {
+    return [];
+  }
+
+  return Object.entries(callAssociatedData)
+    .filter(([key, cadVar]) => {
+      if (!cadVar || !cadVar.name) return false;
+      if (cadVar.agentViewable === false) return false;
+      if (!cadVar.global) return false;
+      if (SYSTEM_CAD_KEYS.has(key)) return false;
+      return true;
+    })
+    .map(([, cadVar]) => cadVar);
+};
+
 /**
  * Capitalizes the first word of a string
  * @param str - The string to capitalize

packages/contact-center/cc-components/src/components/task/task.types.ts

@@ -39,38 +39,6 @@ export interface CADVariable {
  */
 export type CallAssociatedDataMap = Record<string, CADVariable>;
 
-/** System CAD variable keys that are already displayed elsewhere in the UI. */
-export const SYSTEM_CAD_KEYS = new Set([
-  'ani',
-  'dn',
-  'customerName',
-  'virtualTeamName',
-  'ronaTimeout',
-  'FC-DESKTOP-VIEW',
-]);
-
-/**
- * Returns agent-viewable global variables from a callAssociatedData map,
- * excluding system variables that are already rendered elsewhere.
- */
-export const getAgentViewableGlobalVariables = (
-  callAssociatedData: CallAssociatedDataMap | undefined
-): CADVariable[] => {
-  if (!callAssociatedData || typeof callAssociatedData !== 'object') {
-    return [];
-  }
-
-  return Object.entries(callAssociatedData)
-    .filter(([key, cadVar]) => {
-      if (!cadVar || !cadVar.name) return false;
-      if (cadVar.agentViewable === false) return false;
-      if (!cadVar.global) return false;
-      if (SYSTEM_CAD_KEYS.has(key)) return false;
-      return true;
-    })
-    .map(([, cadVar]) => cadVar);
-};
-
 /**
  * Target types for consult/transfer operations
  */

packages/contact-center/cc-components/tests/components/task/CallControlCAD/call-control-cad.tsx

@@ -7,7 +7,7 @@ import {
   OUTBOUND_TYPE,
   CallAssociatedDataMap,
 } from '../../../../src/components/task/task.types';
-import {mockTask} from '@webex/test-fixtures';
+import {mockTask, mockCallAssociatedData} from '@webex/test-fixtures';
 import {BuddyDetails} from '@webex/cc-store';
 import '@testing-library/jest-dom';
 
@@ -377,57 +377,6 @@ describe('CallControlCADComponent', () => {
   });
 
   describe('Global Variables', () => {
-    const mockCallAssociatedData: CallAssociatedDataMap = {
-      Global_Language: {
-        name: 'Global_Language',
-        displayName: 'Customer Language',
-        value: 'English',
-        type: 'STRING',
-        agentEditable: false,
-        agentViewable: true,
-        global: true,
-        isSecure: false,
-        secureKeyId: '',
-        secureKeyVersion: 0,
-      },
-      Global_FeedbackSurveyOptIn: {
-        name: 'Global_FeedbackSurveyOptIn',
-        displayName: 'Post Call Survey Opt-in',
-        value: 'true',
-        type: 'STRING',
-        agentEditable: false,
-        agentViewable: true,
-        global: true,
-        isSecure: false,
-        secureKeyId: '',
-        secureKeyVersion: 0,
-      },
-      ani: {
-        name: 'ani',
-        displayName: 'ani',
-        value: '555-123-4567',
-        type: 'STRING',
-        agentEditable: false,
-        agentViewable: true,
-        global: false,
-        isSecure: false,
-        secureKeyId: '',
-        secureKeyVersion: 0,
-      },
-      Global_Hidden: {
-        name: 'Global_Hidden',
-        displayName: 'Hidden Variable',
-        value: 'secret',
-        type: 'STRING',
-        agentEditable: false,
-        agentViewable: false,
-        global: true,
-        isSecure: false,
-        secureKeyId: '',
-        secureKeyVersion: 0,
-      },
-    };
-
     const makePropsWithCallAssociatedData = (callAssociatedData: CallAssociatedDataMap) => ({
       ...defaultProps,
       currentTask: {

packages/contact-center/cc-components/tests/components/task/task.types.test.ts

@@ -1,8 +1,5 @@
-import {
-  getAgentViewableGlobalVariables,
-  CallAssociatedDataMap,
-  SYSTEM_CAD_KEYS,
-} from '../../../src/components/task/task.types';
+import {CallAssociatedDataMap} from '../../../src/components/task/task.types';
+import {getAgentViewableGlobalVariables, SYSTEM_CAD_KEYS} from '../../../src/components/task/Task/task.utils';
 
 describe('getAgentViewableGlobalVariables', () => {
   const makeGlobalVar = (

packages/contact-center/test-fixtures/src/fixtures.ts

@@ -514,6 +514,71 @@ const mockCC: IContactCenter = {
   getAccessToken: jest.fn().mockResolvedValue('mock-access-token'),
 };
 
+const mockCallAssociatedData: Record<
+  string,
+  {
+    name: string;
+    displayName: string;
+    value: string;
+    type: string;
+    agentEditable: boolean;
+    agentViewable: boolean;
+    global: boolean;
+    isSecure: boolean;
+    secureKeyId: string;
+    secureKeyVersion: number;
+  }
+> = {
+  Global_Language: {
+    name: 'Global_Language',
+    displayName: 'Customer Language',
+    value: 'English',
+    type: 'STRING',
+    agentEditable: false,
+    agentViewable: true,
+    global: true,
+    isSecure: false,
+    secureKeyId: '',
+    secureKeyVersion: 0,
+  },
+  Global_FeedbackSurveyOptIn: {
+    name: 'Global_FeedbackSurveyOptIn',
+    displayName: 'Post Call Survey Opt-in',
+    value: 'true',
+    type: 'STRING',
+    agentEditable: false,
+    agentViewable: true,
+    global: true,
+    isSecure: false,
+    secureKeyId: '',
+    secureKeyVersion: 0,
+  },
+  ani: {
+    name: 'ani',
+    displayName: 'ani',
+    value: '555-123-4567',
+    type: 'STRING',
+    agentEditable: false,
+    agentViewable: true,
+    global: false,
+    isSecure: false,
+    secureKeyId: '',
+    secureKeyVersion: 0,
+  },
+  Global_Hidden: {
+    name: 'Global_Hidden',
+    displayName: 'Hidden Variable',
+    value: 'secret',
+    type: 'STRING',
+    agentEditable: false,
+    agentViewable: false,
+    global: true,
+    isSecure: false,
+    secureKeyId: '',
+    secureKeyVersion: 0,
+  },
+};
+
 export {
   mockProfile,
   mockCC,
@@ -523,4 +588,5 @@ export {
   mockEntryPointsResponse,
   mockAddressBookEntriesResponse,
   makeMockAddressBook,
+  mockCallAssociatedData,
 };