yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-02 03:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui) Fix alignment of rows and columns on new home page (#14142)

Browse Source
This commit is contained in:
Chris Collins 2025-07-18 15:03:40 -04:00 committed by GitHub
parent a1345efd04
commit 5e98093e31
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 51 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
datahub-web-react/src/app/homeV3/EditDefaultTemplateButton.tsx
View File

@ -7,6 +7,7 @@ import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext'
const ButtonWrapper = styled.div`
display: flex;
justify-content: flex-end;
margin-right: 42px;
`;
export default function EditDefaultTemplateButton() {

2
datahub-web-react/src/app/homeV3/announcements/Announcements.tsx
View File

@ -7,7 +7,7 @@ import { useGetAnnouncementsForUser } from '@app/homeV3/announcements/useGetAnno
const AnnouncementsContainer = styled.div`
display: flex;
flex-direction: column;
padding: 0;
padding: 0 42px;
gap: 8px;
`;

11
datahub-web-react/src/app/homeV3/header/Header.tsx
View File

@ -4,7 +4,7 @@ import styled from 'styled-components';
import GreetingText from '@app/homeV3/header/components/GreetingText';
import SearchBar from '@app/homeV3/header/components/SearchBar';
import { CenteredContainer } from '@app/homeV3/styledComponents';
import { CenteredContainer, contentWidth } from '@app/homeV3/styledComponents';
export const HeaderWrapper = styled.div`
display: flex;
@ -16,13 +16,18 @@ export const HeaderWrapper = styled.div`
border-radius: 12px 12px 0 0;
`;
const StyledCenteredContainer = styled(CenteredContainer)`
padding: 0 40px;
${contentWidth(64)}
`;
const Header = () => {
return (
<HeaderWrapper>
<CenteredContainer>
<StyledCenteredContainer>
<GreetingText />
<SearchBar />
</CenteredContainer>
</StyledCenteredContainer>
</HeaderWrapper>
);
};

26
datahub-web-react/src/app/homeV3/styledComponents.ts
View File

@ -6,11 +6,15 @@ import VectorBackground from '@images/homepage-vector.svg?react';
export const PageWrapper = styled.div`
width: 100%;
height: 100%;
overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
display: flex;
flex-direction: column;
box-shadow: 0px 4px 8px 0px rgba(33, 23, 95, 0.08);
position: relative;
align-items: center;
`;
export const HomePageContainer = styled.div`
@ -31,26 +35,38 @@ export const StyledVectorBackground = styled(VectorBackground)`
background-color: ${colors.white};
`;
export const contentWidth = (additionalWidth = 0) => `
width: calc(75% + ${additionalWidth}px);
@media (max-width: 1500px) {
width: calc(85% + ${additionalWidth}px);
}
@media (max-width: 1250px) {
width: 100%;
}
`;
export const ContentContainer = styled.div`
z-index: 1;
padding: 40px 40px 16px 40px;
padding: 24px 0 16px 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: auto;
${contentWidth(0)}
`;
export const CenteredContainer = styled.div`
max-width: 1016px;
max-width: 1600px; // could simply increase this - ask in design review
width: 100%;
padding: 0 8px;
`;
export const ContentDiv = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
gap: 8px;
overflow-y: auto;
`;

2
datahub-web-react/src/app/homeV3/template/Template.tsx
View File

@ -15,7 +15,7 @@ import { DataHubPageTemplateRow } from '@types';
const Wrapper = styled.div`
display: flex;
flex-direction: column;
gap: ${spacing.xsm};
gap: ${spacing.xxsm};
`;
// Additional margin to have width of content excluding side buttons

1
datahub-web-react/src/app/homeV3/template/components/NewRowDropZone.tsx
View File

@ -4,6 +4,7 @@ import styled from 'styled-components';
const NewRowDropZone = styled.div<{ $isOver?: boolean }>`
transition: all 0.2s ease;
margin: 0 42px;
${({ $isOver }) => $isOver && `border: 2px solid #CAC3F1;`}
`;

2
datahub-web-react/src/app/homeV3/template/components/TemplateGrid.tsx
View File

@ -5,8 +5,6 @@ import NewRowDropZone from '@app/homeV3/template/components/NewRowDropZone';
import TemplateRow from '@app/homeV3/templateRow/TemplateRow';
import { WrappedRow } from '@app/homeV3/templateRow/types';
// import NewRowDropZone from './NewRowDropZone';
interface Props {
wrappedRows: WrappedRow[];
modulesAvailableToAdd: ModulesAvailableToAdd;

16
datahub-web-react/src/app/homeV3/templateRow/components/RowLayout.tsx
View File

@ -11,7 +11,7 @@ import { WrappedRow } from '@app/homeV3/templateRow/types';
const RowWrapper = styled.div`
display: flex;
gap: ${spacing.xsm};
gap: ${spacing.xxsm};
flex: 1;
`;
@ -54,14 +54,12 @@ function RowLayout({ rowIndex, modulePositions, shouldDisableDropZones, modulesA
{modulePositions.map(({ module, position, key }, moduleIndex) => (
<React.Fragment key={key}>
<ModuleWrapper module={module} position={position} />
{/* Drop zone after each module (except the last one if row is full) */}
{(moduleIndex < modulePositions.length - 1 || !shouldDisableDropZones) && (
<ModuleDropZone
rowIndex={rowIndex}
moduleIndex={moduleIndex + 1}
disabled={shouldDisableDropZones && moduleIndex < modulePositions.length - 1}
/>
)}
{/* Drop zone after each module */}
<ModuleDropZone
rowIndex={rowIndex}
moduleIndex={moduleIndex + 1}
disabled={shouldDisableDropZones}
/>
</React.Fragment>
))}

6
datahub-web-react/src/app/sharedV2/__tests__/useGetEntities.test.ts
View File

@ -34,6 +34,7 @@ describe('useGetEntities', () => {
expect(useGetEntitiesQueryMock).toHaveBeenCalledWith({
variables: { urns: VALID_URNS },
skip: false,
fetchPolicy: 'cache-first',
});
});
@ -43,6 +44,7 @@ describe('useGetEntities', () => {
expect(useGetEntitiesQueryMock).toHaveBeenCalledWith({
variables: { urns: ['urn:li:dataset:1', 'urn:li:chart:2'] },
skip: false,
fetchPolicy: 'cache-first',
});
});
@ -51,6 +53,7 @@ describe('useGetEntities', () => {
expect(useGetEntitiesQueryMock).toHaveBeenCalledWith({
variables: { urns: [] },
skip: true,
fetchPolicy: 'cache-first',
});
});
@ -59,6 +62,7 @@ describe('useGetEntities', () => {
expect(useGetEntitiesQueryMock).toHaveBeenCalledWith({
variables: { urns: [] },
skip: true,
fetchPolicy: 'cache-first',
});
});
@ -106,6 +110,7 @@ describe('useGetEntities', () => {
expect(useGetEntitiesQueryMock).toHaveBeenCalledWith({
variables: { urns: [] },
skip: true,
fetchPolicy: 'cache-first',
});
});
@ -115,6 +120,7 @@ describe('useGetEntities', () => {
expect(useGetEntitiesQueryMock).toHaveBeenCalledWith({
variables: { urns: ['urn:li:chart:2'] },
skip: false,
fetchPolicy: 'cache-first',
});
});
});

6
datahub-web-react/src/app/sharedV2/useGetEntities.ts
View File

@ -7,7 +7,11 @@ export function useGetEntities(urns: string[]): {
} {
const verifiedUrns = urns.filter((urn) => typeof urn === 'string' && urn.startsWith('urn:li:'));
const { data, loading } = useGetEntitiesQuery({ variables: { urns: verifiedUrns }, skip: !verifiedUrns.length });
const { data, loading } = useGetEntitiesQuery({
variables: { urns: verifiedUrns },
skip: !verifiedUrns.length,
fetchPolicy: 'cache-first',
});
const entities: Entity[] = Array.isArray(data?.entities) ? (data?.entities.filter(Boolean) as Entity[]) : [];
return { entities, loading };
}