@axinom/mosaic-ui 0.63.0-rc.1 → 0.63.0-rc.10

package/src/components/Explorer/BulkEdit/useBulkEdit.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react';
 import { Data } from '../../../types';
-import { FieldSelection } from '../../FieldSelection';
 import { FormStation } from '../../FormStation';
 import { IconName } from '../../Icons';
 import {
@@ -74,8 +73,9 @@ export const useBulkEdit = <T extends Data>({
     () =>
       bulkEditRegistration
         ? {
-            label: bulkEditRegistration.label,
+            label: bulkEditRegistration.label ?? 'Bulk Edit',
             icon: bulkEditRegistration.icon ?? IconName.BulkEdit,
+            tag: 'BETA',
             onClick: () => setIsBulkEditMode((prev) => !prev),
           }
         : undefined,
@@ -93,12 +93,8 @@ export const useBulkEdit = <T extends Data>({
     if (bulkEditRegistration?.component) {
       return bulkEditRegistration.component;
     } else if (bulkEditRegistration?.config) {
-      return (
-        <FieldSelection>
-          {BulkEditFormFieldsConfigConverter(
-            bulkEditRegistration?.config.fields,
-          )}
-        </FieldSelection>
+      return BulkEditFormFieldsConfigConverter(
+        bulkEditRegistration?.config.fields,
       );
     }
     return null;
@@ -116,6 +112,8 @@ export const useBulkEdit = <T extends Data>({
             : undefined
         }
         showSaveHeaderAction={!noItemsSelected}
+        saveHeaderActionConfig={{ label: 'Apply', icon: IconName.Checkmark }}
+        saveNotificationMessage="Your changes are being applied to the selected items."
       >
         {BulkEditContent}
       </FormStation>

package/src/components/Explorer/Explorer.model.ts

@@ -127,7 +127,7 @@ export interface QuickEditRegistration<T> {
 
 export interface BulkEditRegistration<T extends Data> {
   /** The label of the action. */
-  label: string;
+  label?: string;
   /** Optional built in icon. This prop also accepts an img src. */
   icon?: IconName | string;
   /** Component to render. This will override the component that is generated. */

package/src/components/Explorer/Explorer.tsx

@@ -487,6 +487,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
             onItemSelected={itemSelectedHandler}
             onRequestMoreData={onRequestMoreData}
             onSortChanged={(sortData: SortData<T>) => {
+              listRef.current?.resetSelection();
               onSortChanged(sortData);
               setSortOrder(sortData);
             }}

package/src/components/Explorer/helpers/useActions.ts

@@ -63,6 +63,7 @@ export const useActions = <T extends Data>({
 }: UseActionsProps<T>): UseActionsReturnType => {
   const bulkActionItems: PageHeaderJsActionProps[] = useMemo(
     () => [
+      ...(bulkEditAction ? [bulkEditAction] : []),
       ...(bulkActions ?? []).map((action) => ({
         ...action,
         onClick: async () => {
@@ -101,7 +102,6 @@ export const useActions = <T extends Data>({
           }
         },
       })),
-      ...(bulkEditAction ? [bulkEditAction] : []),
     ],
     [
       bulkActions,

package/src/components/FieldSelection/FieldSelection.scss

@@ -5,6 +5,13 @@
   grid-template-columns: 1fr 50px;
   gap: 10px;
   align-items: center;
+}
+
+.selectionHeader {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  align-items: center;
 
   div:has(> input) {
     padding: 2px;

package/src/components/FieldSelection/FieldSelection.spec.tsx

@@ -34,7 +34,6 @@ describe('FieldSelection', () => {
       target: { value: 'field1' },
     });
     fireEvent.click(screen.getByText('Field 1'));
-    fireEvent.click(screen.getByTestId('add-field-button'));
 
     expect(screen.getByTestId('field-field1')).toBeInTheDocument();
   });
@@ -51,7 +50,6 @@ describe('FieldSelection', () => {
       target: { value: 'field1' },
     });
     fireEvent.click(screen.getByText('Field 1'));
-    fireEvent.click(screen.getByTestId('add-field-button'));
 
     expect(screen.getByTestId('field-field1')).toBeInTheDocument();
 

package/src/components/FieldSelection/FieldSelection.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { noop } from '../../helpers/utils';
 import { Accordion, AccordionItem } from '../Accordion';
 import { Button, ButtonContext } from '../Buttons';
 import { Select } from '../FormElements';
@@ -8,6 +9,8 @@ import classes from './FieldSelection.scss';
 
 interface FieldSelectionProps {
   className?: string;
+  onFieldAdded?: (field: string) => void;
+  onFieldRemoved?: (field: string) => void;
 }
 
 interface FieldDefinition {
@@ -19,6 +22,8 @@ interface FieldDefinition {
 
 export const FieldSelection: React.FC<FieldSelectionProps> = ({
   className,
+  onFieldAdded = noop,
+  onFieldRemoved = noop,
   children,
 }) => {
   useEffect(() => {
@@ -70,14 +75,15 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
                 ...currentFields,
                 newField,
               ]);
+              onFieldAdded(newField.value);
             }
           }}
         />
       }
     >
-      {selectedFields.map((field, i) => (
+      {selectedFields.map((field) => (
         <AccordionItem
-          key={i}
+          key={field.value}
           header={
             <FieldSelectionItemHeader
               label={field.label as string}
@@ -88,6 +94,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
                 setAvailableFields((currentFields) =>
                   [...currentFields, field].sort((a, b) => a.index - b.index),
                 );
+                onFieldRemoved(field.value);
               }}
             />
           }
@@ -105,7 +112,7 @@ const FieldSelectionHeader: React.FC<{
 }> = ({ fields, onAddField }) => {
   const [value, setValue] = React.useState<string>();
 
-  const handleButtonClicked = useCallback(() => {
+  useEffect(() => {
     if (value) {
       onAddField(value);
       setValue(undefined);
@@ -113,22 +120,17 @@ const FieldSelectionHeader: React.FC<{
   }, [onAddField, value]);
 
   return (
-    <div className={classes.header}>
+    <div className={classes.selectionHeader}>
       <Select
         label="Field"
         name="field"
         placeholder="Select Field"
         options={fields}
+        disabled={fields.length === 0}
         inlineMode={true}
         onChange={(e) => setValue(e.currentTarget.value)}
         value={value}
       />
-      <Button
-        icon={IconName.Plus}
-        buttonContext={value ? ButtonContext.Active : ButtonContext.Icon}
-        onButtonClicked={handleButtonClicked}
-        dataTestId="add-field-button"
-      />
     </div>
   );
 };

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { DateTimePicker } from '../../DateTime/DateTimePicker';
 import { IconName } from '../../Icons';
@@ -18,7 +19,7 @@ export interface DateTimeTextProps extends BaseFormControl {
   autoFocus?: boolean;
   /** Whether or not the control supports auto complete */
   autoComplete?: 'on' | 'off';
-  /** Whether the control modifies the time portion of the value */
+  /** Whether the control modifies the time portion of the value (default: true) */
   modifyTime?: boolean;
   /** Callback when the datepicker popup is closed or the date field value is changed */
   onChange?: (value: string | null, isValidDate: boolean) => void;
@@ -39,7 +40,7 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
   error = undefined,
   autoFocus = false,
   autoComplete,
-  onChange,
+  onChange = noop,
   modifyTime = true,
   className = '',
   ...rest
@@ -60,34 +61,27 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
 
   const onBlurHandler = useCallback(
     (e: React.FocusEvent<HTMLInputElement>) => {
-      // `display` represents the formatted version of the `value` prop and is updated whenever `value` changes.
-      // Comparing `e.target.value` with `display` ensures that onChange is only triggered when the input value has changed.
-      if (e.target.value === display) {
-        // If the value hasn't changed, do not trigger onChange
-        return;
-      }
-
       const textValue = e.target.value;
       const parsedValue = modifyTime
         ? DateTime.fromFormat(textValue, 'f')
         : DateTime.fromFormat(textValue, 'D');
 
       if (parsedValue.isValid) {
-        onChange && onChange(parsedValue.toISO(), parsedValue.isValid);
+        onChange(parsedValue.toISO(), parsedValue.isValid);
       } else if (textValue === '') {
-        onChange && onChange(null, true);
+        onChange(null, true);
       } else {
         // Fallback parser if the user types in an ISO date
         const isoParsedValue = DateTime.fromISO(textValue);
 
         if (isoParsedValue.isValid) {
-          onChange && onChange(isoParsedValue.toISO(), isoParsedValue.isValid);
+          onChange(isoParsedValue.toISO(), isoParsedValue.isValid);
         } else {
-          onChange && onChange(textValue, parsedValue.isValid);
+          onChange(textValue, parsedValue.isValid);
         }
       }
     },
-    [display, modifyTime, onChange],
+    [modifyTime, onChange],
   );
 
   return (

package/src/components/FormElements/DateTimeField/DateTimeTextField.tsx

@@ -1,4 +1,5 @@
 import { useField } from 'formik';
+import { DateTime } from 'luxon';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
 import { DateTimeText, DateTimeTextProps } from './DateTimeText';
@@ -14,16 +15,28 @@ export const DateTimeTextField: React.FC<
   const error = useFormikError(props.name);
   const [, meta, helpers] = useField(props.name);
 
-  const handleChange = (value: string | null, valid?: boolean): void => {
+  const handleChange = (value: string | null, valid: boolean): void => {
     if (!valid) {
       helpers.setError('Invalid Date');
       helpers.setValue(value, false);
     } else {
-      helpers.setValue(value);
-    }
+      const initialDateTime = DateTime.fromISO(meta.initialValue);
+      const newDateTime = DateTime.fromISO(value ?? '');
 
-    if (value === meta.initialValue) {
-      helpers.setTouched(false);
+      if (newDateTime.setZone(initialDateTime.zone).equals(initialDateTime)) {
+        // If the new date is the same as the initial value and the timezone is the only change,
+        // set it to the initial value
+        helpers.setValue(meta.initialValue);
+      } else if (
+        (value === null || value === '') &&
+        (!meta.initialValue || meta.initialValue === '')
+      ) {
+        // If the value is null or empty and the initial value is also null or empty,
+        // set it to the initial value
+        helpers.setValue(meta.initialValue);
+      } else {
+        helpers.setValue(value);
+      }
     }
   };
 

package/src/components/FormStation/Create/Create.stories.tsx

@@ -7,6 +7,7 @@ import * as Yup from 'yup';
 import { createGroups } from '../../../helpers/storybook';
 import {
   CustomTagsField,
+  DateTimeTextField,
   FileUpload,
   SelectField,
   SingleLineTextField,
@@ -23,6 +24,7 @@ interface CreateValues {
   shortDescription?: string;
   longDescription?: string;
   cast?: string[];
+  released?: string;
 }
 
 interface APIResponse {
@@ -108,6 +110,12 @@ export const Default: StoryObj<CreateStoryType> = {
           as={SingleLineTextField}
           type="password"
         />
+        <Field
+          name="released"
+          label="Released"
+          as={DateTimeTextField}
+          modifyTime={false}
+        />
       </>
     ),
     title: 'Create a Movie',
@@ -127,6 +135,7 @@ export const Default: StoryObj<CreateStoryType> = {
         shortDescription: '',
         longDescription: '',
         cast: [],
+        released: '',
       },
     },
     cancelNavigationUrl: '/',

package/src/components/FormStation/FormStation.stories.tsx

@@ -169,7 +169,7 @@ export const Extended: StoryObj<typeof Details> = (() => {
           shortDescription: 'Some short abstract...',
           longDescription: '',
           cast: ['Jane Doe', 'John Doe'],
-          released: '2020-04-03T00:00:00.000+00:00',
+          released: '2020-04-03',
           list: listData,
           archived: false,
           timestamp: '00:00:00.001',
@@ -227,7 +227,7 @@ export const Extended: StoryObj<typeof Details> = (() => {
             name="released"
             label="Released"
             as={DateTimeTextField}
-            // modifyTime={false}
+            modifyTime={false}
           />
           <Field
             name="password"

package/src/components/FormStation/FormStation.tsx

@@ -5,6 +5,7 @@ import { OptionalObjectSchema } from 'yup/lib/object';
 import { Data } from '../../types/data';
 import { BulkEditContext } from '../Explorer/BulkEdit/BulkEditContext';
 import { QuickEditContext } from '../Explorer/QuickEdit/QuickEditContext';
+import { PageHeaderJsActionProps } from '../PageHeader/PageHeaderAction';
 import { StationMessage } from '../models';
 import {
   FormActionData,
@@ -39,6 +40,16 @@ export interface FormStationProps<
   actionsWidth?: string;
   /** If set to true, the save header action is shown. (default: true) */
   showSaveHeaderAction?: boolean;
+  /**
+   * Optional configuration for the save header action button.
+   * Allows customizing the label and icon.
+   */
+  saveHeaderActionConfig?: Pick<PageHeaderJsActionProps, 'label' | 'icon'>;
+  /**
+   * If set, this will override the default notification message shown
+   * after a successful save.
+   */
+  saveNotificationMessage?: string;
   /**
    * An object containing the initial data of the form.
    */
@@ -91,6 +102,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   className = '',
   setTabTitle = true,
   showSaveHeaderAction = true,
+  saveHeaderActionConfig,
+  saveNotificationMessage,
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
@@ -103,7 +116,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
     setStationError,
     isFormSubmitting,
     lastSubmittedResponse,
-  } = useDataProvider(initialData, saveData);
+  } = useDataProvider(initialData, saveData, saveNotificationMessage);
 
   const { setValidationError, validationWatcher } = useValidationError(
     stationError,
@@ -137,6 +150,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             className={classes.header}
             setTabTitle={setTabTitle}
             showSaveHeaderAction={showSaveHeaderAction}
+            saveHeaderActionConfig={saveHeaderActionConfig}
+            setValidationError={setValidationError}
           />
           {!bulkEditContext && (
             <SaveOnNavigate

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -10,6 +10,7 @@ import {
   PageHeaderActionType,
   PageHeaderProps,
 } from '../../PageHeader';
+import { PageHeaderJsActionProps } from '../../PageHeader/PageHeaderAction';
 import { useTitle } from '../helpers/useTitle';
 
 /**
@@ -22,6 +23,8 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl?: string;
     setTabTitle?: boolean;
     showSaveHeaderAction?: boolean;
+    saveHeaderActionConfig?: Pick<PageHeaderJsActionProps, 'label' | 'icon'>;
+    setValidationError: () => void;
   }
 > = ({
   titleProperty,
@@ -31,8 +34,14 @@ export const FormStationHeader: React.FC<
   className,
   setTabTitle,
   showSaveHeaderAction,
+  saveHeaderActionConfig = {
+    label: 'Save',
+    icon: IconName.Save,
+  },
+  setValidationError,
 }) => {
-  const { dirty, submitForm, resetForm } = useFormikContext<FormikValues>();
+  const { dirty, submitForm, resetForm, isValid } =
+    useFormikContext<FormikValues>();
   const quickEditContext = useContext(QuickEditContext);
   const bulkEditContext = useContext(BulkEditContext);
 
@@ -56,14 +65,18 @@ export const FormStationHeader: React.FC<
 
       if (showSaveHeaderAction) {
         actionItems.push({
-          label: 'Save',
-          icon: IconName.Save,
+          label: saveHeaderActionConfig.label,
+          icon: saveHeaderActionConfig.icon,
           kind: 'action',
           actionType: PageHeaderActionType.Context,
           onClick: async () => {
             if (quickEditContext?.isQuickEditMode) {
               quickEditContext.refresh();
             } else if (bulkEditContext?.isBulkEditMode) {
+              if (!isValid) {
+                setValidationError();
+                return;
+              }
               await submitForm();
               history.replace(history.location.pathname);
             } else {
@@ -114,8 +127,12 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl,
     dirty,
     history,
+    isValid,
     quickEditContext,
     resetForm,
+    saveHeaderActionConfig.icon,
+    saveHeaderActionConfig.label,
+    setValidationError,
     showSaveHeaderAction,
     submitForm,
   ]);

package/src/components/FormStation/helpers/useDataProvider.ts

@@ -20,6 +20,7 @@ import {
 export type FormStationDataProvider = <TValues extends Data, TSubmitResponse>(
   initialData: InitialFormData<TValues>,
   saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  saveNotificationMessage?: string,
 ) => {
   onSubmit: (
     values: TValues,
@@ -38,6 +39,7 @@ export const useDataProvider: FormStationDataProvider = <
 >(
   initialData: InitialFormData<TValues>,
   saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  saveNotificationMessage?: string,
 ) => {
   const [stationError, setStationError] = useState<StationErrorStateType>();
   const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
@@ -92,7 +94,9 @@ export const useDataProvider: FormStationDataProvider = <
           }
 
           showNotification({
-            title: 'Your changes were saved successfully.',
+            title:
+              saveNotificationMessage ??
+              'Your changes were saved successfully.',
             options: {
               type: 'success',
               autoClose: 1500,
@@ -115,7 +119,7 @@ export const useDataProvider: FormStationDataProvider = <
         setIsFormSubmitting(false);
       }
     },
-    [isFormSubmitting, initialData, saveData, setStationError],
+    [isFormSubmitting, initialData, saveData, saveNotificationMessage],
   );
 
   return {

package/src/components/Icons/Icons.models.ts

@@ -56,4 +56,5 @@ export enum IconName {
   Video,
   Warning,
   X,
+  Axi,
 }

package/src/components/Icons/Icons.tsx

@@ -10,6 +10,22 @@ export interface IconsProps {
   className?: string;
 }
 
+const AxiIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M24.3,36h-8.5c-5,0-9.1-4.1-9.1-9.1v-5.3c0-5,4.1-9.1,9.1-9.1h8.5c5,0,9.1,4.1,9.1,9.1v5.3c0,5-4.1,9.1-9.1,9.1ZM6.8,20.4h-.9c-1.3,0-2.3,1.1-2.3,2.3v3c0,1.3,1.1,2.3,2.3,2.3h.9M33.3,28.2h.9c1.3,0,2.3-1.1,2.3-2.3v-3c0-1.3-1.1-2.3-2.3-2.3h-.9M14.1,20.4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM19.7,4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM25.9,20.4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM19.7,9v3.5M16.1,30.2h7.8"
+    />
+  </svg>
+);
+
 const ArchiveIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -924,6 +940,7 @@ const XIcon: React.FC<{ className?: string }> = ({ className }) => (
  */
 export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
   const icons: { [key in IconName]: JSX.Element } = {
+    [IconName.Axi]: <AxiIcon className={className} />,
     [IconName.Archive]: <ArchiveIcon className={className} />,
     [IconName.Audio]: <AudioIcon className={className} />,
     [IconName.DescriptiveAudio]: <DescriptiveAudioIcon className={className} />,

package/src/components/PageHeader/PageHeader.stories.tsx

@@ -25,6 +25,13 @@ const headerActions: PageHeaderActionItemProps[] = [
 ];
 
 const bulkHeaderActions: PageHeaderActionProps[] = [
+  {
+    label: 'Bulk Edit',
+    actionType: PageHeaderActionType.Context,
+    icon: IconName.BulkEdit,
+    tag: 'BETA',
+    onClick: action('onActionSelected'),
+  },
   {
     label: 'Bulk Delete',
     actionType: PageHeaderActionType.Context,
@@ -67,6 +74,7 @@ const bulkHeaderActions: PageHeaderActionProps[] = [
     label: 'Bulk Action 4',
     confirmationMode: 'Simple',
     onClick: action('onActionSelected'),
+    tag: 'BETA',
   },
 ];
 

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.model.ts

@@ -48,4 +48,6 @@ interface BaseActionOptions {
   disabled?: boolean;
   /** Optional class */
   className?: string;
+  /** Optional tag to display in the action */
+  tag?: string;
 }

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.scss

@@ -163,4 +163,32 @@
 
     color: var(--actions-disabled-fg-color, $actions-disabled-fg-color);
   }
+
+  .tag {
+    position: absolute;
+    transform: rotate(45deg) translateX(53px) translateY(-40px);
+    transform-origin: center;
+    top: 0;
+    left: 0;
+    display: grid;
+    background-color: var(
+      --page-header-action-tag-background-color,
+      $page-header-action-tag-background-color
+    );
+    font-size: var(
+      --page-header-action-tag-font-size,
+      $page-header-action-tag-font-size
+    );
+    font-weight: bold;
+    width: 75px;
+    height: 14px;
+    align-items: center;
+    text-align: center;
+    z-index: 0;
+  }
+
+  &:has(.tag) {
+    position: relative;
+    overflow: hidden;
+  }
 }

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.spec.tsx

@@ -645,16 +645,6 @@ describe('PageHeaderAction', () => {
       const link = wrapper.find('Link');
       expect(link.prop('target')).toBeUndefined();
     });
-
-    it('renders with disabled class if disabled prop is true', () => {
-      const wrapper = mount(
-        <Router>
-          <PageHeaderAction {...defaultProps} path="/test" disabled />
-        </Router>,
-      );
-      const container = wrapper.find('.container').hostNodes();
-      expect(container.hasClass('disabled')).toBe(true);
-    });
   });
 });
 

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -69,6 +69,7 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
   disabled,
   className,
   onClick = noop,
+  tag,
 }) => {
   const [confirmation, setConfirmation] = useState<boolean>(false);
   const [referenceElement, setReferenceElement] = useState<HTMLElement>();
@@ -156,10 +157,10 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
             <span data-test-id="label">{label}</span>
           )}
         </div>
+        {tag && <div className={classes.tag}>{tag}</div>}
       </button>
       {confirmation && confirmationMode === 'Advanced' && (
         <ConfirmDialog
-          className={classes.confirmDialog}
           referenceElement={referenceElement}
           title={title}
           cancelButtonText={cancelButtonText}
@@ -185,12 +186,12 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
  */
 const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
   className,
-  disabled,
   icon,
   imgAlt,
   label,
   openInNewTab = false,
   path,
+  tag,
 }) => {
   const headerIcon = icon ? icon : openInNewTab ? IconName.External : undefined;
 
@@ -199,7 +200,6 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
       className={clsx(
         classes.container,
         'page-header-action-container',
-        { [classes.disabled]: disabled },
         className,
       )}
       data-test-id="action"
@@ -216,6 +216,7 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
       <div className={classes.label}>
         <span data-test-id="label">{label}</span>
       </div>
+      {tag && <div className={classes.tag}>{tag}</div>}
     </Link>
   );
 };