Merge branch 'main' into feat/widgetize-app-layout-skeleton-event-base

Author: georgylobko

pages/funnel-analytics/static-single-page-flow.page.tsx

@@ -88,8 +88,8 @@ export default function StaticSinglePageCreatePage() {
             {
               analyticsMetadata: {
                 errorContext: {
-                  errorCategory: 'api_specific',
-                  errorSubCategory: 'access_control',
+                  errorCategory: 'API_SPECIFIC',
+                  errorSubCategory: 'ACCESS_CONTROL_ISSUES',
                   errorMessage: 'This is a dismissible error message.',
                 },
               },
@@ -149,8 +149,8 @@ export default function StaticSinglePageCreatePage() {
                       const errorMessage = 'There is an error';
                       setErrorText('There is an error');
                       setFunnelErrorContext({
-                        errorCategory: 'api_specific',
-                        errorSubCategory: 'connection',
+                        errorCategory: 'API_SPECIFIC',
+                        errorSubCategory: 'CONNECTION_PROBLEMS',
                         errorMessage,
                       });
                     } else {
@@ -205,8 +205,8 @@ export default function StaticSinglePageCreatePage() {
                           const errorMessage = 'Trigger error';
                           setFieldError(errorMessage);
                           setFieldErrorContext({
-                            errorCategory: 'input_validation',
-                            errorSubCategory: 'access_control',
+                            errorCategory: 'INPUT_VALIDATION',
+                            errorSubCategory: 'ACCESS_CONTROL_ISSUES',
                             errorMessage,
                           });
                         } else {

pages/multiselect/select-all.page.tsx

@@ -33,6 +33,7 @@ const groupedOptionsWithDisabledOptions: MultiselectProps.Options = [
 const initialSelectedOptions = [
   (groupedOptionsWithDisabledOptions[0] as OptionGroup).options[2],
   (groupedOptionsWithDisabledOptions[1] as OptionGroup).options[0],
+  (groupedOptionsWithDisabledOptions[1] as OptionGroup).options[1],
 ];
 
 export default function MultiselectPage() {

src/alert/__tests__/alert-analytics.test.tsx

@@ -207,8 +207,8 @@ describe('Alert Analytics', () => {
           type="error"
           analyticsMetadata={{
             errorContext: {
-              errorCategory: 'api_specific',
-              errorSubCategory: 'access_control',
+              errorCategory: 'API_SPECIFIC',
+              errorSubCategory: 'ACCESS_CONTROL_ISSUES',
               errorMessage: 'This is an error text from errorContext',
             },
           }}
@@ -225,8 +225,8 @@ describe('Alert Analytics', () => {
     expect(FunnelMetrics.funnelError).toHaveBeenCalledWith(
       expect.objectContaining({
         errorContext: {
-          errorCategory: 'api_specific',
-          errorSubCategory: 'access_control',
+          errorCategory: 'API_SPECIFIC',
+          errorSubCategory: 'ACCESS_CONTROL_ISSUES',
           errorMessage: 'This is an error text from errorContext',
         },
       })

src/internal/analytics/__integ__/static-single-page-flow.test.ts

@@ -328,8 +328,8 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
         stepNumber: 1,
         subStepName: 'Container 1 - header',
         errorContext: {
-          errorCategory: 'input_validation',
-          errorSubCategory: 'access_control',
+          errorCategory: 'INPUT_VALIDATION',
+          errorSubCategory: 'ACCESS_CONTROL_ISSUES',
           errorMessage: 'Trigger error',
         },
         fieldIdentifier: 'field1',

src/internal/analytics/interfaces.ts

@@ -5,31 +5,31 @@ export type FunnelType = 'single-page' | 'multi-page' | 'modal';
 export type FlowType = 'create' | 'edit' | 'delete' | 'home' | 'dashboard' | 'view-resource';
 
 type ErrorSubCategory =
-  | 'data_format'
-  | 'parameter_validation'
-  | 'access_control'
-  | 'identity_management'
-  | 'resource_state'
-  | 'resource_capacity'
-  | 'connection'
-  | 'network_config'
-  | 'resource_limit'
-  | 'service_quota'
-  | 'service_integration'
-  | 'resource_config'
-  | 'service_operations'
-  | 'api_request'
-  | 'other';
+  | 'DATA_FORMAT_ISSUES'
+  | 'PARAMETER_VALIDATION_ISSUES'
+  | 'ACCESS_CONTROL_ISSUES'
+  | 'IDENTITY_MANAGEMENT_PROBLEMS'
+  | 'RESOURCE_STATE_ISSUES'
+  | 'RESOURCE_CAPACITY_PROBLEMS'
+  | 'CONNECTION_PROBLEMS'
+  | 'NETWORK_CONFIGURATION_ISSUES'
+  | 'RESOURCE_LIMIT_EXCEEDED'
+  | 'SERVICE_QUOTA_RESTRICTIONS'
+  | 'SERVICE_INTEGRATION_CONFLICTS'
+  | 'RESOURCE_CONFIGURATION_MISMATCHES'
+  | 'SERVICE_SPECIFIC_OPERATIONS'
+  | 'API_REQUEST_PROBLEMS'
+  | 'OTHER';
 
 type ErrorCategory =
-  | 'input_validation'
-  | 'permission'
-  | 'resource_availability'
-  | 'network'
-  | 'service_limits'
-  | 'configuration'
-  | 'api_specific'
-  | 'other';
+  | 'INPUT_VALIDATION'
+  | 'PERMISSION_IAM'
+  | 'RESOURCE_AVAILABILITY'
+  | 'NETWORK_CONNECTIVITY'
+  | 'SERVICE_QUOTAS_LIMITS'
+  | 'CONFIGURATION_CONFLICTS'
+  | 'API_SPECIFIC'
+  | 'OTHER';
 
 export interface ErrorContext {
   errorCategory: ErrorCategory;

src/multiselect/__tests__/analytics-metadata.test.tsx

@@ -276,7 +276,10 @@ describe('Multiselect renders correct analytics metadata', () => {
       });
 
       const disabledToken = wrapper.findToken(3)!.findDismiss().getElement();
-      expect(getGeneratedAnalyticsMetadata(disabledToken)).toEqual(getMetadataContexts(5));
+      expect(getGeneratedAnalyticsMetadata(disabledToken)).toEqual({
+        detail: { position: '3' },
+        ...getMetadataContexts(5),
+      });
     });
 
     test('in show more', () => {

src/multiselect/internal.tsx

@@ -31,6 +31,8 @@ type InternalMultiselectProps = SomeRequired<
 > &
   InternalBaseComponentProps;
 
+type ExtendedToken = TokenGroupProps.Item & { _readOnly: boolean };
+
 const InternalMultiselect = React.forwardRef(
   (
     {
@@ -116,9 +118,9 @@ const InternalMultiselect = React.forwardRef(
       />
     );
 
-    const tokens: TokenGroupProps['items'] = selectedOptions.map(option => ({
+    const tokens: Array<ExtendedToken> = selectedOptions.map(option => ({
       label: option.label,
-      disabled: disabled || option.disabled,
+      disabled,
       labelTag: option.labelTag,
       description: option.description,
       iconAlt: option.iconAlt,
@@ -129,6 +131,7 @@ const InternalMultiselect = React.forwardRef(
       dismissLabel: i18n('deselectAriaLabel', deselectAriaLabel?.(option), format =>
         format({ option__label: option.label ?? '' })
       ),
+      _readOnly: !!option.disabled,
     }));
 
     const ListComponent = virtualScroll ? VirtualList : PlainList;
@@ -200,6 +203,7 @@ const InternalMultiselect = React.forwardRef(
             limitShowFewerAriaLabel={tokenLimitShowFewerAriaLabel}
             disableOuterPadding={true}
             readOnly={readOnly}
+            isItemReadOnly={item => (item as ExtendedToken)._readOnly}
           />
         )}
 

src/token-group/internal.tsx

@@ -20,7 +20,10 @@ import { Token } from './token';
 import tokenListStyles from '../internal/components/token-list/styles.css.js';
 import styles from './styles.css.js';
 
-type InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;
+type InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> &
+  InternalBaseComponentProps & {
+    isItemReadOnly?: (item: TokenGroupProps.Item) => boolean;
+  };
 
 export default function InternalTokenGroup({
   alignment,
@@ -32,6 +35,7 @@ export default function InternalTokenGroup({
   limitShowFewerAriaLabel,
   limitShowMoreAriaLabel,
   readOnly,
+  isItemReadOnly,
   __internalRootRef,
   ...props
 }: InternalTokenGroupProps) {
@@ -75,7 +79,7 @@ export default function InternalTokenGroup({
               setNextFocusIndex(itemIndex);
             }}
             disabled={item.disabled}
-            readOnly={readOnly}
+            readOnly={readOnly || isItemReadOnly?.(item)}
             {...(item.disabled || readOnly
               ? {}
               : getAnalyticsMetadataAttribute({ detail: { position: `${itemIndex + 1}` } }))}