fix(forms) Fix a couple of small inconsistencies with forms (#9928)

datahub-project · Mar 25, 2024 · c8a3818 · c8a3818
1 parent 7e5610f
commit c8a3818
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 10 deletions.
diff --git a/...hub-web-react/src/app/entity/dataset/profile/stats/stats/DatasetStatsSummarySubHeader.tsx b/...hub-web-react/src/app/entity/dataset/profile/stats/stats/DatasetStatsSummarySubHeader.tsx
@@ -5,7 +5,7 @@ import { GetDatasetQuery } from '../../../../../../graphql/dataset.generated';
 import { DatasetStatsSummary } from '../../../shared/DatasetStatsSummary';
 import { getLastUpdatedMs } from '../../../shared/utils';
 
-export const DatasetStatsSummarySubHeader = () => {
+export const DatasetStatsSummarySubHeader = ({ properties }: { properties?: any }) => {
     const result = useBaseEntity<GetDatasetQuery>();
     const dataset = result?.dataset;
 
@@ -31,6 +31,7 @@ export const DatasetStatsSummarySubHeader = () => {
             queryCountLast30Days={queryCountLast30Days}
             uniqueUserCountLast30Days={uniqueUserCountLast30Days}
             lastUpdatedMs={lastUpdatedMs}
+            shouldWrap={properties?.shouldWrap}
         />
     );
 };
diff --git a/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx b/datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx
@@ -30,6 +30,7 @@ type Props = {
     lastUpdatedMs?: number | null;
     color?: string;
     mode?: 'normal' | 'tooltip-content';
+    shouldWrap?: boolean;
 };
 
 export const DatasetStatsSummary = ({
@@ -42,6 +43,7 @@ export const DatasetStatsSummary = ({
     lastUpdatedMs,
     color,
     mode = 'normal',
+    shouldWrap,
 }: Props) => {
     const isTooltipMode = mode === 'tooltip-content';
     const displayedColor = isTooltipMode ? '' : color ?? ANTD_GRAY[7];
@@ -105,5 +107,5 @@ export const DatasetStatsSummary = ({
         ),
     ].filter((stat) => stat);
 
-    return <>{statsViews.length > 0 && <StatsSummary stats={statsViews} />}</>;
+    return <>{statsViews.length > 0 && <StatsSummary stats={statsViews} shouldWrap={shouldWrap} />}</>;
 };
diff --git a/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx b/datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx
@@ -4,12 +4,14 @@ import { ANTD_GRAY } from '../../constants';
 
 type Props = {
     stats: Array<React.ReactNode>;
+    shouldWrap?: boolean;
 };
 
-const StatsContainer = styled.div`
+const StatsContainer = styled.div<{ shouldWrap?: boolean }>`
     margin-top: 8px;
     display: flex;
     align-items: center;
+    ${(props) => props.shouldWrap && `flex-wrap: wrap;`}
 `;
 
 const StatDivider = styled.div`
@@ -19,11 +21,11 @@ const StatDivider = styled.div`
     height: 21px;
 `;
 
-export const StatsSummary = ({ stats }: Props) => {
+export const StatsSummary = ({ stats, shouldWrap }: Props) => {
     return (
         <>
             {stats && stats.length > 0 && (
-                <StatsContainer>
+                <StatsContainer shouldWrap={shouldWrap}>
                     {stats.map((statView, index) => (
                         <>
                             {statView}

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntityInfo/EntityInfo.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntityInfo/EntityInfo.tsx
@@ -50,13 +50,13 @@ export default function EntityInfo({ formUrn }: Props) {
             <PlatformContent />
             <EntityName>{entityName}</EntityName>
             <StyledLink
-                href={entityRegistry.getEntityUrl(entityType, entityData?.urn || '')}
+                href={`${entityRegistry.getEntityUrl(entityType, entityData?.urn || '')}/`}
                 target="_blank"
                 rel="noreferrer noopener"
             >
                 View Profile <LinkOut style={{ marginLeft: '4px' }} />
             </StyledLink>
-            <DatasetStatsSummarySubHeader />
+            <DatasetStatsSummarySubHeader properties={{ shouldWrap: true }} />
             <FormInfoWrapper>
                 <FormInfo shouldDisplayBackground formUrn={formUrn} />
             </FormInfoWrapper>

diff --git a/datahub-web-react/src/app/onboarding/OnboardingStep.tsx b/datahub-web-react/src/app/onboarding/OnboardingStep.tsx
@@ -10,4 +10,5 @@ export type OnboardingStep = {
     content?: ReactNode;
     selector?: string;
     style?: any;
+    isActionStep?: boolean; // hide this step until some action is taken to display it
 };
diff --git a/datahub-web-react/src/app/onboarding/utils.tsx b/datahub-web-react/src/app/onboarding/utils.tsx
@@ -86,3 +86,8 @@ export function getStepsToRender(
             ),
         }));
 }
+
+// filter out action steps from the initial steps that should be shown
+export function getInitialAllowListIds() {
+    return OnboardingConfig.filter((config) => !config.isActionStep).map((config) => config.id as string);
+}
diff --git a/datahub-web-react/src/providers/EducationStepsProvider.tsx b/datahub-web-react/src/providers/EducationStepsProvider.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { getStepIds } from '../app/onboarding/utils';
+import { getInitialAllowListIds, getStepIds } from '../app/onboarding/utils';
 import { useBatchGetStepStatesQuery } from '../graphql/step.generated';
 import { EducationStepsContext } from './EducationStepsContext';
 import { StepStateResult } from '../types.generated';
-import { CURRENT_ONBOARDING_IDS } from '../app/onboarding/OnboardingConfig';
 import { useUserContext } from '../app/context/useUserContext';
 
 export function EducationStepsProvider({ children }: { children: React.ReactNode }) {
@@ -13,7 +12,7 @@ export function EducationStepsProvider({ children }: { children: React.ReactNode
     const results = data?.batchGetStepStates.results;
     const [educationSteps, setEducationSteps] = useState<StepStateResult[] | null>(results || null);
     const [educationStepIdsAllowlist, setEducationStepIdsAllowlist] = useState<Set<string>>(
-        new Set(CURRENT_ONBOARDING_IDS),
+        new Set(getInitialAllowListIds()),
     );
 
     useEffect(() => {