diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json index 50a74bb0f4259..021d88f275660 100644 --- a/datahub-web-react/package.json +++ b/datahub-web-react/package.json @@ -88,8 +88,10 @@ "build": "yarn run generate && NODE_OPTIONS='--max-old-space-size=3072 --openssl-legacy-provider' CI=false vite build", "test": "vitest", "generate": "graphql-codegen --config codegen.yml", - "lint": "eslint . --ext .ts,.tsx --quiet && yarn type-check", + "lint": "eslint . --ext .ts,.tsx --quiet && yarn format-check && yarn type-check", "lint-fix": "eslint '*/**/*.{ts,tsx}' --quiet --fix", + "format-check": "prettier --check src", + "format": "prettier --write src", "type-check": "tsc --noEmit", "type-watch": "tsc -w --noEmit" }, diff --git a/datahub-web-react/src/App.less b/datahub-web-react/src/App.less index 62ccac85a8fe1..5837d77a5a4e5 100644 --- a/datahub-web-react/src/App.less +++ b/datahub-web-react/src/App.less @@ -5,7 +5,7 @@ // less preprocessor configuration. @font-face { - font-family: 'Manrope'; - font-style: normal; - src: local('Manrope'), url('./fonts/manrope.woff2') format('woff2'), + font-family: 'Manrope'; + font-style: normal; + src: local('Manrope'), url('./fonts/manrope.woff2') format('woff2'); } diff --git a/datahub-web-react/src/Mocks.tsx b/datahub-web-react/src/Mocks.tsx index 9f9107865aac4..de471b6b9f2fb 100644 --- a/datahub-web-react/src/Mocks.tsx +++ b/datahub-web-react/src/Mocks.tsx @@ -1453,10 +1453,10 @@ export const businessAttribute = { name: 'TestBusinessAtt-2', description: 'lorem upsum updated 12', created: { - time: 1705857132786 + time: 1705857132786, }, lastModified: { - time: 1705857132786 + time: 1705857132786, }, glossaryTerms: { terms: [ @@ -1465,10 +1465,10 @@ export const businessAttribute = { urn: 'urn:li:glossaryTerm:1', type: EntityType.GlossaryTerm, hierarchicalName: 'SampleHierarchicalName', - name: 'SampleName', + name: 'SampleName', }, - associatedUrn: 'urn:li:businessAttribute:ba1' - } + associatedUrn: 'urn:li:businessAttribute:ba1', + }, ], __typename: 'GlossaryTerms', }, @@ -1483,7 +1483,7 @@ export const businessAttribute = { name: 'abc-sample-tag', }, __typename: 'TagAssociation', - associatedUrn: 'urn:li:businessAttribute:ba1' + associatedUrn: 'urn:li:businessAttribute:ba1', }, { tag: { @@ -1493,30 +1493,30 @@ export const businessAttribute = { name: 'TestTag', }, __typename: 'TagAssociation', - associatedUrn: 'urn:li:businessAttribute:ba1' - } - ] + associatedUrn: 'urn:li:businessAttribute:ba1', + }, + ], }, customProperties: [ { key: 'prop2', value: 'val2', associatedUrn: 'urn:li:businessAttribute:ba1', - __typename: 'CustomPropertiesEntry' + __typename: 'CustomPropertiesEntry', }, { key: 'prop1', value: 'val1', associatedUrn: 'urn:li:businessAttribute:ba1', - __typename: 'CustomPropertiesEntry' + __typename: 'CustomPropertiesEntry', }, { key: 'prop3', value: 'val3', associatedUrn: 'urn:li:businessAttribute:ba1', - __typename: 'CustomPropertiesEntry' - } - ] + __typename: 'CustomPropertiesEntry', + }, + ], }, ownership: { owners: [ diff --git a/datahub-web-react/src/app/SearchRoutes.tsx b/datahub-web-react/src/app/SearchRoutes.tsx index 4ebcc6f090a4b..3343260c72bcf 100644 --- a/datahub-web-react/src/app/SearchRoutes.tsx +++ b/datahub-web-react/src/app/SearchRoutes.tsx @@ -53,15 +53,18 @@ export const SearchRoutes = (): JSX.Element => { } /> } /> } /> - { - if (!appConfigContextLoaded) { - return null; - } - if (businessAttributesFlag) { - return ; - } - return ; - }}/> + { + if (!appConfigContextLoaded) { + return null; + } + if (businessAttributesFlag) { + return ; + } + return ; + }} + /> diff --git a/datahub-web-react/src/app/analyticsDashboard/components/__tests__/timeSeriesChart.test.tsx b/datahub-web-react/src/app/analyticsDashboard/components/__tests__/timeSeriesChart.test.tsx index eadbb60959a0b..c528e4e627a1c 100644 --- a/datahub-web-react/src/app/analyticsDashboard/components/__tests__/timeSeriesChart.test.tsx +++ b/datahub-web-react/src/app/analyticsDashboard/components/__tests__/timeSeriesChart.test.tsx @@ -36,7 +36,7 @@ describe('timeSeriesChart', () => { }); it('compute lines works works correctly for monthly case', () => { - const chartData:TimeSeriesChart = { + const chartData: TimeSeriesChart = { title: 'Weekly Active Users', lines: [ { diff --git a/datahub-web-react/src/app/auth/ResetCredentials.tsx b/datahub-web-react/src/app/auth/ResetCredentials.tsx index 30d7f99d99d84..77f41489fcfc9 100644 --- a/datahub-web-react/src/app/auth/ResetCredentials.tsx +++ b/datahub-web-react/src/app/auth/ResetCredentials.tsx @@ -41,7 +41,9 @@ const FormInput = styled(Input)` `; const StyledFormItem = styled(Form.Item)` - .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper { + .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not( + .ant-input-affix-wrapper-borderless + ).ant-input-affix-wrapper { background-color: transparent; } `; diff --git a/datahub-web-react/src/app/auth/SignUp.tsx b/datahub-web-react/src/app/auth/SignUp.tsx index e57a5930ce1ff..2eaa74946682f 100644 --- a/datahub-web-react/src/app/auth/SignUp.tsx +++ b/datahub-web-react/src/app/auth/SignUp.tsx @@ -55,7 +55,9 @@ const TitleSelector = styled(Select)` `; const StyledFormItem = styled(Form.Item)` - .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper { + .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not( + .ant-input-affix-wrapper-borderless + ).ant-input-affix-wrapper { background-color: transparent; } `; diff --git a/datahub-web-react/src/app/auth/login.module.css b/datahub-web-react/src/app/auth/login.module.css index 37cc067c9dd20..81b933062a1a7 100644 --- a/datahub-web-react/src/app/auth/login.module.css +++ b/datahub-web-react/src/app/auth/login.module.css @@ -8,7 +8,7 @@ position: absolute; top: 40%; left: 50%; - transform: translate(-50%,-50%); + transform: translate(-50%, -50%); } .login_logo_box { @@ -28,7 +28,7 @@ .login_form_box { width: 100%; - background-color: #1C1C1C; + background-color: #1c1c1c; border: 1px solid #555555; border-radius: 5px; padding: 2em; @@ -36,8 +36,8 @@ .login_button { color: #171717; - background-color: #EEEEEE; - border: 1px solid #555555; + background-color: #eeeeee; + border: 1px solid #555555; height: 40px; font-size: 14px; } @@ -45,11 +45,11 @@ .login_button:hover { color: white; background-color: transparent; - border: 1px solid #555555; + border: 1px solid #555555; } .sso_button { - color: #EEEEEE; + color: #eeeeee; background-color: #171717; border: 1px solid #555555; height: 40px; @@ -60,4 +60,4 @@ color: black; background-color: white; border: 1px solid #555555; -} \ No newline at end of file +} diff --git a/datahub-web-react/src/app/buildEntityRegistry.ts b/datahub-web-react/src/app/buildEntityRegistry.ts index ed20722083032..0b70986672be5 100644 --- a/datahub-web-react/src/app/buildEntityRegistry.ts +++ b/datahub-web-react/src/app/buildEntityRegistry.ts @@ -19,10 +19,10 @@ import GlossaryNodeEntity from './entity/glossaryNode/GlossaryNodeEntity'; import { DataPlatformEntity } from './entity/dataPlatform/DataPlatformEntity'; import { DataProductEntity } from './entity/dataProduct/DataProductEntity'; import { DataPlatformInstanceEntity } from './entity/dataPlatformInstance/DataPlatformInstanceEntity'; -import { ERModelRelationshipEntity } from './entity/ermodelrelationships/ERModelRelationshipEntity' +import { ERModelRelationshipEntity } from './entity/ermodelrelationships/ERModelRelationshipEntity'; import { RoleEntity } from './entity/Access/RoleEntity'; import { RestrictedEntity } from './entity/restricted/RestrictedEntity'; -import {BusinessAttributeEntity} from "./entity/businessAttribute/BusinessAttributeEntity"; +import { BusinessAttributeEntity } from './entity/businessAttribute/BusinessAttributeEntity'; import { SchemaFieldPropertiesEntity } from './entity/schemaField/SchemaFieldPropertiesEntity'; export default function buildEntityRegistry() { @@ -48,9 +48,9 @@ export default function buildEntityRegistry() { registry.register(new DataPlatformEntity()); registry.register(new DataProductEntity()); registry.register(new DataPlatformInstanceEntity()); - registry.register(new ERModelRelationshipEntity()) + registry.register(new ERModelRelationshipEntity()); registry.register(new RestrictedEntity()); registry.register(new BusinessAttributeEntity()); registry.register(new SchemaFieldPropertiesEntity()); return registry; -} \ No newline at end of file +} diff --git a/datahub-web-react/src/app/businessAttribute/CreateBusinessAttributeModal.tsx b/datahub-web-react/src/app/businessAttribute/CreateBusinessAttributeModal.tsx index 61595045646c4..1ee0ca030748e 100644 --- a/datahub-web-react/src/app/businessAttribute/CreateBusinessAttributeModal.tsx +++ b/datahub-web-react/src/app/businessAttribute/CreateBusinessAttributeModal.tsx @@ -223,9 +223,9 @@ export default function CreateBusinessAttributeModal({ visible, onClose, onCreat > By default, a random UUID will be generated to uniquely identify this entity. If - you'd like to provide a custom id, you may provide it here. Note that it should be - unique across the entire Business Attributes. Be careful, you cannot easily change the id after - creation. + you'd like to provide a custom id, you may provide it here. Note that it should + be unique across the entire Business Attributes. Be careful, you cannot easily + change the id after creation. { it('renders', () => { diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/CreateDataProductModal.tsx b/datahub-web-react/src/app/entity/domain/DataProductsTab/CreateDataProductModal.tsx index 0610fbfa7a770..a2347928136e5 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/CreateDataProductModal.tsx +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/CreateDataProductModal.tsx @@ -50,7 +50,7 @@ export default function CreateDataProductModal({ domain, onCreateDataProduct, on onClose(); } }) - .catch(( error ) => { + .catch((error) => { onClose(); message.destroy(); message.error({ content: `Failed to create Data Product: ${error.message}.` }); diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductAdvancedOption.tsx b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductAdvancedOption.tsx index a077a0308af1f..c3952fbaf5cb0 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductAdvancedOption.tsx +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductAdvancedOption.tsx @@ -1,9 +1,8 @@ -import React from "react"; -import { Collapse, Form, Input, Typography } from "antd"; -import styled from "styled-components"; +import React from 'react'; +import { Collapse, Form, Input, Typography } from 'antd'; +import styled from 'styled-components'; import { validateCustomUrnId } from '../../../shared/textUtil'; -import { DataProductBuilderFormProps } from "./types"; - +import { DataProductBuilderFormProps } from './types'; const FormItem = styled(Form.Item)` .ant-form-item-label { @@ -23,8 +22,7 @@ const AdvancedLabel = styled(Typography.Text)` color: #373d44; `; -export function DataProductAdvancedOption({builderState, updateBuilderState }: DataProductBuilderFormProps){ - +export function DataProductAdvancedOption({ builderState, updateBuilderState }: DataProductBuilderFormProps) { function updateDataProductId(id: string) { updateBuilderState({ ...builderState, @@ -54,9 +52,9 @@ export function DataProductAdvancedOption({builderState, updateBuilderState }: D }), ]} > - updateDataProductId(e.target.value)} /> @@ -64,5 +62,5 @@ export function DataProductAdvancedOption({builderState, updateBuilderState }: D - ) -} \ No newline at end of file + ); +} diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductBuilderForm.tsx b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductBuilderForm.tsx index 98bb09098a36e..695267080c92f 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductBuilderForm.tsx +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/DataProductBuilderForm.tsx @@ -43,7 +43,7 @@ export default function DataProductBuilderForm({ builderState, updateBuilderStat Description}> - + ); } diff --git a/datahub-web-react/src/app/entity/domain/DataProductsTab/types.ts b/datahub-web-react/src/app/entity/domain/DataProductsTab/types.ts index fe22e3ed9a2a4..2015b97f1433b 100644 --- a/datahub-web-react/src/app/entity/domain/DataProductsTab/types.ts +++ b/datahub-web-react/src/app/entity/domain/DataProductsTab/types.ts @@ -7,4 +7,4 @@ export type DataProductBuilderState = { export type DataProductBuilderFormProps = { builderState: DataProductBuilderState; updateBuilderState: (newState: DataProductBuilderState) => void; -}; \ No newline at end of file +}; diff --git a/datahub-web-react/src/app/entity/ermodelrelationships/ERModelRelationshipEntity.tsx b/datahub-web-react/src/app/entity/ermodelrelationships/ERModelRelationshipEntity.tsx index 91005f17b80c7..aece3db1312af 100644 --- a/datahub-web-react/src/app/entity/ermodelrelationships/ERModelRelationshipEntity.tsx +++ b/datahub-web-react/src/app/entity/ermodelrelationships/ERModelRelationshipEntity.tsx @@ -7,7 +7,10 @@ import { GenericEntityProperties } from '../shared/types'; import { ERModelRelationshipPreviewCard } from './preview/ERModelRelationshipPreviewCard'; import ermodelrelationshipIcon from '../../../images/ermodelrelationshipIcon.svg'; import { ERModelRelationshipTab } from '../shared/tabs/ERModelRelationship/ERModelRelationshipTab'; -import { useGetErModelRelationshipQuery, useUpdateErModelRelationshipMutation } from '../../../graphql/ermodelrelationship.generated'; +import { + useGetErModelRelationshipQuery, + useUpdateErModelRelationshipMutation, +} from '../../../graphql/ermodelrelationship.generated'; import { DocumentationTab } from '../shared/tabs/Documentation/DocumentationTab'; import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab'; import { SidebarAboutSection } from '../shared/containers/profile/sidebar/AboutSection/SidebarAboutSection'; @@ -108,7 +111,9 @@ export class ERModelRelationshipEntity implements Entity { {data.properties?.name || data.editableProperties?.name || ''} + + {data.properties?.name || data.editableProperties?.name || ''} + } description={data?.editableProperties?.description || ''} owners={data.ownership?.owners} diff --git a/datahub-web-react/src/app/entity/ermodelrelationships/preview/ERModelRelationshipAction.less b/datahub-web-react/src/app/entity/ermodelrelationships/preview/ERModelRelationshipAction.less index 7ac539d7a6a1e..0f63ee197fecb 100644 --- a/datahub-web-react/src/app/entity/ermodelrelationships/preview/ERModelRelationshipAction.less +++ b/datahub-web-react/src/app/entity/ermodelrelationships/preview/ERModelRelationshipAction.less @@ -1,4 +1,4 @@ -@import "../../../../../node_modules/antd/dist/antd.less"; +@import '../../../../../node_modules/antd/dist/antd.less'; .joinName { width: 385px; @@ -9,4 +9,4 @@ line-height: 24px; align-items: center; color: #262626; -} \ No newline at end of file +} diff --git a/datahub-web-react/src/app/entity/ermodelrelationships/preview/ERModelRelationshipPreviewCard.tsx b/datahub-web-react/src/app/entity/ermodelrelationships/preview/ERModelRelationshipPreviewCard.tsx index 33669485f18c6..715f935685d54 100644 --- a/datahub-web-react/src/app/entity/ermodelrelationships/preview/ERModelRelationshipPreviewCard.tsx +++ b/datahub-web-react/src/app/entity/ermodelrelationships/preview/ERModelRelationshipPreviewCard.tsx @@ -32,7 +32,9 @@ export const ERModelRelationshipPreviewCard = ({ name={name || ''} urn={urn} description={description || ''} - logoComponent={ERModelRelationship} + logoComponent={ + ERModelRelationship + } tags={globalTags || undefined} glossaryTerms={glossaryTerms || undefined} owners={owners} diff --git a/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx b/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx index a898a73c254ef..356daf584d9f7 100644 --- a/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx +++ b/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx @@ -22,19 +22,18 @@ export default function EditGroupDescriptionModal({ stagedDescription, }: Props) { const [form] = Form.useForm(); - const [aboutText,setAboutText] = useState(stagedDescription) + const [aboutText, setAboutText] = useState(stagedDescription); function updateDescription(description: string) { - setAboutText(aboutText) + setAboutText(aboutText); setStagedDescription(description); - } const saveDescription = () => { onSaveAboutMe(); onClose(); }; - + return ( { + const { updateTitle } = useBrowserTitle(); + + useEffect(() => { // You can use the title and updateTitle function here // For example, updating the title when the component mounts - if(name){ + if (name) { updateTitle(`Group | ${name}`); } // // Don't forget to clean up the title when the component unmounts return () => { - if(name){ // added to condition for rerendering issue + if (name) { + // added to condition for rerendering issue updateTitle(''); } }; @@ -216,7 +217,7 @@ export default function GroupInfoSidebar({ sideBarData, refetch }: Props) { urn, email, slack, - photoUrl + photoUrl, }; // About Text save diff --git a/datahub-web-react/src/app/entity/ownership/table/ActionsColumn.tsx b/datahub-web-react/src/app/entity/ownership/table/ActionsColumn.tsx index e08853ad150bf..cf4bf9a0fddf4 100644 --- a/datahub-web-react/src/app/entity/ownership/table/ActionsColumn.tsx +++ b/datahub-web-react/src/app/entity/ownership/table/ActionsColumn.tsx @@ -48,9 +48,9 @@ export const ActionsColumn = ({ ownershipType, setIsOpen, setOwnershipType, refe setOwnershipType(ownershipType); }; - const onCopy=() => { + const onCopy = () => { navigator.clipboard.writeText(ownershipType.urn); - } + }; const [deleteOwnershipTypeMutation] = useDeleteOwnershipTypeMutation(); @@ -125,8 +125,7 @@ export const ActionsColumn = ({ ownershipType, setIsOpen, setOwnershipType, refe const key = e.key as string; if (key === 'edit') { editOnClick(); - } - else if( key === 'copy') { + } else if (key === 'copy') { onCopy(); } }; diff --git a/datahub-web-react/src/app/entity/schemaField/SchemaFieldPropertiesEntity.tsx b/datahub-web-react/src/app/entity/schemaField/SchemaFieldPropertiesEntity.tsx index 91638d4997003..7e74b43e68afb 100644 --- a/datahub-web-react/src/app/entity/schemaField/SchemaFieldPropertiesEntity.tsx +++ b/datahub-web-react/src/app/entity/schemaField/SchemaFieldPropertiesEntity.tsx @@ -34,11 +34,7 @@ export class SchemaFieldPropertiesEntity implements Entity { renderProfile = (_: string) => <>; renderPreview = (previewType: PreviewType, data: SchemaFieldEntity) => ( - + ); renderSearch = (result: SearchResult) => this.renderPreview(PreviewType.SEARCH, result.entity as SchemaFieldEntity); diff --git a/datahub-web-react/src/app/entity/schemaField/preview/Preview.tsx b/datahub-web-react/src/app/entity/schemaField/preview/Preview.tsx index 3f24b3a06e3a4..b22e988c76672 100644 --- a/datahub-web-react/src/app/entity/schemaField/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/schemaField/preview/Preview.tsx @@ -20,7 +20,9 @@ export const Preview = ({ }): JSX.Element => { const entityRegistry = useEntityRegistry(); - const url = `${entityRegistry.getEntityUrl(EntityType.Dataset, datasetUrn)}/${encodeURIComponent('Schema')}?schemaFilter=${encodeURIComponent(name)}`; + const url = `${entityRegistry.getEntityUrl(EntityType.Dataset, datasetUrn)}/${encodeURIComponent( + 'Schema', + )}?schemaFilter=${encodeURIComponent(name)}`; return ( ); -}; \ No newline at end of file +}; diff --git a/datahub-web-react/src/app/entity/shared/EntityContext.ts b/datahub-web-react/src/app/entity/shared/EntityContext.ts index c564d73c7441f..abc7fcfa6cced 100644 --- a/datahub-web-react/src/app/entity/shared/EntityContext.ts +++ b/datahub-web-react/src/app/entity/shared/EntityContext.ts @@ -22,17 +22,17 @@ export function useEntityContext() { return useContext(EntityContext); } -export const useBaseEntity = (): T => { +export const useBaseEntity = (): T => { const { baseEntity } = useContext(EntityContext); return baseEntity as T; }; -export const useDataNotCombinedWithSiblings = (): T => { +export const useDataNotCombinedWithSiblings = (): T => { const { dataNotCombinedWithSiblings } = useContext(EntityContext); return dataNotCombinedWithSiblings as T; }; -export const useEntityUpdate = (): UpdateEntityType | null | undefined => { +export const useEntityUpdate = (): UpdateEntityType | null | undefined => { const { updateEntity } = useContext(EntityContext); return updateEntity; }; diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/UpdateDeprecationModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/UpdateDeprecationModal.tsx index 25527497b33a8..01287c2b367bf 100644 --- a/datahub-web-react/src/app/entity/shared/EntityDropdown/UpdateDeprecationModal.tsx +++ b/datahub-web-react/src/app/entity/shared/EntityDropdown/UpdateDeprecationModal.tsx @@ -71,11 +71,11 @@ export const UpdateDeprecationModal = ({ urns, onClose, refetch }: Props) => { } - width='40%' + width="40%" >
- + diff --git a/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx b/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx index 9ec2aab193aa0..08e9636f760de 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/DeprecationPill.tsx @@ -165,8 +165,7 @@ export const DeprecationPill = ({ deprecation, urn, refetch, showUndeprecate }: {expanded || !overLimit ? ( <> - { - deprecation?.note && deprecation?.note !== '' && + {deprecation?.note && deprecation?.note !== '' && ( <> @@ -181,7 +180,7 @@ export const DeprecationPill = ({ deprecation, urn, refetch, showUndeprecate }: )} - } + )} ) : ( <> diff --git a/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.less b/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.less index b50d3debaf1ef..8c1f29aa7fc77 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.less +++ b/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.less @@ -1,12 +1,12 @@ -@import "../../../../../../../node_modules/antd/dist/antd.less"; +@import '../../../../../../../node_modules/antd/dist/antd.less'; .CreateERModelRelationModal { .ermodelrelation-name { padding: 8px 16px; width: 948.5px !important; height: 40px !important; - background: #FFFFFF; - border: 1px solid #D9D9D9; + background: #ffffff; + border: 1px solid #d9d9d9; box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.016); border-radius: 2px; align-items: center; @@ -18,8 +18,8 @@ max-width: 370px; min-width: 370px; height: 38px; - background: #FFFFFF; - border: 1px solid #D9D9D9; + background: #ffffff; + border: 1px solid #d9d9d9; box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.016); border-radius: 2px; } @@ -27,8 +27,8 @@ box-sizing: border-box; width: 1000px; height: 765px; - background: #FFFFFF; - border: 1px solid #ADC0D7; + background: #ffffff; + border: 1px solid #adc0d7; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); border-radius: 8px; left: -215px; @@ -58,7 +58,7 @@ color: #000000; padding-top: 4px; } - .all-content-heading{ + .all-content-heading { width: 380px; height: 16px; margin-top: 16px; @@ -68,10 +68,10 @@ font-weight: 700; font-size: 14px; line-height: 16px; - color: #1B2F41; + color: #1b2f41; flex: none; } - .all-table-heading{ + .all-table-heading { width: 380px; height: 16px; margin-bottom: 8px; @@ -80,11 +80,11 @@ font-weight: 700; font-size: 14px; line-height: 16px; - color: #1B2F41; + color: #1b2f41; flex: none; } - - .field-heading{ + + .field-heading { height: 16px; margin-top: 32px; margin-bottom: 8px; @@ -93,16 +93,16 @@ font-weight: 700; font-size: 14px; line-height: 16px; - color: #1B2F41; + color: #1b2f41; } - .all-information{ + .all-information { width: 680px; height: 24px; font-family: 'Arial'; font-style: normal; font-weight: 400; font-size: 16px; - color: #1B2F41; + color: #1b2f41; } .techNameDisplay { font-size: 14px; @@ -127,7 +127,7 @@ padding-right: 25px; border-top: 0px; } - + .ant-btn-link { padding-left: 0px !important; padding-right: 1px !important; @@ -135,7 +135,7 @@ font-style: normal !important; font-weight: 400 !important; font-size: 14px !important; - color: #1890FF !important; + color: #1890ff !important; } .add-btn-link { padding-left: 865px !important; @@ -146,7 +146,7 @@ font-style: normal !important; font-weight: 700 !important; font-size: 12px !important; - color: #1890FF !important; + color: #1890ff !important; line-height: 20px; } @@ -155,20 +155,21 @@ margin-left: 440px; width: 85px; height: 40px !important; - background: #FFFFFF; - border: 1px solid #D9D9D9 !important; + background: #ffffff; + border: 1px solid #d9d9d9 !important; border-radius: 5px; color: #262626; } - - .submit-btn, .submit-btn:hover { + + .submit-btn, + .submit-btn:hover { margin-left: 28px; //margin-top: 6px; width: 86px; height: 40px; - background: #1890FF; + background: #1890ff; border: none; - color: #FFFFFF; + color: #ffffff; } .footer-parent-div { padding-left: 8px; @@ -183,11 +184,11 @@ min-width: 373px !important; font-size: 14px; line-height: 22px; - font-family: 'Roboto Mono',monospace; + font-family: 'Roboto Mono', monospace; font-weight: 400; background: white; font-style: normal; - color: #000000D9; + color: #000000d9; } .ermodelrelation-details-ta { height: 95px; @@ -213,13 +214,13 @@ font-weight: 500; font-size: 14px; line-height: 22px; - color: #1B2F41; + color: #1b2f41; align-items: center; padding: 16px; gap: 4px; isolation: isolate; height: 56px !important; - background: #FFFFFF; + background: #ffffff; border-color: rgba(0, 0, 0, 0.12); } .ant-table-tbody > tr td { @@ -233,11 +234,12 @@ color: rgba(0, 0, 0, 0.85); border-color: rgba(0, 0, 0, 0.12); } - td:nth-child(1), td:nth-child(3){ + td:nth-child(1), + td:nth-child(3) { max-width: 400px !important; min-width: 400px !important; } - .titleNameDisplay{ + .titleNameDisplay { max-width: 360px; overflow: hidden; white-space: nowrap; @@ -247,11 +249,11 @@ font-size: 14px; padding: 4px 0; } - .firstRow{ + .firstRow { display: flex; justify-content: left; } - + .editableNameDisplay { display: block; overflow-wrap: break-word; @@ -267,11 +269,13 @@ line-height: 16px; color: #595959; } - td:nth-child(2), th:nth-child(2){ + td:nth-child(2), + th:nth-child(2) { min-width: 44px !important; max-width: 44px !important; } - td:nth-child(4), th:nth-child(4){ + td:nth-child(4), + th:nth-child(4) { min-width: 75px !important; max-width: 75px !important; } @@ -280,15 +284,15 @@ border-collapse: collapse; } .SelectedRow { - background-color: #ECF2F8; + background-color: #ecf2f8; } } } .cancel-modal { .ant-btn-primary { - color: #FFFFFF; - background: #1890FF; + color: #ffffff; + background: #1890ff; border: none; box-shadow: none; } -} \ No newline at end of file +} diff --git a/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.tsx b/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.tsx index a6f84b8c8fc5c..dd6cbc3698705 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.tsx @@ -5,11 +5,19 @@ import { PlusOutlined } from '@ant-design/icons'; import arrow from '../../../../../../images/Arrow.svg'; import './CreateERModelRelationModal.less'; import { EntityType, ErModelRelationship, OwnerEntityType } from '../../../../../../types.generated'; -import { useCreateErModelRelationshipMutation, useUpdateErModelRelationshipMutation } from '../../../../../../graphql/ermodelrelationship.generated'; +import { + useCreateErModelRelationshipMutation, + useUpdateErModelRelationshipMutation, +} from '../../../../../../graphql/ermodelrelationship.generated'; import { useUserContext } from '../../../../../context/useUserContext'; import { EditableRow } from './EditableRow'; import { EditableCell } from './EditableCell'; -import { checkDuplicateERModelRelation, getDatasetName, ERModelRelationDataType, validateERModelRelation } from './ERModelRelationUtils'; +import { + checkDuplicateERModelRelation, + getDatasetName, + ERModelRelationDataType, + validateERModelRelation, +} from './ERModelRelationUtils'; import { useGetSearchResultsQuery } from '../../../../../../graphql/search.generated'; import { useAddOwnerMutation } from '../../../../../../graphql/mutations.generated'; @@ -52,7 +60,10 @@ export const CreateERModelRelationModal = ({ const [details, setDetails] = useState(editERModelRelation?.editableProperties?.description || ''); const [ermodelrelationName, setERModelRelationName] = useState( - editERModelRelation?.editableProperties?.name || editERModelRelation?.properties?.name || editERModelRelation?.id || '', + editERModelRelation?.editableProperties?.name || + editERModelRelation?.properties?.name || + editERModelRelation?.id || + '', ); const [tableData, setTableData] = useState( editERModelRelation?.properties?.relationshipFieldMappings?.map((item, index) => { @@ -116,11 +127,11 @@ export const CreateERModelRelationModal = ({ destination: table2Dataset?.urn || '', name: ermodelrelationName, relationshipFieldmappings: tableData.map((r) => { - return { - sourceField: r.field1Name, - destinationField: r.field2Name, - }; - }), + return { + sourceField: r.field1Name, + destinationField: r.field2Name, + }; + }), created: true, }, editableProperties: { @@ -171,12 +182,12 @@ export const CreateERModelRelationModal = ({ createdBy: editERModelRelation?.properties?.createdActor?.urn || user?.urn, createdAt: editERModelRelation?.properties?.createdTime || 0, relationshipFieldmappings: tableData.map((r) => { - return { - sourceField: r.field1Name, - destinationField: r.field2Name, - }; - }), - }, + return { + sourceField: r.field1Name, + destinationField: r.field2Name, + }; + }), + }, editableProperties: { name: ermodelrelationName, description: details, @@ -203,7 +214,12 @@ export const CreateERModelRelationModal = ({ }); }; const onSubmit = async () => { - const errors = validateERModelRelation(ermodelrelationName, tableData, isEditing, getSearchResultsERModelRelations); + const errors = validateERModelRelation( + ermodelrelationName, + tableData, + isEditing, + getSearchResultsERModelRelations, + ); if ((await errors).length > 0) { const err = (await errors).join(`, `); message.error(err); @@ -368,19 +384,25 @@ export const CreateERModelRelationModal = ({ }, { validator: (_, value) => - checkDuplicateERModelRelation(getSearchResultsERModelRelations, value?.trim()).then((result) => { - return result === true && !isEditing - ? Promise.reject( - new Error( - 'This ER-Model-Relationship name already exists. A unique name for each ER-Model-Relationship is required.', - ), - ) - : Promise.resolve(); - }), + checkDuplicateERModelRelation(getSearchResultsERModelRelations, value?.trim()).then( + (result) => { + return result === true && !isEditing + ? Promise.reject( + new Error( + 'This ER-Model-Relationship name already exists. A unique name for each ER-Model-Relationship is required.', + ), + ) + : Promise.resolve(); + }, + ), }, ]} > - setERModelRelationName(e.target.value)} /> + setERModelRelationName(e.target.value)} + />

Fields

tr th { padding: 16px; gap: 4px; - background: #FFFFFF; + background: #ffffff; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.12); @@ -133,17 +133,17 @@ .ant-table-tbody > tr td { font-size: 14px; line-height: 22px; - font-family: 'Roboto Mono',monospace; + font-family: 'Roboto Mono', monospace; font-weight: 400; background: white; font-style: normal; - color: #000000D9; + color: #000000d9; padding: 16px; border-width: 0px 0px 1px 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.12); } - .firstRow{ + .firstRow { display: flex; justify-content: left; } @@ -152,7 +152,7 @@ font-style: normal; font-weight: 600; line-height: 22px; - color: #1B2F41; + color: #1b2f41; } .editableNameDisplay { color: #595959; @@ -163,14 +163,13 @@ line-height: normal; } .SelectedRow { - background-color: #ECF2F8; + background-color: #ecf2f8; } } } -.radioButton{ - .ant-radio-inner{ +.radioButton { + .ant-radio-inner { margin-top: 20px; border-color: #4a5568; } } - diff --git a/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/ERModelRelationPreview.tsx b/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/ERModelRelationPreview.tsx index a033f9d4a3574..b360f03bb5b28 100644 --- a/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/ERModelRelationPreview.tsx +++ b/datahub-web-react/src/app/entity/shared/components/styled/ERModelRelationship/ERModelRelationPreview.tsx @@ -51,7 +51,8 @@ export const ERModelRelationPreview = ({ ermodelrelationData, baseEntityUrn, pre shuffleFlag && prePageType !== 'ERModelRelationship' ? ermodelrelationData?.properties?.source?.urn : ermodelrelationData?.properties?.destination?.urn; - const ermodelrelationHeader = ermodelrelationData?.editableProperties?.name || ermodelrelationData?.properties?.name || ''; + const ermodelrelationHeader = + ermodelrelationData?.editableProperties?.name || ermodelrelationData?.properties?.name || ''; function getFieldMap(): ERModelRelationRecord[] { const newData = [] as ERModelRelationRecord[]; if (shuffleFlag && prePageType !== 'ERModelRelationship') { @@ -147,7 +148,12 @@ export const ERModelRelationPreview = ({ ermodelrelationData, baseEntityUrn, pre

{ermodelrelationHeader}

{prePageType === 'Dataset' && ( -