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

This commit is contained in:
Chris Collins 2024-03-25 08:37:51 -07:00 committed by GitHub
parent 7e5610f358
commit c8a38188f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 20 additions and 10 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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