Skip to content

Commit 8dd2f6e

Browse files
jjoyce0510John JoyceJohn JoyceJohn JoyceJohn Joyce
authored
refactor(ui): Migrate to use the new Button component consistently (#12597)
Co-authored-by: John Joyce <[email protected]> Co-authored-by: John Joyce <[email protected]> Co-authored-by: John Joyce <[email protected]> Co-authored-by: John Joyce <[email protected]> Co-authored-by: John Joyce <[email protected]> Co-authored-by: John Joyce <[email protected]>
1 parent 46cf0dc commit 8dd2f6e

File tree

72 files changed

+579
-683
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+579
-683
lines changed

‎datahub-web-react/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"ec2-dev": "yarn run generate && CI=true vite",
107107
"build": "yarn run generate && CI=false NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' vite build",
108108
"buildWithSourceMap": "yarn run generate && CI=false NODE_OPTIONS='--max-old-space-size=8192 --openssl-legacy-provider' vite build --sourcemap",
109-
"test": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' vitest",
109+
"test": "NODE_OPTIONS='--max-old-space-size=5120' vitest",
110110
"test-coverage": "yarn test run --coverage",
111111
"generate": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' graphql-codegen --config codegen.yml",
112112
"lint": "eslint . --ext .ts,.tsx --quiet && yarn format-check && yarn type-check",

‎datahub-web-react/src/alchemy-components/components/SelectItemsPopover/SelectItems.tsx

+6-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ReactNode } from 'react';
2-
import { Button, Checkbox, Empty, Typography } from 'antd';
2+
import { Checkbox, Empty, Typography } from 'antd';
33
import styled from 'styled-components';
44
import { LoadingOutlined } from '@ant-design/icons';
55
import { Entity, EntityType } from '@src/types.generated';
@@ -9,6 +9,7 @@ import { InlineListSearch } from '@src/app/entityV2/shared/components/search/Inl
99
import { useEntityRegistry } from '@src/app/useEntityRegistry';
1010
import { useEntityOperations } from './hooks'; // Import your custom hook
1111
import { SelectItemCheckboxGroup } from './SelectItemCheckboxGroup';
12+
import { Button } from '../Button';
1213

