Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

refactor: memoize heavy components in project overview (#5241)

Browse Source 
This PR memoizes some of the heavier components in our project overview
table
This commit is contained in:
Fredrik Strand Oseberg 2023-11-02 13:12:35 +01:00 committed by GitHub
parent 5b41abff97
commit 9cfade926e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 87 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
View File

@ -20,3 +20,7 @@ export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
/>
);
};
export const MemoizedFeatureEnvironmentSeenCell = React.memo(
FeatureEnvironmentSeenCell,
);

64
frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/createFeatureToggleCell.tsx
View File

@ -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,21 +22,25 @@ const StyledSwitchContainer = styled('div', {
}),
}));
export const createFeatureToggleCell =
(
projectId: string,
environmentName: string,
isChangeRequestEnabled: boolean,
refetch: () => void,
onFeatureToggleSwitch: ReturnType<UseFeatureToggleSwitchType>['onToggle'],
) =>
({
value,
row: { original: feature },
}: {
interface IFeatureToggleCellProps {
projectId: string;
environmentName: string;
isChangeRequestEnabled: boolean;
refetch: () => void;
onFeatureToggleSwitch: ReturnType<UseFeatureToggleSwitchType>['onToggle'];
value: boolean;
row: { original: ListItemType };
}) => {
feature: ListItemType;
}
const FeatureToggleCellComponent = ({
value,
feature,
projectId,
environmentName,
isChangeRequestEnabled,
refetch,
onFeatureToggleSwitch,
}: IFeatureToggleCellProps) => {
const environment = feature.environments[environmentName];
const hasWarning = useMemo(
@ -77,3 +81,33 @@ export const createFeatureToggleCell =
</StyledSwitchContainer>
);
};
const MemoizedFeatureToggleCell = React.memo(FeatureToggleCellComponent);
export const createFeatureToggleCell =
(
projectId: string,
environmentName: string,
isChangeRequestEnabled: boolean,
refetch: () => void,
onFeatureToggleSwitch: ReturnType<UseFeatureToggleSwitchType>['onToggle'],
) =>
({
value,
row: { original: feature },
}: {
value: boolean;
row: { original: ListItemType };
}) => {
return (
<MemoizedFeatureToggleCell
value={value}
feature={feature}
projectId={projectId}
environmentName={environmentName}
isChangeRequestEnabled={isChangeRequestEnabled}
refetch={refetch}
onFeatureToggleSwitch={onFeatureToggleSwitch}
/>
);
};

1
frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch.tsx
View File

@ -159,6 +159,7 @@ export const useFeatureToggleSwitch: UseFeatureToggleSwitchType = (
config.environmentName,
shouldActivateDisabledStrategies,
);
setToastData({
type: 'success',
title: `Enabled in ${config.environmentName}`,

12
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

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

3
frontend/src/component/project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell.tsx
View File

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