@pega/dx-component-builder-sdk 0.242.8 → 0.242.10

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/decimal-currency.component.ts.mustache

@@ -129,7 +129,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
-    const currencyISOCode: any = this.configProps$?.currencyISOCode;
+    const currencyISOCode = this.configProps$?.currencyISOCode ?? '';
 
     const theSymbols = getCurrencyCharacters(currencyISOCode);
     this.currSym = theSymbols.theCurrencySymbol;
@@ -169,7 +169,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.decimalPrecision = this.configProps$?.allowDecimals ? 2 : 0;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -184,7 +184,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   fieldOnBlur(event: any) {
     const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
+    const propName = this.pConn$?.getStateProps().value;
     let value = event?.target?.value;
     value = value?.substring(1);
     if (this.currSep === ',') {

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/demo.stories.tsx.mustache

@@ -33,6 +33,16 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
       },
       getStateProps: () => {
         return stateProps;
+      },
+      getActionsApi: () => {
+        return {
+          updateFieldValue: () => {
+            /* nothing */
+          },
+          triggerFieldChange: () => {
+            /* nothing */
+          }
+        };
       }
     } as any,
     formGroup$: new FormBuilder().group({})

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/decimal-percentage.component.ts.mustache

@@ -157,7 +157,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -175,7 +175,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   fieldOnBlur(event: any) {
     const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
+    const propName = this.pConn$?.getStateProps()?.value;
     let value = event?.target?.value;
     value = value ? value.replace(/%/g, '') : '';
     if (this.currSep === ',') {

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -19,6 +19,16 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
       },
       getStateProps: () => {
         return stateProps;
+      },
+      getActionsApi: () => {
+        return {
+          updateFieldValue: () => {
+            /* nothing */
+          },
+          triggerFieldChange: () => {
+            /* nothing */
+          }
+        };
       }
     } as any,
     formGroup$: new FormBuilder().group({})

package/src/tasks/create/templates/SDK-Angular/field/Integer/integer.component.ts.mustache

@@ -142,7 +142,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {

package/src/tasks/create/templates/SDK-Angular/field/Picklist/picklist.component.ts.mustache

@@ -157,7 +157,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
     optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
@@ -166,7 +166,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.value$ = 'Select';
     }
 
-    const propName = (this.pConn$.getStateProps() as any).value;
+    const propName = this.pConn$.getStateProps().value;
     const className = this.pConn$.getCaseInfo().getClassName();
     const refName = propName?.slice(propName.lastIndexOf('.') + 1);
 
@@ -205,7 +205,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       event.value = '';
     }
     const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
