yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-10-10 16:33:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui) Make checkboxes in ingestion forms easier to see (#7061)

Browse Source
This commit is contained in:
Chris Collins 2023-01-18 13:04:25 -05:00 committed by GitHub
parent 35bd73a28b
commit 24be154e9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
datahub-web-react/src/app/ingest/source/builder/RecipeForm/FormField.tsx
View File

@ -19,6 +19,17 @@ const StyledRemoveIcon = styled(MinusCircleOutlined)`
margin-left: 10px; 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 { interface CommonFieldProps {
field: RecipeField; field: RecipeField;
removeMargin?: boolean; removeMargin?: boolean;
@ -121,7 +132,7 @@ function FormField(props: Props) {
const isBoolean = field.type === FieldType.BOOLEAN; const isBoolean = field.type === FieldType.BOOLEAN;
let input = <Input placeholder={field.placeholder} />; let input = <Input placeholder={field.placeholder} />;
if (isBoolean) input = <Checkbox />; if (isBoolean) input = <StyledCheckbox />;
if (field.type === FieldType.TEXTAREA) if (field.type === FieldType.TEXTAREA)
input = <Input.TextArea required={field.required} placeholder={field.placeholder} />; input = <Input.TextArea required={field.required} placeholder={field.placeholder} />;
const valuePropName = isBoolean ? 'checked' : 'value'; const valuePropName = isBoolean ? 'checked' : 'value';

46
datahub-web-react/src/app/ingest/source/builder/__tests__/DefineRecipeStep.test.tsx
View File

@ -1,22 +1,26 @@
import { MockedProvider } from '@apollo/client/testing'; import { MockedProvider } from '@apollo/client/testing';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { ThemeProvider } from 'styled-components';
import defaultThemeConfig from '../../../../../conf/theme/theme_light.config.json';
import { DefineRecipeStep } from '../DefineRecipeStep'; import { DefineRecipeStep } from '../DefineRecipeStep';
import { SourceConfig } from '../types'; import { SourceConfig } from '../types';
describe('DefineRecipeStep', () => { describe('DefineRecipeStep', () => {
it('should render the RecipeBuilder if the type is in CONNECTORS_WITH_FORM', () => { it('should render the RecipeBuilder if the type is in CONNECTORS_WITH_FORM', () => {
const { getByText, queryByText } = render( const { getByText, queryByText } = render(
<MockedProvider> <ThemeProvider theme={defaultThemeConfig}>
<DefineRecipeStep <MockedProvider>
state={{ type: 'snowflake' }} <DefineRecipeStep
updateState={() => {}} state={{ type: 'snowflake' }}
goTo={() => {}} updateState={() => {}}
submit={() => {}} goTo={() => {}}
cancel={() => {}} submit={() => {}}
ingestionSources={[{ name: 'snowflake', displayName: 'Snowflake' } as SourceConfig]} cancel={() => {}}
/> ingestionSources={[{ name: 'snowflake', displayName: 'Snowflake' } as SourceConfig]}
</MockedProvider>, />
</MockedProvider>
</ThemeProvider>,
); );
expect(getByText('Connection')).toBeInTheDocument(); 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', () => { it('should not render the RecipeBuilder if the type is not in CONNECTORS_WITH_FORM', () => {
const { getByText, queryByText } = render( const { getByText, queryByText } = render(
<MockedProvider> <ThemeProvider theme={defaultThemeConfig}>
<DefineRecipeStep <MockedProvider>
state={{ type: 'glue' }} <DefineRecipeStep
updateState={() => {}} state={{ type: 'glue' }}
goTo={() => {}} updateState={() => {}}
submit={() => {}} goTo={() => {}}
cancel={() => {}} submit={() => {}}
ingestionSources={[{ name: 'glue', displayName: 'Glue' } as SourceConfig]} cancel={() => {}}
/> ingestionSources={[{ name: 'glue', displayName: 'Glue' } as SourceConfig]}
</MockedProvider>, />
</MockedProvider>
</ThemeProvider>,
); );
expect(getByText('Configure Glue Recipe')).toBeInTheDocument(); expect(getByText('Configure Glue Recipe')).toBeInTheDocument();