Skip to content

Commit

Permalink
[Dataset quality] Fix flyout error when closed after navigation (#182026
Browse files Browse the repository at this point in the history 
)

Fixes #179880

## Summary

The PR fixes the error reported in the parent issue by making sure
Dataset Quality flyout more receptive to `undefined` flyout state.
  • Loading branch information
@awahab07
awahab07 authored May 2, 2024
1 parent e23d13e commit 312523e
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 74 deletions.
113 changes: 59 additions & 54 deletions x-pack/plugins/observability_solution/dataset_quality/public/components/flyout/flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
EuiSpacer,
EuiHorizontalRule,
EuiPanel,
EuiSkeletonRectangle,
} from '@elastic/eui';
import { flyoutCancelText } from '../../../common/translations';
import { useDatasetQualityFlyout } from '../../hooks';
Expand All @@ -36,73 +37,77 @@ export default function Flyout({ dataset, closeFlyout }: FlyoutProps) {
fieldFormats,
timeRange,
loadingState,
flyoutLoading,
} = useDatasetQualityFlyout();

return (
<EuiFlyout
outsideClickCloses={false}
onClose={closeFlyout}
ownFocus={true}
data-component-name={'datasetQualityFlyout'}
data-test-subj="datasetQualityFlyout"
>
<>
<Header dataStreamStat={dataset} />
<EuiFlyoutBody css={flyoutBodyStyles} data-test-subj="datasetQualityFlyoutBody">
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="l">
<FlyoutSummary
dataStream={dataset.rawName}
dataStreamStat={dataStreamStat}
dataStreamDetails={dataStreamDetails}
dataStreamDetailsLoading={loadingState.dataStreamDetailsLoading}
timeRange={timeRange}
/>
</EuiPanel>
{flyoutLoading ? (
<EuiSkeletonRectangle width="100%" height={80} />
) : (
<>
<Header dataStreamStat={dataset} />
<EuiFlyoutBody css={flyoutBodyStyles} data-test-subj="datasetQualityFlyoutBody">
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="l">
<FlyoutSummary
dataStream={dataset.rawName}
dataStreamStat={dataStreamStat}
dataStreamDetails={dataStreamDetails}
dataStreamDetailsLoading={loadingState.dataStreamDetailsLoading}
timeRange={timeRange}
/>
</EuiPanel>

<EuiHorizontalRule margin="none" />
<EuiHorizontalRule margin="none" />

<EuiPanel hasBorder={false} hasShadow={false} paddingSize="l">
{loadingState.dataStreamDetailsLoading && loadingState.dataStreamSettingsLoading ? (
<DatasetSummaryLoading />
) : dataStreamStat ? (
<Fragment>
<DatasetSummary
dataStreamSettings={dataStreamSettings}
dataStreamSettingsLoading={loadingState.dataStreamSettingsLoading}
dataStreamDetails={dataStreamDetails}
dataStreamDetailsLoading={loadingState.dataStreamDetailsLoading}
fieldFormats={fieldFormats}
/>
<EuiPanel hasBorder={false} hasShadow={false} paddingSize="l">
{loadingState.dataStreamDetailsLoading && loadingState.dataStreamSettingsLoading ? (
<DatasetSummaryLoading />
) : dataStreamStat ? (
<Fragment>
<DatasetSummary
dataStreamSettings={dataStreamSettings}
dataStreamSettingsLoading={loadingState.dataStreamSettingsLoading}
dataStreamDetails={dataStreamDetails}
dataStreamDetailsLoading={loadingState.dataStreamDetailsLoading}
fieldFormats={fieldFormats}
/>

{dataStreamStat.integration && (
<>
<EuiSpacer />
<IntegrationSummary
integration={dataStreamStat.integration}
dashboardsLoading={loadingState.datasetIntegrationsLoading}
/>
</>
)}
</Fragment>
) : null}
</EuiPanel>
</EuiFlyoutBody>
{dataStreamStat.integration && (
<>
<EuiSpacer />
<IntegrationSummary
integration={dataStreamStat.integration}
dashboardsLoading={loadingState.datasetIntegrationsLoading}
/>
</>
)}
</Fragment>
) : null}
</EuiPanel>
</EuiFlyoutBody>

<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="datasetQualityFlyoutButton"
iconType="cross"
onClick={closeFlyout}
flush="left"
>
{flyoutCancelText}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="datasetQualityFlyoutButton"
iconType="cross"
onClick={closeFlyout}
flush="left"
>
{flyoutCancelText}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</>
)}
</EuiFlyout>
);
}
Expand Down
28 changes: 8 additions & 20 deletions ...lugins/observability_solution/dataset_quality/public/hooks/use_dataset_quality_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

import { useSelector } from '@xstate/react';
import { useMemo } from 'react';
import { useDatasetQualityContext } from '../components/dataset_quality/context';
import { useKibanaContextForPlugin } from '../utils';

Expand All @@ -23,27 +22,15 @@ export const useDatasetQualityFlyout = () => {
datasetDetails: dataStreamDetails,
insightsTimeRange,
breakdownField,
} = useSelector(service, (state) => state.context.flyout);
const { timeRange } = useSelector(service, (state) => state.context.filters);

const dataStreamDetailsLoading = useSelector(service, (state) =>
state.matches('flyout.initializing.dataStreamDetails.fetching')
);
const dataStreamSettingsLoading = useSelector(service, (state) =>
state.matches('flyout.initializing.dataStreamSettings.fetching')
);
} = useSelector(service, (state) => state.context.flyout) ?? {};

const datasetIntegrationsLoading = useSelector(service, (state) =>
state.matches('flyout.initializing.integrationDashboards.fetching')
);
const { timeRange } = useSelector(service, (state) => state.context.filters);

const loadingState = useMemo(() => {
return {
dataStreamDetailsLoading,
dataStreamSettingsLoading,
datasetIntegrationsLoading,
};
}, [dataStreamDetailsLoading, dataStreamSettingsLoading, datasetIntegrationsLoading]);
const loadingState = useSelector(service, (state) => ({
dataStreamDetailsLoading: state.matches('flyout.initializing.dataStreamDetails.fetching'),
dataStreamSettingsLoading: state.matches('flyout.initializing.dataStreamSettings.fetching'),
datasetIntegrationsLoading: state.matches('flyout.initializing.integrationDashboards.fetching'),
}));

return {
dataStreamStat,
Expand All @@ -53,5 +40,6 @@ export const useDatasetQualityFlyout = () => {
timeRange: insightsTimeRange ?? timeRange,
breakdownField,
loadingState,
flyoutLoading: !dataStreamStat,
};
};

0 comments on commit 312523e

Please sign in to comment.