+    const propName = this.pConn$?.getStateProps().value;
     handleEvent(actionsApi, 'changeNblur', propName, event.value);
     if (this.configProps$?.onRecordChange) {
       this.configProps$.onRecordChange(event);

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/picklist-autocomplete.component.ts.mustache

@@ -184,7 +184,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
     if (this.listType === 'associated') {
       this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
     }
@@ -220,7 +220,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     let datasource = this.configProps$.datasource;
     let columns = this.configProps$.columns;
     // const { deferDatasource, datasourceMetadata } = this.configProps$;
-    const { deferDatasource, datasourceMetadata }: any = this.pConn$.getConfigProps();
+    const { deferDatasource, datasourceMetadata } = this.pConn$.getConfigProps();
     // convert associated to datapage listtype and transform props
     // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
     if (deferDatasource && datasourceMetadata?.datasource?.name) {
@@ -318,7 +318,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     const value = key;
     const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
+    const propName = this.pConn$?.getStateProps().value;
     handleEvent(actionsApi, 'changeNblur', propName, value);
     if (this.configProps$?.onRecordChange) {
       el.value = value;

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.ts.mustache

@@ -164,11 +164,11 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
 
-    const propName = (this.pConn$.getStateProps() as any).value;
+    const propName = this.pConn$.getStateProps().value;
     const className = this.pConn$.getCaseInfo().getClassName();
     const refName = propName?.slice(propName.lastIndexOf('.') + 1);
 

package/src/tasks/create/templates/SDK-Angular/field/Text/text.component.ts.mustache

@@ -100,11 +100,13 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   // updateSelf
   updateSelf(): void {
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
 
-    this.value$ = this.configProps$.value || '';
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/text-email.component.ts.mustache

@@ -139,7 +139,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/text.component.ts.mustache

@@ -113,7 +113,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.ts.mustache

@@ -140,7 +140,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {

package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/text-phone.component.ts.mustache

@@ -162,7 +162,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   fieldOnChange() {
     if (this.formGroup$.controls[this.controlName$].value) {
       const actionsApi = this.pConn$?.getActionsApi();
-      const propName = (this.pConn$?.getStateProps() as any).value;
+      const propName = this.pConn$?.getStateProps().value;
       const value = this.formGroup$.controls[this.controlName$].value;
       const eventObj = {
         target: {

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.ts.mustache

@@ -140,7 +140,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.ts.mustache

@@ -138,7 +138,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.ts.mustache

@@ -50,7 +50,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/details.component.ts.mustache

@@ -57,7 +57,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.ts.mustache

@@ -49,7 +49,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
     const propToUse: any = { ...this.pConn$.getInheritedProps() };
     this.showLabel = propToUse?.showLabel;
     this.label = propToUse?.label;
-    const kids = this.pConn$.getChildren() as any[];
+    const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.scss.mustache

@@ -11,7 +11,7 @@
 .psdk-two-column-column {
   width: 50%;
   float: left;
-  padding: 0rem 0rem;
+  padding: 0rem 1.5rem;
   height: 100%;
 }
 

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.ts.mustache

@@ -29,6 +29,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/mock.ts.mustache

@@ -231,7 +231,7 @@ export const child2 = [
             readOnly: false,
             placeholder: 'Phone',
             value: '2015550123',
-            label: '',
+            label: 'Phone Number',
             hasSuggestions: false
           };
         },

package/src/tasks/create/templates/SDK-Angular/template/PAGE/page.component.ts.mustache

@@ -34,7 +34,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.title$ = this.configProps$.title;
     const operator = this.configProps$.operator;

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.ts.mustache

@@ -50,7 +50,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges, OnD
   }
 
   updateSelf(): void {
-    const configProps$ = this.pConn$.getConfigProps() as any;
+    const configProps$ = this.pConn$.getConfigProps();
     this.displayLabel = this.displayLabel?.toLowerCase();
     const label = configProps$?.label?.toLowerCase();
     if (label === 'create operator' || this.displayLabel === 'create operator') {

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache

@@ -73,7 +73,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   if (formatter === 'Currency') {
     formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
   } else {
-    formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+    formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
   }
 
   if (displayMode === 'DISPLAY_ONLY') {

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache

@@ -62,7 +62,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache

@@ -54,7 +54,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const helperTextToDisplay = validatemessage || helperText;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 

package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache

@@ -23,7 +23,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', readOnly, onChange, onBlur, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
+  const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
 
   const helperTextToDisplay = validatemessage || helperText;
   let testProp = {};
@@ -33,7 +33,7 @@ const renderField = resolvedProps => {
   };
   const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
   let val: any = '';
-  
+
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
   if (label === 'Service Date')
@@ -72,24 +72,27 @@ const renderField = resolvedProps => {
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
     val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
 
+  const disableDropdown = true;
   if (label === 'Phone Number')
     val = (
       <MuiTelInput
-        fullWidth
-        variant='outlined'
-        helperText={helperTextToDisplay}
-        placeholder={placeholder ?? ''}
-        size='small'
-        defaultCountry='US'
-        required={required}
-        disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
-        error={status === 'error'}
-        label={label}
-        value={value}
-        InputProps={{ ...testProp }}
-      />
+      fullWidth
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      defaultCountry='US'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{
+        readOnly: true,
+        inputProps: { ...testProp }
+      }}
+      disableDropdown={disableDropdown}
+    />
     );
 <%={{ }}=%>     {{! revert delimiters for mustache }}
 
@@ -170,8 +173,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
       hasSuggestions: false,
       onChange: val => {
         setPhone(val);
-      },
-      onBlur: () => {}
+      }
     },
     {
       readOnly: undefined,

package/src/tasks/index.js

@@ -9,6 +9,7 @@ export { default as mapAllComponents } from './map-all/index.js';
 export { default as publishComponent } from './publish/index.js';
 export { default as publishAllComponents } from './publish-all/index.js';
 export { default as renameComponent } from './rename/index.js';
+export { default as quarantine } from './quarantine/index.js';
 export { default as listComponents } from './list/index.js';
 export { default as updateComponent } from './update/index.js';
 export { default as validate } from './validator/index.js';

package/src/tasks/map/map.js

@@ -43,7 +43,8 @@ export const getPrettierFormattedString = async (content) => {
 
   // format the contents
   if (options) {
-    return prettier.format(content, options);
+    options.parser = 'babel';
+    return  prettier.format(content, options);
   }
   else {
     return content;

package/src/tasks/quarantine/index.js

@@ -0,0 +1,81 @@
+import fs from 'fs';
+import path, {join} from 'path';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+
+
+import {
+  showVersion,
+  getFramework,
+  getJestFunctionalTestList } from '../../util.js';
+
+import { JEST_TESTS_FUNCTIONAL_PATH } from '../../constants.js';
+
+
+export const quarnUnquarnTests = async(answers) => {
+  switch (answers.QuarUnQuar) {
+    case "Quarantine" :
+      await quarantineTests(answers);
+      break;
+    case "Unquarantine" :
+      await unquarantineTests(answers);
+      break;
+  }
+}
+
+
+
+export const quarantineTests = async(answers) => {
+  const testList = await getJestFunctionalTestList("ALL");
+  const frameWork = await getFramework();
+  const SDK_PATH = frameWork === "SDK-Angular" ? "sdk-a" : "sdk-r";
+  const functionalPath = join(path.resolve(), JEST_TESTS_FUNCTIONAL_PATH, SDK_PATH);
+
+  // rename .test to .notest
+  for (const testName of testList) {
+    const quarantineName = testName.replace(".test", ".notest");
+    fs.renameSync(join(functionalPath, testName), join(functionalPath, quarantineName));
+  }
+
+  console.log(chalk.green(`All ${SDK_PATH} tests are quarantined.`));
+
+}
+
+export const unquarantineTests = async(answers) => {
+  const testList = await getJestFunctionalTestList("ALL");
+  const frameWork = await getFramework();
+  const SDK_PATH = frameWork === "SDK-Angular" ? "sdk-a" : "sdk-r";
+  const functionalPath = join(path.resolve(), JEST_TESTS_FUNCTIONAL_PATH, SDK_PATH);
+
+  // rename .test to .notest
+  for (const testName of testList) {
+    const restoreName = testName.replace(".notest", ".test");
+    fs.renameSync(join(functionalPath, testName), join(functionalPath, restoreName));
+  }
+
+  console.log(chalk.green(`All ${SDK_PATH} tests are unquarantined.`));
+
+}
+
+
+export default async options => {
+
+  await showVersion();
+
+  const quaranAnswers = await inquirer.prompt([
+
+    {
+      name: 'QuarUnQuar',
+      type: 'rawlist',
+      message: `Quarantine or UnQuarantine tests`,
+      choices: ["Quarantine", "Unquarantine"],
+      default: 'Quarantine'
+
+    }
+  ]);
+
+  // await showCurrentStatus();
+  await quarnUnquarnTests(quaranAnswers);
+
+
+}

package/src/util.js

@@ -40,7 +40,8 @@ import {
   COMPONENT_DIRECTORY_SUFFIX_SDK,
   DXCB_COMPONENT_DEFAULTS,
   SERVER_CONFIG,
-  SERVER_REST_URL
+  SERVER_REST_URL,
+  JEST_TESTS_FUNCTIONAL_PATH
 } from './constants.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
@@ -765,6 +766,33 @@ export const showVersion = () => {
       console.log(chalk.redBright("DX Component Builder - SDK requires node v18 or greater, current version: " + process.version));
       process.exit(1);
     }
+};
+
+export const getJestFunctionalTestList = async(whichTests) => {
+  const frameWork = await getFramework();
+  const SDK_PATH = frameWork === "SDK-Angular" ? "sdk-a" : "sdk-r";
+  const functionalDir = join(path.resolve(), JEST_TESTS_FUNCTIONAL_PATH, SDK_PATH);
+  const libFilter = "localLib";
+
+  switch (whichTests) {
+    case "ALL" :
+      return fs
+      .readdirSync(functionalDir, { withFileTypes: true })
+      .filter(dirent => !dirent.isDirectory() )
+      .map(dirent => dirent.name);
+    case "Original":
+      return fs
+      .readdirSync(functionalDir, { withFileTypes: true })
+      .filter(dirent => !dirent.isDirectory() && !dirent.name.startsWith(libFilter))
+      .map(dirent => dirent.name);
+    case "Library" :
+      return fs
+      .readdirSync(functionalDir, { withFileTypes: true })
+      .filter(dirent => !dirent.isDirectory() && dirent.name.startsWith(libFilter))
+      .map(dirent => dirent.name);
+  }
+
+
 }
 
 export const getOOTBComponents = async () => {

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -51,7 +51,7 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   function getGridItemLabel() {
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
@@ -63,7 +63,7 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
         {isHtml ? (
           // eslint-disable-next-line react/no-danger
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />

package/tests/assets/sdk-r/components/create/override-sdk/field/Phone/Phone.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { MuiTelInput } from 'mui-tel-input';
+import MuiPhoneNumber from 'material-ui-phone-number';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -57,12 +57,12 @@ export default function Phone(props: PhoneProps) {
     const disableDropdown = true;
     return (
       <div>
-        <MuiTelInput
+        <MuiPhoneNumber
           fullWidth
           helperText={helperTextToDisplay}
           placeholder={placeholder ?? ''}
           size='small'
-          defaultCountry='US'
+          defaultCountry='us'
           required={required}
           disabled={disabled}
           onChange={onChange}
@@ -91,13 +91,13 @@ export default function Phone(props: PhoneProps) {
   };
 
   return (
-    <MuiTelInput
+    <MuiPhoneNumber
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
       size='small'
-      defaultCountry='US'
+      defaultCountry='us'
       required={required}
       disabled={disabled}
       onChange={handleChange}

package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css

@@ -165,5 +165,4 @@
 
 .scrollable {
   overflow-y: scroll !important;
-  min-height: 200px !important;
 }