refactor(ui): Migrate to use the new Button component consistently (#…

…12597) Co-authored-by: John Joyce <john@Mac-71.lan> Co-authored-by: John Joyce <john@Mac-2243.lan> Co-authored-by: John Joyce <john@ip-192-168-1-63.us-west-2.compute.internal> Co-authored-by: John Joyce <john@Mac-1022.lan> Co-authored-by: John Joyce <john@Mac-1278.lan> Co-authored-by: John Joyce <john@Mac-1287.lan>
datahub-project · Feb 27, 2025 · 8dd2f6e · 8dd2f6e
1 parent 46cf0dc
commit 8dd2f6e
Show file tree

Hide file tree

Showing 72 changed files with 579 additions and 683 deletions.
diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json
@@ -106,7 +106,7 @@
         "ec2-dev": "yarn run generate && CI=true vite",
         "build": "yarn run generate && CI=false NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' vite build",
         "buildWithSourceMap": "yarn run generate && CI=false NODE_OPTIONS='--max-old-space-size=8192 --openssl-legacy-provider' vite build --sourcemap",
-        "test": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' vitest",
+        "test": "NODE_OPTIONS='--max-old-space-size=5120' vitest",
         "test-coverage": "yarn test run --coverage",
         "generate": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' graphql-codegen --config codegen.yml",
         "lint": "eslint . --ext .ts,.tsx --quiet && yarn format-check && yarn type-check",

diff --git a/datahub-web-react/src/alchemy-components/components/SelectItemsPopover/SelectItems.tsx b/datahub-web-react/src/alchemy-components/components/SelectItemsPopover/SelectItems.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Button, Checkbox, Empty, Typography } from 'antd';
+import { Checkbox, Empty, Typography } from 'antd';
 import styled from 'styled-components';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Entity, EntityType } from '@src/types.generated';
@@ -9,6 +9,7 @@ import { InlineListSearch } from '@src/app/entityV2/shared/components/search/Inl
 import { useEntityRegistry } from '@src/app/useEntityRegistry';
 import { useEntityOperations } from './hooks'; // Import your custom hook
 import { SelectItemCheckboxGroup } from './SelectItemCheckboxGroup';
