mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
refactor: memoize heavy components in project overview (#5241)
This PR memoizes some of the heavier components in our project overview table
This commit is contained in:
parent
5b41abff97
commit
9cfade926e
@ -20,3 +20,7 @@ export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const MemoizedFeatureEnvironmentSeenCell = React.memo(
|
||||
FeatureEnvironmentSeenCell,
|
||||
);
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { useMemo } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { styled } from '@mui/material';
|
||||
import { flexRow } from 'themes/themeStyles';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
@ -22,6 +22,68 @@ const StyledSwitchContainer = styled('div', {
|
||||
}),
|
||||
}));
|
||||
|
||||
interface IFeatureToggleCellProps {
|
||||
projectId: string;
|
||||
environmentName: string;
|
||||
isChangeRequestEnabled: boolean;
|
||||
refetch: () => void;
|
||||
onFeatureToggleSwitch: ReturnType<UseFeatureToggleSwitchType>['onToggle'];
|
||||
value: boolean;
|
||||
feature: ListItemType;
|
||||
}
|
||||
|
||||
const FeatureToggleCellComponent = ({
|
||||
value,
|
||||
feature,
|
||||
projectId,
|
||||
environmentName,
|
||||
isChangeRequestEnabled,
|
||||
refetch,
|
||||
onFeatureToggleSwitch,
|
||||
}: IFeatureToggleCellProps) => {
|
||||
const environment = feature.environments[environmentName];
|
||||
|
||||
const hasWarning = useMemo(
|
||||
() =>
|
||||
feature.someEnabledEnvironmentHasVariants &&
|
||||
environment.variantCount === 0 &&
|
||||
environment.enabled,
|
||||
[feature, environment],
|
||||
);
|
||||
|
||||
const onToggle = (newState: boolean, onRollback: () => void) => {
|
||||
onFeatureToggleSwitch(newState, {
|
||||
projectId,
|
||||
featureId: feature.name,
|
||||
environmentName,
|
||||
environmentType: environment?.type,
|
||||
hasStrategies: environment?.hasStrategies,
|
||||
hasEnabledStrategies: environment?.hasEnabledStrategies,
|
||||
isChangeRequestEnabled,
|
||||
onRollback,
|
||||
onSuccess: refetch,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledSwitchContainer hasWarning={hasWarning}>
|
||||
<FeatureToggleSwitch
|
||||
projectId={projectId}
|
||||
value={value}
|
||||
featureId={feature.name}
|
||||
environmentName={environmentName}
|
||||
onToggle={onToggle}
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={hasWarning}
|
||||
show={<VariantsWarningTooltip />}
|
||||
/>
|
||||
</StyledSwitchContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const MemoizedFeatureToggleCell = React.memo(FeatureToggleCellComponent);
|
||||
|
||||
export const createFeatureToggleCell =
|
||||
(
|
||||
projectId: string,
|
||||
@ -37,43 +99,15 @@ export const createFeatureToggleCell =
|
||||
value: boolean;
|
||||
row: { original: ListItemType };
|
||||
}) => {
|
||||
const environment = feature.environments[environmentName];
|
||||
|
||||
const hasWarning = useMemo(
|
||||
() =>
|
||||
feature.someEnabledEnvironmentHasVariants &&
|
||||
environment.variantCount === 0 &&
|
||||
environment.enabled,
|
||||
[feature, environment],
|
||||
);
|
||||
|
||||
const onToggle = (newState: boolean, onRollback: () => void) => {
|
||||
onFeatureToggleSwitch(newState, {
|
||||
projectId,
|
||||
featureId: feature.name,
|
||||
environmentName,
|
||||
environmentType: environment?.type,
|
||||
hasStrategies: environment?.hasStrategies,
|
||||
hasEnabledStrategies: environment?.hasEnabledStrategies,
|
||||
isChangeRequestEnabled,
|
||||
onRollback,
|
||||
onSuccess: refetch,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledSwitchContainer hasWarning={hasWarning}>
|
||||
<FeatureToggleSwitch
|
||||
projectId={projectId}
|
||||
value={value}
|
||||
featureId={feature.name}
|
||||
environmentName={environmentName}
|
||||
onToggle={onToggle}
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={hasWarning}
|
||||
show={<VariantsWarningTooltip />}
|
||||
/>
|
||||
</StyledSwitchContainer>
|
||||
<MemoizedFeatureToggleCell
|
||||
value={value}
|
||||
feature={feature}
|
||||
projectId={projectId}
|
||||
environmentName={environmentName}
|
||||
isChangeRequestEnabled={isChangeRequestEnabled}
|
||||
refetch={refetch}
|
||||
onFeatureToggleSwitch={onFeatureToggleSwitch}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -159,6 +159,7 @@ export const useFeatureToggleSwitch: UseFeatureToggleSwitchType = (
|
||||
config.environmentName,
|
||||
shouldActivateDisabledStrategies,
|
||||
);
|
||||
|
||||
setToastData({
|
||||
type: 'success',
|
||||
title: `Enabled in ${config.environmentName}`,
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
Checkbox,
|
||||
IconButton,
|
||||
@ -55,10 +55,10 @@ import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
|
||||
import FileDownload from '@mui/icons-material/FileDownload';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
|
||||
import { RowSelectCell } from './RowSelectCell/RowSelectCell';
|
||||
import { MemoizedRowSelectCell } from './RowSelectCell/RowSelectCell';
|
||||
import { BatchSelectionActionsBar } from '../../../common/BatchSelectionActionsBar/BatchSelectionActionsBar';
|
||||
import { ProjectFeaturesBatchActions } from './ProjectFeaturesBatchActions/ProjectFeaturesBatchActions';
|
||||
import { FeatureEnvironmentSeenCell } from '../../../common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
|
||||
import { MemoizedFeatureEnvironmentSeenCell } from '../../../common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
|
||||
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
||||
import { ListItemType } from './ProjectFeatureToggles.types';
|
||||
import { createFeatureToggleCell } from './FeatureToggleSwitch/createFeatureToggleCell';
|
||||
@ -161,7 +161,9 @@ export const ProjectFeatureToggles = ({
|
||||
<Checkbox {...getToggleAllRowsSelectedProps()} />
|
||||
),
|
||||
Cell: ({ row }: any) => (
|
||||
<RowSelectCell {...row?.getToggleRowSelectedProps?.()} />
|
||||
<MemoizedRowSelectCell
|
||||
{...row?.getToggleRowSelectedProps?.()}
|
||||
/>
|
||||
),
|
||||
maxWidth: 50,
|
||||
disableSortBy: true,
|
||||
@ -191,7 +193,7 @@ export const ProjectFeatureToggles = ({
|
||||
accessor: 'lastSeenAt',
|
||||
Cell: ({ value, row: { original: feature } }: any) => {
|
||||
return showEnvironmentLastSeen ? (
|
||||
<FeatureEnvironmentSeenCell feature={feature} />
|
||||
<MemoizedFeatureEnvironmentSeenCell feature={feature} />
|
||||
) : (
|
||||
<FeatureSeenCell value={value} />
|
||||
);
|
||||
|
@ -1,3 +1,4 @@
|
||||
import React from 'react';
|
||||
import { Box, Checkbox, styled } from '@mui/material';
|
||||
import { FC } from 'react';
|
||||
import { BATCH_SELECT } from 'utils/testIds';
|
||||
@ -23,3 +24,5 @@ export const RowSelectCell: FC<IRowSelectCellProps> = ({
|
||||
<Checkbox onChange={onChange} title={title} checked={checked} />
|
||||
</StyledBoxCell>
|
||||
);
|
||||
|
||||
export const MemoizedRowSelectCell = React.memo(RowSelectCell);
|
||||
|
Loading…
Reference in New Issue
Block a user