diff --git a/datahub-web-react/src/app/entity/dataset/profile/stats/stats/DatasetStatsSummarySubHeader.tsx b/datahub-web-react/src/app/entity/dataset/profile/stats/stats/DatasetStatsSummarySubHeader.tsx index c1e2c1aa29..bbac8ecd2c 100644 --- a/datahub-web-react/src/app/entity/dataset/profile/stats/stats/DatasetStatsSummarySubHeader.tsx +++ b/datahub-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(); 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 index 1a5c01df5b..8e9102145c 100644 --- 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 && }; + return <>{statsViews.length > 0 && }; }; 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 index a0fe5ef031..9694fb631f 100644 --- 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; + 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 && ( - + {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 index 02dc70dc15..1c09b5291f 100644 --- 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) { {entityName} View Profile - + diff --git a/datahub-web-react/src/app/onboarding/OnboardingStep.tsx b/datahub-web-react/src/app/onboarding/OnboardingStep.tsx index 08bad90672..cb9d2ad900 100644 --- 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 index 84bb7a0913..5237474e9f 100644 --- 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 index 28dc6b91e0..f254b21ea9 100644 --- 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(results || null); const [educationStepIdsAllowlist, setEducationStepIdsAllowlist] = useState>( - new Set(CURRENT_ONBOARDING_IDS), + new Set(getInitialAllowListIds()), ); useEffect(() => {