+import { Button } from '../Button';
 
 export interface SelectItemsProps {
     entities: Entity[];
@@ -56,18 +57,9 @@ const StyledGroupSection = styled.div`
     }
 `;
 
-const StyledResetButton = styled(Button)`
-    background-color: ${REDESIGN_COLORS.ICON_ON_DARK};
-    border: 1px solid ${REDESIGN_COLORS.GREY_300};
-    color: ${REDESIGN_COLORS.GREY_300};
-    border-radius: 4px;
-`;
-
 const StyledUpdateButton = styled(Button)`
-    background-color: ${REDESIGN_COLORS.TITLE_PURPLE};
-    border: 1px solid ${REDESIGN_COLORS.TITLE_PURPLE};
-    color: ${REDESIGN_COLORS.WHITE};
-    border-radius: 4px;
+    display: flex;
+    justify-content: center;
 `;
 
 const StyledCheckBoxContainer = styled.div`
@@ -201,9 +193,9 @@ export const SelectItems: React.FC<SelectItemsProps> = ({
             )}
             <StyledFooter>
                 {hasExistingEntities && (
-                    <StyledResetButton onClick={() => handleUpdate({ isRemoveAll: true })}>
+                    <Button variant="outline" color="gray" onClick={() => handleUpdate({ isRemoveAll: true })}>
                         Remove All
-                    </StyledResetButton>
+                    </Button>
                 )}
                 <StyledUpdateButton
                     style={{ width: !hasExistingEntities ? '100%' : '' }}

diff --git a/datahub-web-react/src/app/domainV2/CreateDomainModal.tsx b/datahub-web-react/src/app/domainV2/CreateDomainModal.tsx
@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { message, Button, Input, Modal, Typography, Form, Collapse, Tag } from 'antd';
+import { message, Input, Modal, Typography, Form, Collapse, Tag } from 'antd';
+import { Button } from '@src/alchemy-components';
 import { useCreateDomainMutation } from '../../graphql/domain.generated';
 import { useEnterKeyListener } from '../shared/useEnterKeyListener';
 import { validateCustomUrnId } from '../shared/textUtil';
 import analytics, { EventType } from '../analytics';
 import DomainParentSelect from '../entityV2/shared/EntityDropdown/DomainParentSelect';
 import { useIsNestedDomainsEnabled } from '../useAppConfig';
 import { useDomainsContext as useDomainsContextV2 } from './DomainsContext';
+import { ModalButtonContainer } from '../shared/button/styledComponents';
 
 const SuggestedNamesGroup = styled.div`
     margin-top: 8px;
@@ -118,20 +120,20 @@ export default function CreateDomainModal({ onClose, onCreate }: Props) {
             visible
             onCancel={onClose}
             footer={
-                <>
-                    <Button onClick={onClose} type="text">
+                <ModalButtonContainer>
+                    <Button color="gray" onClick={onClose} variant="text">
                         Cancel
                     </Button>
                     <Button
-                        type="primary"
                         id="createDomainButton"
                         data-testid="create-domain-button"
                         onClick={onCreateDomain}
                         disabled={!createButtonEnabled}
+                        type="submit"
                     >
                         Create
                     </Button>
-                </>
+                </ModalButtonContainer>
             }
         >
             <Form

diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx b/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx
@@ -1,7 +1,8 @@
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Typography } from 'antd';
+import { Typography } from 'antd';
 import React, { useState } from 'react';
 import styled from 'styled-components/macro';
+import { Button } from '@src/alchemy-components';
 import { TermRelationshipType } from '../../../../types.generated';
 import { Message } from '../../../shared/Message';
 import { EmptyTab } from '../../shared/components/styled/EmptyTab';
@@ -63,7 +64,7 @@ export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, gl
                             {glossaryRelatedTermType}
                         </Typography.Title>
                         {canEditRelatedTerms && (
-                            <Button type="text" onClick={() => setIsShowingAddModal(true)}>
+                            <Button variant="text" onClick={() => setIsShowingAddModal(true)}>
                                 <PlusOutlined /> Add Terms
                             </Button>
                         )}

diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectModal.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectModal.tsx
@@ -1,6 +1,8 @@
-import { Button, Modal } from 'antd';
+import { Modal } from 'antd';
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { Button } from '@src/alchemy-components';
+import { ModalButtonContainer } from '@src/app/shared/button/styledComponents';
 import { EntityType } from '../../../../../../types.generated';
 import ClickOutside from '../../../../../shared/ClickOutside';
 import { EntityAndType } from '../../../types';
@@ -71,18 +73,19 @@ export const SearchSelectModal = ({
                 open
                 onCancel={onCancelSelect}
                 footer={
-                    <>
-                        <Button onClick={onCancel} type="text">
+                    <ModalButtonContainer>
+                        <Button onClick={onCancel} variant="text" color="gray">
                             Cancel
                         </Button>
                         <Button
                             id="continueButton"
+                            data-testid="search-select-continue-button"
                             onClick={() => onContinue(selectedEntities.map((entity) => entity.urn))}
                             disabled={selectedEntities.length === 0}
                         >
                             {continueText || 'Done'}
                         </Button>
-                    </>
+                    </ModalButtonContainer>
                 }
             >
                 <SearchSelect

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Properties/Edit/EditStructuredPropertyModal.tsx b/datahub-web-react/src/app/entity/shared/tabs/Properties/Edit/EditStructuredPropertyModal.tsx
@@ -1,7 +1,9 @@
 import analytics, { EventType } from '@src/app/analytics';
-import { Button, Modal, message } from 'antd';
+import { Modal, message } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
+import { Button } from '@src/alchemy-components';
+import { ModalButtonContainer } from '@src/app/shared/button/styledComponents';
 import { useUpsertStructuredPropertiesMutation } from '../../../../../../graphql/structuredProperties.generated';
 import { EntityType, PropertyValueInput, StructuredPropertyEntity } from '../../../../../../types.generated';
 import handleGraphQLError from '../../../../../shared/handleGraphQLError';
@@ -104,19 +106,18 @@ export default function EditStructuredPropertyModal({
             open={isOpen}
             width={650}
             footer={
-                <>
-                    <Button onClick={closeModal} type="text">
+                <ModalButtonContainer>
+                    <Button variant="text" onClick={closeModal} color="gray">
                         Cancel
                     </Button>
                     <Button
-                        type="primary"
                         onClick={upsertProperties}
                         disabled={!selectedValues.length}
                         data-testid="add-update-structured-prop-on-entity-button"
                     >
                         {isAddMode ? 'Add' : 'Update'}
                     </Button>
-                </>
+                </ModalButtonContainer>
             }
             destroyOnClose
         >

diff --git a/datahub-web-react/src/app/entity/view/builder/ViewBuilderModal.tsx b/datahub-web-react/src/app/entity/view/builder/ViewBuilderModal.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Modal, Typography } from 'antd';
+import { Modal, Typography } from 'antd';
+import { Button } from '@src/alchemy-components';
 import { DEFAULT_BUILDER_STATE, ViewBuilderState } from '../types';
 import { ViewBuilderForm } from './ViewBuilderForm';
 import ClickOutside from '../../../shared/ClickOutside';
@@ -20,6 +21,7 @@ const SaveButtonContainer = styled.div`
     width: 100%;
     display: flex;
     justify-content: right;
+    gap: 8px;
 `;
 
 const CancelButton = styled(Button)`
@@ -85,13 +87,12 @@ export const ViewBuilderModal = ({ mode, urn, initialState, onSubmit, onCancel }
             >
                 <ViewBuilderForm urn={urn} mode={mode} state={viewBuilderState} updateState={setViewBuilderState} />
                 <SaveButtonContainer>
-                    <CancelButton data-testid="view-builder-cancel" onClick={onCancel}>
+                    <CancelButton variant="text" color="gray" data-testid="view-builder-cancel" onClick={onCancel}>
                         Cancel
                     </CancelButton>
                     {mode === ViewBuilderMode.EDITOR && (
                         <Button
                             data-testid="view-builder-save"
-                            type="primary"
                             disabled={!canSave}
                             onClick={() => onSubmit(viewBuilderState)}
                         >

diff --git a/...eb-react/src/app/entityV2/dataset/profile/schema/components/SchemaFilterSelectContent.tsx b/...eb-react/src/app/entityV2/dataset/profile/schema/components/SchemaFilterSelectContent.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Button, Checkbox } from 'antd';
+import { Checkbox } from 'antd';
 import styled from 'styled-components';
-
+import { Button } from '@src/alchemy-components';
 import { SchemaFilterType } from '../../../../shared/tabs/Dataset/Schema/utils/filterSchemaRows';
 import { ANTD_GRAY } from '../../../../shared/constants';
 
@@ -11,15 +11,6 @@ type Props = {
     close: () => void;
 };
 
-const UpdateButton = styled(Button)`
-    width: 100%;
-    text-align: center;
-    background-color: ${(props) => props.theme.styles['primary-color']};
-    color: white;
-    border-radius: 0;
-    margin-top: 10px;
-`;
-
 const StyledCheckbox = styled(Checkbox)`
     font-size: 14px;
     line-height: 22px;
@@ -33,6 +24,13 @@ const StyledCheckbox = styled(Checkbox)`
     width: 232px;
 `;
 
+const StyledButton = styled(Button)`
+    width: 100%;
+    margin-top: 12px;
+    display: flex;
+    justify-content: center;
+`;
+
 export default function SchemaFilterSelectContent({ schemaFilterTypes, setSchemaFilterTypes, close }: Props) {
     const [stagedSchemaFilterTypes, setStagedSchemaFilterTypes] = useState<SchemaFilterType[]>(schemaFilterTypes);
 
@@ -56,16 +54,14 @@ export default function SchemaFilterSelectContent({ schemaFilterTypes, setSchema
                     <StyledCheckbox value={SchemaFilterType.Terms}>Glossary Terms</StyledCheckbox>
                 </span>
             </Checkbox.Group>
-            <div>
-                <UpdateButton
-                    onClick={() => {
-                        setSchemaFilterTypes(stagedSchemaFilterTypes);
-                        close();
-                    }}
-                >
-                    Update
-                </UpdateButton>
-            </div>
+            <StyledButton
+                onClick={() => {
+                    setSchemaFilterTypes(stagedSchemaFilterTypes);
+                    close();
+                }}
+            >
+                Apply
+            </StyledButton>
         </div>
     );
 }
diff --git a/datahub-web-react/src/app/entityV2/domain/summary/DocumentationSection.tsx b/datahub-web-react/src/app/entityV2/domain/summary/DocumentationSection.tsx
@@ -1,7 +1,8 @@
 import { EditOutlined, ExpandAltOutlined, FileOutlined } from '@ant-design/icons';
-import { Button, Divider, Typography } from 'antd';
+import { Divider, Typography } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
+import { Button } from '@src/alchemy-components';
 import { useEntityData, useRefetch, useRouteToTab } from '../../../entity/shared/EntityContext';
 import { AddLinkModal } from '../../shared/components/styled/AddLinkModal';
 import { EmptyTab } from '../../shared/components/styled/EmptyTab';
@@ -66,7 +67,7 @@ export const DocumentationSection = () => {
                 </Title>
                 {hasDescription && (
                     <Button
-                        type="text"
+                        variant="text"
                         onClick={() =>
                             routeToTab({
                                 tabName: 'Documentation',
@@ -82,13 +83,13 @@ export const DocumentationSection = () => {
             <Documentation>
                 {(hasDescription && <Editor content={description} readOnly />) || (
                     <EmptyTab tab="documentation">
+                        <AddLinkModal refetch={refetch} />
                         <Button
                             data-testid="add-documentation"
                             onClick={() => routeToTab({ tabName: 'Documentation', tabParams: { editing: true } })}
                         >
                             <EditOutlined /> Add Documentation
                         </Button>
-                        <AddLinkModal refetch={refetch} />
                     </EmptyTab>
                 )}
                 <LinkList refetch={refetch} />

diff --git a/datahub-web-react/src/app/entityV2/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx b/datahub-web-react/src/app/entityV2/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx
@@ -1,5 +1,6 @@
-import { Button, Typography } from 'antd';
+import { Typography } from 'antd';
 import React, { useState } from 'react';
+import { Button } from '@src/alchemy-components';
 import styled from 'styled-components/macro';
 import { TermRelationshipType } from '../../../../types.generated';
 import { Message } from '../../../shared/Message';
@@ -8,7 +9,6 @@ import AddRelatedTermsModal from './AddRelatedTermsModal';
 import RelatedTerm from './RelatedTerm';
 import { CustomIcon } from '../../../sharedV2/icons/customIcons/CustomIcon';
 import addTerm from '../../../sharedV2/icons/customIcons/add-term.svg';
-import { REDESIGN_COLORS } from '../../shared/constants';
 
 export enum RelatedTermTypes {
     hasRelatedTerms = 'Contains',
@@ -45,20 +45,6 @@ const TitleContainer = styled.div`
 
 const messageStyle = { marginTop: '10%' };
 
-const ButtonStyle = styled(Button)`
-    border: 1px solid ${REDESIGN_COLORS.TITLE_PURPLE};
-    color: ${REDESIGN_COLORS.TITLE_PURPLE};
-    border-radius: 8px;
-    display: flex;
-    gap: 0.2rem;
-
-    &:hover,
-    &:focus {
-        border: 1px solid ${REDESIGN_COLORS.TITLE_PURPLE};
-        color: ${REDESIGN_COLORS.TITLE_PURPLE};
-    }
-`;
-
 export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, glossaryRelatedTermResult }: Props) {
     const [isShowingAddModal, setIsShowingAddModal] = useState(false);
     const glossaryRelatedTermUrns: Array<string> = [];
@@ -86,9 +72,9 @@ export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, gl
                             {glossaryRelatedTermType}
                         </Typography.Title>
                         {canEditRelatedTerms && (
-                            <ButtonStyle type="text" onClick={() => setIsShowingAddModal(true)}>
+                            <Button variant="text" onClick={() => setIsShowingAddModal(true)}>
                                 <CustomIcon iconSvg={addTerm} /> Add Terms
-                            </ButtonStyle>
+                            </Button>
                         )}
                     </TitleContainer>
                     <ListContainer>