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

datahub-web-react/src/app/homeV3/EditDefaultTemplateButton.tsx

@@ -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() {

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

@@ -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;
 `;
 

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

@@ -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>
     );
 };

datahub-web-react/src/app/homeV3/styledComponents.ts

@@ -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;
 `;
 

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

@@ -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

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

@@ -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;`}
 `;

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

@@ -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;

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

@@ -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) */}
+                    {/* Drop zone after each module */}
-                    {(moduleIndex < modulePositions.length - 1 || !shouldDisableDropZones) && (
                     <ModuleDropZone
                         rowIndex={rowIndex}
                         moduleIndex={moduleIndex + 1}
-                            disabled={shouldDisableDropZones && moduleIndex < modulePositions.length - 1}
+                        disabled={shouldDisableDropZones}
                     />
-                    )}
                 </React.Fragment>
             ))}
 

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

@@ -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',
         });
     });
 });

datahub-web-react/src/app/sharedV2/useGetEntities.ts

@@ -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 };
 }