update all usages of StudioProperty.Button to have icon vertially ali…

…gned with label and value
Altinn · Jan 16, 2025 · fc575ba · fc575ba
1 parent 957851e
commit fc575ba
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 35 deletions.
diff --git a/...onents/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css b/...onents/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
@@ -58,3 +58,7 @@
 .propertyButton.withoutNegativeMargin {
   margin: 0;
 }
+
+.definedValue {
+  color: var(--fds-semantic-text-neutral-default);
+}
diff --git a/...io-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx b/...io-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
@@ -38,6 +38,7 @@ const StudioPropertyButton = forwardRef<HTMLButtonElement, StudioPropertyButtonP
       compact && classes.compact,
       readOnly && classes.readOnly,
       withoutNegativeMargin && classes.withoutNegativeMargin,
+      givenIcon && hasValue && classes.definedValue,
       givenClass,
     );
 

diff --git a/...kages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/EditActions.tsx b/...kages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/EditActions.tsx
@@ -61,7 +61,6 @@ export const EditActions = (): React.ReactElement => {
       <StudioProperty.Button
         onClick={onNewActionAddClicked}
         property={t('process_editor.configuration_panel_actions_add_new')}
-        size='small'
       />
     </>
   );

diff --git a/...ss-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.module.css b/...ss-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.module.css
diff --git a/...s/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.tsx b/...s/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.tsx
@@ -3,7 +3,6 @@ import { StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { LinkIcon } from '@studio/icons';
 import { SelectDataTypes } from './SelectDataTypes';
-import classes from './EditDataTypes.module.css';
 import { useBpmnContext } from '../../../../contexts/BpmnContext';
 
 export type EditDataTypesProps = {
@@ -27,19 +26,12 @@ export const EditDataTypes = ({
     setDataModelSelectVisible(false);
   }, [bpmnDetails.id]);
 
-  const definedValueWithLinkIcon = (
-    <span className={classes.definedValue}>
-      <LinkIcon /> {existingDataTypeForTask}
-    </span>
-  );
-
   return (
     <>
       {!existingDataTypeForTask && !dataModelSelectVisible ? (
         <StudioProperty.Button
           onClick={() => setDataModelSelectVisible(true)}
           property={t('process_editor.configuration_panel_set_data_model_link')}
-          size='small'
           icon={<LinkIcon />}
         />
       ) : dataModelSelectVisible ? (
@@ -55,9 +47,10 @@ export const EditDataTypes = ({
           aria-label={t('process_editor.configuration_panel_set_data_model', {
             dataModelName: existingDataTypeForTask,
           })}
+          icon={<LinkIcon />}
           onClick={() => setDataModelSelectVisible(true)}
           property={t('process_editor.configuration_panel_set_data_model_label')}
-          value={definedValueWithLinkIcon}
+          value={existingDataTypeForTask}
         />
       )}
     </>

diff --git a/...ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx b/...ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx
@@ -51,7 +51,6 @@ export const EditUniqueFromSignaturesInDataTypes = () => {
           property={t(
             'process_editor.configuration_panel_set_unique_from_signatures_in_data_types_link',
           )}
-          size='small'
           icon={<PersonPencilIcon />}
         />
       ) : isSelectVisible ? (

diff --git a/...r/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.tsx b/...r/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.tsx
@@ -27,7 +27,6 @@ export const CustomReceiptContent = (): React.ReactElement => {
     return (
       <StudioProperty.Button
         onClick={openCustomReceiptFields}
-        size='small'
         property={t('process_editor.configuration_panel_custom_receipt_create_your_own_button')}
         className={classes.createButton}
       />

diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.module.css b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.module.css
@@ -4,7 +4,6 @@
 
 .button {
   margin: var(--fds-spacing-1);
-  align-items: center;
   padding-left: 0;
 }
 

diff --git a/...components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css b/...components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css
@@ -1,7 +1,3 @@
 .error {
   background-color: var(--fds-semantic-surface-danger-subtle);
 }
-
-.linkIcon {
-  color: var(--fds-semantic-text-neutral-default);
-}
diff --git a/...c/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.test.tsx b/...c/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.test.tsx
@@ -6,14 +6,16 @@ import { screen, waitForElementToBeRemoved, within } from '@testing-library/reac
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import type { QueryClient } from '@tanstack/react-query';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
+import { QueryKey } from 'app-shared/types/QueryKey';
+import { app, org } from '@studio/testing/testids';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 
 const label = 'label';
 const dataModelField = 'field';
 const dataModel = 'model';
 const bindingKey = 'bindingKey';
 
-const defaultDefinedBinding: DefinedBindingProps = {
+const defaultDefinedBindingProps: DefinedBindingProps = {
   label,
   onClick: jest.fn(),
   internalBindingFormat: {
@@ -25,19 +27,15 @@ const defaultDefinedBinding: DefinedBindingProps = {
 };
 
 type RenderDefinedBinding = {
-  props?: DefinedBindingProps;
+  props?: Partial<DefinedBindingProps>;
   queryClient?: QueryClient;
   queries?: Partial<ServicesContextProps>;
 };
 
-const renderDefinedBinding = ({
-  props = defaultDefinedBinding,
-  queryClient = createQueryClientMock(),
-  queries,
-}: RenderDefinedBinding) => {
+const renderDefinedBinding = ({ props, queryClient, queries }: RenderDefinedBinding = {}) => {
   return {
-    ...renderWithProviders(<DefinedBinding {...props} />, {
-      queries: { ...queries },
+    ...renderWithProviders(<DefinedBinding {...defaultDefinedBindingProps} {...props} />, {
+      queries,
       queryClient,
     }),
   };
@@ -49,7 +47,7 @@ describe('DefinedBinding', () => {
   });
 
   it('should render loading spinner', async () => {
-    renderDefinedBinding({});
+    renderDefinedBinding();
     const loadingSpinnerTitle = textMock('ux_editor.modal_properties_loading');
 
     const loadingSpinner = screen.getByTitle(loadingSpinnerTitle);
@@ -59,7 +57,7 @@ describe('DefinedBinding', () => {
   });
 
   it('should render edit button with the binding selected', async () => {
-    renderDefinedBinding({});
+    renderDefinedBinding();
 
     await waitForElementToBeRemoved(() =>
       screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
@@ -77,7 +75,6 @@ describe('DefinedBinding', () => {
   it('should render edit button with the binding selected even with no data model selected', async () => {
     renderDefinedBinding({
       props: {
-        ...defaultDefinedBinding,
         internalBindingFormat: {
           field: dataModelField,
           dataType: '',
@@ -97,4 +94,48 @@ describe('DefinedBinding', () => {
     const editButtonText = within(editButton).getByText(dataModelField);
     expect(editButtonText).toBeInTheDocument();
   });
+
+  it('should render with error css class when selected data model does not exist', async () => {
+    renderWithDataModelAndMetadata('non-existent-model', dataModelField);
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
+    );
+    const editButton = screen.getByRole('button', {
+      name: textMock('right_menu.data_model_bindings_edit', { binding: label }),
+    });
+    expect(editButton).toHaveClass('error');
+  });
+
+  it('should render with error css class when selected data model field does not exist in model', async () => {
+    renderWithDataModelAndMetadata(dataModel, 'non-existent-field');
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
+    );
+    const editButton = screen.getByRole('button', {
+      name: textMock('right_menu.data_model_bindings_edit', { binding: label }),
+    });
+    expect(editButton).toHaveClass('error');
+  });
+
+  it('should render without error css class when selected data model and field is valid', async () => {
+    renderWithDataModelAndMetadata(dataModel, dataModelField);
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
+    );
+    const editButton = screen.getByRole('button', {
+      name: textMock('right_menu.data_model_bindings_edit', { binding: label }),
+    });
+    expect(editButton).not.toHaveClass('error');
+  });
 });
+
+const renderWithDataModelAndMetadata = (modelName: string, fieldName: string) => {
+  const queryClient = createQueryClientMock();
+  queryClient.setQueryData([QueryKey.AppMetadataModelIds, org, app, false], [modelName]);
+  const getDataModelMetadata = jest
+    .fn()
+    .mockImplementation(() =>
+      Promise.resolve({ elements: { [fieldName]: { dataBindingName: fieldName, maxOccurs: 0 } } }),
+    );
+  renderDefinedBinding({ queries: { getDataModelMetadata }, queryClient });
+};
diff --git a/...or/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx b/...or/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx
@@ -52,7 +52,7 @@ export const DefinedBinding = ({
       onClick={onClick}
       property={label}
       title={title}
-      icon={<LinkIcon className={classes.linkIcon} />}
+      icon={<LinkIcon />}
       value={currentDataModelField}
     />
   );