fix(ui) Make checkboxes in ingestion forms easier to see (datahub-pro…

…ject#7061)
ericyomi · Jan 18, 2023 · 1d803fd · 1d803fd
1 parent c77cc5f
commit 1d803fd
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 21 deletions.
diff --git a/datahub-web-react/src/app/ingest/source/builder/RecipeForm/FormField.tsx b/datahub-web-react/src/app/ingest/source/builder/RecipeForm/FormField.tsx
@@ -19,6 +19,17 @@ const StyledRemoveIcon = styled(MinusCircleOutlined)`
     margin-left: 10px;
 `;
 
+const StyledCheckbox = styled(Checkbox)`
+    .ant-checkbox-inner {
+        border-color: ${ANTD_GRAY[7]};
+    }
+    .ant-checkbox-checked {
+        .ant-checkbox-inner {
+            border-color: ${(props) => props.theme.styles['primary-color']};
+        }
+    }
+`;
+
 interface CommonFieldProps {
     field: RecipeField;
     removeMargin?: boolean;
@@ -121,7 +132,7 @@ function FormField(props: Props) {
 
     const isBoolean = field.type === FieldType.BOOLEAN;
     let input = <Input placeholder={field.placeholder} />;
-    if (isBoolean) input = <Checkbox />;
+    if (isBoolean) input = <StyledCheckbox />;
     if (field.type === FieldType.TEXTAREA)
         input = <Input.TextArea required={field.required} placeholder={field.placeholder} />;
     const valuePropName = isBoolean ? 'checked' : 'value';

diff --git a/datahub-web-react/src/app/ingest/source/builder/__tests__/DefineRecipeStep.test.tsx b/datahub-web-react/src/app/ingest/source/builder/__tests__/DefineRecipeStep.test.tsx
@@ -1,22 +1,26 @@
 import { MockedProvider } from '@apollo/client/testing';
 import { render } from '@testing-library/react';
 import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import defaultThemeConfig from '../../../../../conf/theme/theme_light.config.json';
 import { DefineRecipeStep } from '../DefineRecipeStep';
 import { SourceConfig } from '../types';
 
 describe('DefineRecipeStep', () => {
     it('should render the RecipeBuilder if the type is in CONNECTORS_WITH_FORM', () => {
         const { getByText, queryByText } = render(
-            <MockedProvider>
-                <DefineRecipeStep
-                    state={{ type: 'snowflake' }}
-                    updateState={() => {}}
-                    goTo={() => {}}
-                    submit={() => {}}
-                    cancel={() => {}}
-                    ingestionSources={[{ name: 'snowflake', displayName: 'Snowflake' } as SourceConfig]}
-                />
-            </MockedProvider>,
+            <ThemeProvider theme={defaultThemeConfig}>
+                <MockedProvider>
+                    <DefineRecipeStep
+                        state={{ type: 'snowflake' }}
+                        updateState={() => {}}
+                        goTo={() => {}}
+                        submit={() => {}}
+                        cancel={() => {}}
+                        ingestionSources={[{ name: 'snowflake', displayName: 'Snowflake' } as SourceConfig]}
+                    />
+                </MockedProvider>
+            </ThemeProvider>,
         );
 
         expect(getByText('Connection')).toBeInTheDocument();
@@ -25,16 +29,18 @@ describe('DefineRecipeStep', () => {
 
     it('should not render the RecipeBuilder if the type is not in CONNECTORS_WITH_FORM', () => {
         const { getByText, queryByText } = render(
-            <MockedProvider>
-                <DefineRecipeStep
-                    state={{ type: 'glue' }}
-                    updateState={() => {}}
-                    goTo={() => {}}
-                    submit={() => {}}
-                    cancel={() => {}}
-                    ingestionSources={[{ name: 'glue', displayName: 'Glue' } as SourceConfig]}
-                />
-            </MockedProvider>,
+            <ThemeProvider theme={defaultThemeConfig}>
+                <MockedProvider>
+                    <DefineRecipeStep
+                        state={{ type: 'glue' }}
+                        updateState={() => {}}
+                        goTo={() => {}}
+                        submit={() => {}}
+                        cancel={() => {}}
+                        ingestionSources={[{ name: 'glue', displayName: 'Glue' } as SourceConfig]}
+                    />
+                </MockedProvider>
+            </ThemeProvider>,
         );
 
         expect(getByText('Configure Glue Recipe')).toBeInTheDocument();