1314
export interface SelectItemsProps {
1415
entities: Entity[];
@@ -56,18 +57,9 @@ const StyledGroupSection = styled.div`
5657
}
5758
`;
5859

59-
const StyledResetButton = styled(Button)`
60-
background-color: ${REDESIGN_COLORS.ICON_ON_DARK};
61-
border: 1px solid ${REDESIGN_COLORS.GREY_300};
62-
color: ${REDESIGN_COLORS.GREY_300};
63-
border-radius: 4px;
64-
`;
65-
6660
const StyledUpdateButton = styled(Button)`
67-
background-color: ${REDESIGN_COLORS.TITLE_PURPLE};
68-
border: 1px solid ${REDESIGN_COLORS.TITLE_PURPLE};
69-
color: ${REDESIGN_COLORS.WHITE};
70-
border-radius: 4px;
61+
display: flex;
62+
justify-content: center;
7163
`;
7264

7365
const StyledCheckBoxContainer = styled.div`
@@ -201,9 +193,9 @@ export const SelectItems: React.FC<SelectItemsProps> = ({
201193
)}
202194
<StyledFooter>
203195
{hasExistingEntities && (
204-
<StyledResetButton onClick={() => handleUpdate({ isRemoveAll: true })}>
196+
<Button variant="outline" color="gray" onClick={() => handleUpdate({ isRemoveAll: true })}>
205197
Remove All
206-
</StyledResetButton>
198+
</Button>
207199
)}
208200
<StyledUpdateButton
209201
style={{ width: !hasExistingEntities ? '100%' : '' }}

‎datahub-web-react/src/app/domainV2/CreateDomainModal.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React, { useState } from 'react';
22
import styled from 'styled-components';
3-
import { message, Button, Input, Modal, Typography, Form, Collapse, Tag } from 'antd';
3+
import { message, Input, Modal, Typography, Form, Collapse, Tag } from 'antd';
4+
import { Button } from '@src/alchemy-components';
45
import { useCreateDomainMutation } from '../../graphql/domain.generated';
56
import { useEnterKeyListener } from '../shared/useEnterKeyListener';
67
import { validateCustomUrnId } from '../shared/textUtil';
78
import analytics, { EventType } from '../analytics';
89
import DomainParentSelect from '../entityV2/shared/EntityDropdown/DomainParentSelect';
910
import { useIsNestedDomainsEnabled } from '../useAppConfig';
1011
import { useDomainsContext as useDomainsContextV2 } from './DomainsContext';
12+
import { ModalButtonContainer } from '../shared/button/styledComponents';
1113

1214
const SuggestedNamesGroup = styled.div`
1315
margin-top: 8px;
@@ -118,20 +120,20 @@ export default function CreateDomainModal({ onClose, onCreate }: Props) {
118120
visible
119121
onCancel={onClose}
120122
footer={
121-
<>
122-
<Button onClick={onClose} type="text">
123+
<ModalButtonContainer>
124+
<Button color="gray" onClick={onClose} variant="text">
123125
Cancel
124126
</Button>
125127
<Button
126-
type="primary"
127128
id="createDomainButton"
128129
data-testid="create-domain-button"
129130
onClick={onCreateDomain}
130131
disabled={!createButtonEnabled}
132+
type="submit"
131133
>
132134
Create
133135
</Button>
134-
</>
136+
</ModalButtonContainer>
135137
}
136138
>
137139
<Form

‎datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { PlusOutlined } from '@ant-design/icons';
2-
import { Button, Typography } from 'antd';
2+
import { Typography } from 'antd';
33
import React, { useState } from 'react';
44
import styled from 'styled-components/macro';
5+
import { Button } from '@src/alchemy-components';
56
import { TermRelationshipType } from '../../../../types.generated';
67
import { Message } from '../../../shared/Message';
78
import { EmptyTab } from '../../shared/components/styled/EmptyTab';
@@ -63,7 +64,7 @@ export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, gl
6364
{glossaryRelatedTermType}
6465
</Typography.Title>
6566
{canEditRelatedTerms && (
66-
<Button type="text" onClick={() => setIsShowingAddModal(true)}>
67+
<Button variant="text" onClick={() => setIsShowingAddModal(true)}>
6768
<PlusOutlined /> Add Terms
6869
</Button>
6970
)}

‎datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectModal.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Button, Modal } from 'antd';
1+
import { Modal } from 'antd';
22
import React, { useState } from 'react';
33
import styled from 'styled-components';
4+
import { Button } from '@src/alchemy-components';
5+
import { ModalButtonContainer } from '@src/app/shared/button/styledComponents';
46
import { EntityType } from '../../../../../../types.generated';
57
import ClickOutside from '../../../../../shared/ClickOutside';
68
import { EntityAndType } from '../../../types';
@@ -71,18 +73,19 @@ export const SearchSelectModal = ({
7173
open
7274
onCancel={onCancelSelect}
7375
footer={
74-
<>
75-
<Button onClick={onCancel} type="text">
76+
<ModalButtonContainer>
77+
<Button onClick={onCancel} variant="text" color="gray">
7678
Cancel
7779
</Button>
7880
<Button
7981
id="continueButton"
82+
data-testid="search-select-continue-button"
8083
onClick={() => onContinue(selectedEntities.map((entity) => entity.urn))}
8184
disabled={selectedEntities.length === 0}
8285
>
8386
{continueText || 'Done'}
8487
</Button>
85-
</>
88+
</ModalButtonContainer>
8689
}
8790
>
8891
<SearchSelect

‎datahub-web-react/src/app/entity/shared/tabs/Properties/Edit/EditStructuredPropertyModal.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import analytics, { EventType } from '@src/app/analytics';
2-
import { Button, Modal, message } from 'antd';
2+
import { Modal, message } from 'antd';
33
import React, { useEffect, useMemo } from 'react';
44
import styled from 'styled-components';
5+
import { Button } from '@src/alchemy-components';
6+
import { ModalButtonContainer } from '@src/app/shared/button/styledComponents';
57
import { useUpsertStructuredPropertiesMutation } from '../../../../../../graphql/structuredProperties.generated';
68
import { EntityType, PropertyValueInput, StructuredPropertyEntity } from '../../../../../../types.generated';
79
import handleGraphQLError from '../../../../../shared/handleGraphQLError';
@@ -104,19 +106,18 @@ export default function EditStructuredPropertyModal({
104106
open={isOpen}
105107
width={650}
106108
footer={
107-
<>
108-
<Button onClick={closeModal} type="text">
109+
<ModalButtonContainer>
110+
<Button variant="text" onClick={closeModal} color="gray">
109111
Cancel
110112
</Button>
111113
<Button
112-
type="primary"
113114
onClick={upsertProperties}
114115
disabled={!selectedValues.length}
115116
data-testid="add-update-structured-prop-on-entity-button"
116117
>
117118
{isAddMode ? 'Add' : 'Update'}
118119
</Button>
119-
</>
120+
</ModalButtonContainer>
120121
}
121122
destroyOnClose
122123
>

‎datahub-web-react/src/app/entity/view/builder/ViewBuilderModal.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useEffect, useState } from 'react';
22
import styled from 'styled-components';
3-
import { Button, Modal, Typography } from 'antd';
3+
import { Modal, Typography } from 'antd';
4+
import { Button } from '@src/alchemy-components';
45
import { DEFAULT_BUILDER_STATE, ViewBuilderState } from '../types';
56
import { ViewBuilderForm } from './ViewBuilderForm';
67
import ClickOutside from '../../../shared/ClickOutside';
@@ -20,6 +21,7 @@ const SaveButtonContainer = styled.div`
2021
width: 100%;
2122
display: flex;
2223
justify-content: right;
24+
gap: 8px;
2325
`;
2426

2527
const CancelButton = styled(Button)`
@@ -85,13 +87,12 @@ export const ViewBuilderModal = ({ mode, urn, initialState, onSubmit, onCancel }
8587
>
8688
<ViewBuilderForm urn={urn} mode={mode} state={viewBuilderState} updateState={setViewBuilderState} />
8789
<SaveButtonContainer>
88-
<CancelButton data-testid="view-builder-cancel" onClick={onCancel}>
90+
<CancelButton variant="text" color="gray" data-testid="view-builder-cancel" onClick={onCancel}>
8991
Cancel
9092
</CancelButton>
9193
{mode === ViewBuilderMode.EDITOR && (
9294
<Button
9395
data-testid="view-builder-save"
94-
type="primary"
9596
disabled={!canSave}
9697
onClick={() => onSubmit(viewBuilderState)}
9798
>

‎datahub-web-react/src/app/entityV2/dataset/profile/schema/components/SchemaFilterSelectContent.tsx

+17-21
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
2-
import { Button, Checkbox } from 'antd';
2+
import { Checkbox } from 'antd';
33
import styled from 'styled-components';
4-
4+
import { Button } from '@src/alchemy-components';
55
import { SchemaFilterType } from '../../../../shared/tabs/Dataset/Schema/utils/filterSchemaRows';
66
import { ANTD_GRAY } from '../../../../shared/constants';
77

@@ -11,15 +11,6 @@ type Props = {
1111
close: () => void;
1212
};
1313

14-
const UpdateButton = styled(Button)`
15-
width: 100%;
16-
text-align: center;
17-
background-color: ${(props) => props.theme.styles['primary-color']};
18-
color: white;
19-
border-radius: 0;
20-
margin-top: 10px;
21-
`;
22-
2314
const StyledCheckbox = styled(Checkbox)`
2415
font-size: 14px;
2516
line-height: 22px;
@@ -33,6 +24,13 @@ const StyledCheckbox = styled(Checkbox)`
3324
width: 232px;
3425
`;
3526

27+
const StyledButton = styled(Button)`
28+
width: 100%;
29+
margin-top: 12px;
30+
display: flex;
31+
justify-content: center;
32+
`;
33+
3634
export default function SchemaFilterSelectContent({ schemaFilterTypes, setSchemaFilterTypes, close }: Props) {
3735
const [stagedSchemaFilterTypes, setStagedSchemaFilterTypes] = useState<SchemaFilterType[]>(schemaFilterTypes);
3836

@@ -56,16 +54,14 @@ export default function SchemaFilterSelectContent({ schemaFilterTypes, setSchema
5654
<StyledCheckbox value={SchemaFilterType.Terms}>Glossary Terms</StyledCheckbox>
5755
</span>
5856
</Checkbox.Group>
59-
<div>
60-
<UpdateButton
61-
onClick={() => {
62-
setSchemaFilterTypes(stagedSchemaFilterTypes);
63-
close();
64-
}}
65-
>
66-
Update
67-
</UpdateButton>
68-
</div>
57+
<StyledButton
58+
onClick={() => {
59+
setSchemaFilterTypes(stagedSchemaFilterTypes);
60+
close();
61+
}}
62+
>
63+
Apply
64+
</StyledButton>
6965
</div>
7066
);
7167
}

‎datahub-web-react/src/app/entityV2/domain/summary/DocumentationSection.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { EditOutlined, ExpandAltOutlined, FileOutlined } from '@ant-design/icons';
2-
import { Button, Divider, Typography } from 'antd';
2+
import { Divider, Typography } from 'antd';
33
import React from 'react';
44
import styled from 'styled-components';
5+
import { Button } from '@src/alchemy-components';
56
import { useEntityData, useRefetch, useRouteToTab } from '../../../entity/shared/EntityContext';
67
import { AddLinkModal } from '../../shared/components/styled/AddLinkModal';
78
import { EmptyTab } from '../../shared/components/styled/EmptyTab';
@@ -66,7 +67,7 @@ export const DocumentationSection = () => {
6667
</Title>
6768
{hasDescription && (
6869
<Button
69-
type="text"
70+
variant="text"
7071
onClick={() =>
7172
routeToTab({
7273
tabName: 'Documentation',
@@ -82,13 +83,13 @@ export const DocumentationSection = () => {
8283
<Documentation>
8384
{(hasDescription && <Editor content={description} readOnly />) || (
8485
<EmptyTab tab="documentation">
86+
<AddLinkModal refetch={refetch} />
8587
<Button
8688
data-testid="add-documentation"
8789
onClick={() => routeToTab({ tabName: 'Documentation', tabParams: { editing: true } })}
8890
>
8991
<EditOutlined /> Add Documentation
9092
</Button>
91-
<AddLinkModal refetch={refetch} />
9293
</EmptyTab>
9394
)}
9495
<LinkList refetch={refetch} />

‎datahub-web-react/src/app/entityV2/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx

+4-18
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Button, Typography } from 'antd';
1+
import { Typography } from 'antd';
22
import React, { useState } from 'react';
3+
import { Button } from '@src/alchemy-components';
34
import styled from 'styled-components/macro';
45
import { TermRelationshipType } from '../../../../types.generated';
56
import { Message } from '../../../shared/Message';
@@ -8,7 +9,6 @@ import AddRelatedTermsModal from './AddRelatedTermsModal';
89
import RelatedTerm from './RelatedTerm';
910
import { CustomIcon } from '../../../sharedV2/icons/customIcons/CustomIcon';
1011
import addTerm from '../../../sharedV2/icons/customIcons/add-term.svg';
11-
import { REDESIGN_COLORS } from '../../shared/constants';
1212

1313
export enum RelatedTermTypes {
1414
hasRelatedTerms = 'Contains',
@@ -45,20 +45,6 @@ const TitleContainer = styled.div`
4545

4646
const messageStyle = { marginTop: '10%' };
4747

48-
const ButtonStyle = styled(Button)`
49-
border: 1px solid ${REDESIGN_COLORS.TITLE_PURPLE};
50-
color: ${REDESIGN_COLORS.TITLE_PURPLE};
51-
border-radius: 8px;
52-
display: flex;
53-
gap: 0.2rem;
54-
55-
&:hover,
56-
&:focus {
57-
border: 1px solid ${REDESIGN_COLORS.TITLE_PURPLE};
58-
color: ${REDESIGN_COLORS.TITLE_PURPLE};
59-
}
60-
`;
61-
6248
export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, glossaryRelatedTermResult }: Props) {
6349
const [isShowingAddModal, setIsShowingAddModal] = useState(false);
6450
const glossaryRelatedTermUrns: Array<string> = [];
@@ -86,9 +72,9 @@ export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, gl
8672
{glossaryRelatedTermType}
8773
</Typography.Title>
8874
{canEditRelatedTerms && (
89-
<ButtonStyle type="text" onClick={() => setIsShowingAddModal(true)}>
75+
<Button variant="text" onClick={() => setIsShowingAddModal(true)}>
9076
<CustomIcon iconSvg={addTerm} /> Add Terms
91-
</ButtonStyle>
77+
</Button>
9278
)}
9379
</TitleContainer>
9480
<ListContainer>

0 commit comments

Comments
 (0)