mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-23 00:22:19 +01:00
remove dead code
This commit is contained in:
andreas-unleash
parent
88f2bef1be
commit
d50edfa294
@ -1,178 +0,0 @@
|
||||
import { Dispatch, SetStateAction, useContext, VFC } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { List, ListItem } from '@mui/material';
|
||||
import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
import { IFlags } from 'interfaces/uiConfig';
|
||||
import { SearchField } from 'component/common/SearchField/SearchField';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import { PageContent } from 'component/common/PageContent/PageContent';
|
||||
import { PageHeader } from 'component/common/PageHeader/PageHeader';
|
||||
import AccessContext from 'contexts/AccessContext';
|
||||
import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
|
||||
import { FeatureToggleListItem } from './FeatureToggleListItem/FeatureToggleListItem';
|
||||
import { FeatureToggleListActions } from './FeatureToggleListActions/FeatureToggleListActions';
|
||||
import { CreateFeatureButton } from '../CreateFeatureButton/CreateFeatureButton';
|
||||
import { IFeaturesSort } from 'hooks/useFeaturesSort';
|
||||
import { FeatureSchema } from 'openapi';
|
||||
import { useStyles } from './styles';
|
||||
|
||||
interface IFeatureToggleListProps {
|
||||
features: FeatureSchema[];
|
||||
loading?: boolean;
|
||||
flags?: IFlags;
|
||||
filter: IFeaturesFilter;
|
||||
setFilter: Dispatch<SetStateAction<IFeaturesFilter>>;
|
||||
sort: IFeaturesSort;
|
||||
setSort: Dispatch<SetStateAction<IFeaturesSort>>;
|
||||
onRevive?: (feature: string) => void;
|
||||
inProject?: boolean;
|
||||
isArchive?: boolean;
|
||||
}
|
||||
|
||||
const loadingFeaturesPlaceholder: FeatureSchema[] = Array(10)
|
||||
.fill({
|
||||
createdAt: '2021-03-19T09:16:21.329Z',
|
||||
description: ' ',
|
||||
enabled: true,
|
||||
lastSeenAt: '2021-03-24T10:46:38.036Z',
|
||||
name: '',
|
||||
project: 'default',
|
||||
stale: true,
|
||||
strategies: [],
|
||||
variants: [],
|
||||
type: 'release',
|
||||
archived: false,
|
||||
environments: [],
|
||||
impressionData: false,
|
||||
})
|
||||
.map((feature, index) => ({ ...feature, name: `${index}` })); // ID for React key
|
||||
|
||||
export const FeatureToggleList: VFC<IFeatureToggleListProps> = ({
|
||||
features,
|
||||
onRevive,
|
||||
inProject,
|
||||
isArchive,
|
||||
loading,
|
||||
flags,
|
||||
filter,
|
||||
setFilter,
|
||||
sort,
|
||||
setSort,
|
||||
}) => {
|
||||
const { hasAccess } = useContext(AccessContext);
|
||||
const { classes: styles } = useStyles();
|
||||
const smallScreen = useMediaQuery('(max-width:800px)');
|
||||
const mobileView = useMediaQuery('(max-width:600px)');
|
||||
|
||||
const setFilterQuery = (v: string) => {
|
||||
const query = v && typeof v === 'string' ? v.trim() : '';
|
||||
setFilter(prev => ({ ...prev, query }));
|
||||
};
|
||||
|
||||
const renderFeatures = () => {
|
||||
if (loading) {
|
||||
return loadingFeaturesPlaceholder.map(feature => (
|
||||
<FeatureToggleListItem
|
||||
key={feature.name}
|
||||
feature={feature}
|
||||
onRevive={onRevive}
|
||||
hasAccess={hasAccess}
|
||||
className={'skeleton'}
|
||||
flags={flags}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
||||
return (
|
||||
<ConditionallyRender
|
||||
condition={features.length > 0}
|
||||
show={features.map(feature => (
|
||||
<FeatureToggleListItem
|
||||
key={feature.name}
|
||||
feature={feature}
|
||||
onRevive={onRevive}
|
||||
hasAccess={hasAccess}
|
||||
flags={flags}
|
||||
inProject={inProject}
|
||||
/>
|
||||
))}
|
||||
elseShow={
|
||||
<ListItem className={styles.emptyStateListItem}>
|
||||
No archived features.
|
||||
</ListItem>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const searchResultsHeader = filter.query
|
||||
? ` (${features.length} matches)`
|
||||
: '';
|
||||
|
||||
const headerTitle = isArchive
|
||||
? inProject
|
||||
? `Project Archived Features ${searchResultsHeader}`
|
||||
: `Archived Features ${searchResultsHeader}`
|
||||
: `Features ${searchResultsHeader}`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className={classnames(styles.searchBarContainer, {
|
||||
dense: inProject,
|
||||
})}
|
||||
>
|
||||
<SearchField
|
||||
initialValue={filter.query}
|
||||
updateValue={setFilterQuery}
|
||||
showValueChip={!mobileView}
|
||||
className={classnames(styles.searchBar, {
|
||||
skeleton: loading,
|
||||
})}
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={!mobileView && !isArchive}
|
||||
show={<Link to="/archive">Archive</Link>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PageContent
|
||||
header={
|
||||
<PageHeader
|
||||
loading={loading}
|
||||
title={headerTitle}
|
||||
actions={
|
||||
<div className={styles.actionsContainer}>
|
||||
<ConditionallyRender
|
||||
condition={!smallScreen}
|
||||
show={
|
||||
<FeatureToggleListActions
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
sort={sort}
|
||||
setSort={setSort}
|
||||
loading={loading}
|
||||
inProject={inProject}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={!isArchive}
|
||||
show={
|
||||
<CreateFeatureButton
|
||||
filter={filter}
|
||||
loading={Boolean(loading)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<List>{renderFeatures()}</List>
|
||||
</PageContent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,99 +0,0 @@
|
||||
import { Dispatch, MouseEventHandler, SetStateAction, VFC } from 'react';
|
||||
import { MenuItem, Typography } from '@mui/material';
|
||||
import DropdownMenu from 'component/common/DropdownMenu/DropdownMenu';
|
||||
import ProjectSelect from 'component/common/ProjectSelect/ProjectSelect';
|
||||
import useLoading from 'hooks/useLoading';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
import {
|
||||
createFeaturesFilterSortOptions,
|
||||
FeaturesSortType,
|
||||
IFeaturesSort,
|
||||
} from 'hooks/useFeaturesSort';
|
||||
import { useStyles } from './styles';
|
||||
import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
|
||||
|
||||
let sortOptions = createFeaturesFilterSortOptions();
|
||||
|
||||
interface IFeatureToggleListActionsProps {
|
||||
filter: IFeaturesFilter;
|
||||
setFilter: Dispatch<SetStateAction<IFeaturesFilter>>;
|
||||
sort: IFeaturesSort;
|
||||
setSort: Dispatch<SetStateAction<IFeaturesSort>>;
|
||||
loading?: boolean;
|
||||
inProject?: boolean;
|
||||
}
|
||||
|
||||
export const FeatureToggleListActions: VFC<IFeatureToggleListActionsProps> = ({
|
||||
filter,
|
||||
setFilter,
|
||||
sort,
|
||||
setSort,
|
||||
loading = false,
|
||||
inProject,
|
||||
}) => {
|
||||
const { classes: styles } = useStyles();
|
||||
const { uiConfig } = useUiConfig();
|
||||
const ref = useLoading(loading);
|
||||
|
||||
const handleSort: MouseEventHandler = e => {
|
||||
const type = (e.target as Element)
|
||||
.getAttribute('data-target')
|
||||
?.trim() as FeaturesSortType;
|
||||
if (type) {
|
||||
setSort(prev => ({ ...prev, type }));
|
||||
}
|
||||
};
|
||||
|
||||
const selectedOption =
|
||||
sortOptions.find(o => o.type === sort.type) || sortOptions[0];
|
||||
|
||||
if (inProject) {
|
||||
sortOptions = sortOptions.filter(option => option.type !== 'project');
|
||||
}
|
||||
|
||||
const renderSortingOptions = () =>
|
||||
sortOptions.map(option => (
|
||||
<MenuItem
|
||||
style={{ fontSize: '14px' }}
|
||||
key={option.type}
|
||||
disabled={option.type === sort.type}
|
||||
data-target={option.type}
|
||||
>
|
||||
{option.name}
|
||||
</MenuItem>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className={styles.actions} ref={ref}>
|
||||
<Typography variant="body2" data-loading>
|
||||
Sorted by:
|
||||
</Typography>
|
||||
<DropdownMenu
|
||||
id={'sorting'}
|
||||
label={`By ${selectedOption.name}`}
|
||||
callback={handleSort}
|
||||
renderOptions={renderSortingOptions}
|
||||
title="Sort by"
|
||||
style={{ textTransform: 'lowercase', fontWeight: 'normal' }}
|
||||
data-loading
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={uiConfig.flags.P && !inProject}
|
||||
show={
|
||||
<ProjectSelect
|
||||
currentProjectId={filter.project}
|
||||
updateCurrentProject={project =>
|
||||
setFilter(prev => ({ ...prev, project }))
|
||||
}
|
||||
style={{
|
||||
textTransform: 'lowercase',
|
||||
fontWeight: 'normal',
|
||||
}}
|
||||
data-loading
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,12 +0,0 @@
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
export const useStyles = makeStyles()({
|
||||
actions: {
|
||||
'& > *': {
|
||||
margin: '0 0.25rem',
|
||||
},
|
||||
marginRight: '0.25rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
@ -1,239 +0,0 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { basePath } from 'utils/formatPath';
|
||||
import { createPersistentGlobalStateHook } from './usePersistentGlobalState';
|
||||
import {
|
||||
expired,
|
||||
getDiffInDays,
|
||||
toggleExpiryByTypeMap,
|
||||
} from 'component/Reporting/utils';
|
||||
import { FeatureSchema } from 'openapi';
|
||||
|
||||
export type FeaturesSortType =
|
||||
| 'name'
|
||||
| 'expired'
|
||||
| 'type'
|
||||
| 'enabled'
|
||||
| 'stale'
|
||||
| 'created'
|
||||
| 'archived'
|
||||
| 'last-seen'
|
||||
| 'status'
|
||||
| 'project';
|
||||
|
||||
export interface IFeaturesSort {
|
||||
type: FeaturesSortType;
|
||||
desc?: boolean;
|
||||
}
|
||||
|
||||
export interface IFeaturesSortOutput {
|
||||
sort: IFeaturesSort;
|
||||
sorted: FeatureSchema[];
|
||||
setSort: React.Dispatch<React.SetStateAction<IFeaturesSort>>;
|
||||
}
|
||||
|
||||
export interface IFeaturesFilterSortOption {
|
||||
type: FeaturesSortType;
|
||||
name: string;
|
||||
}
|
||||
|
||||
// Store the features sort state globally, and in localStorage.
|
||||
// When changing the format of IFeaturesSort, change the version as well.
|
||||
const useFeaturesSortState = createPersistentGlobalStateHook<IFeaturesSort>(
|
||||
`${basePath}:useFeaturesSort:v1`,
|
||||
{ type: 'name' }
|
||||
);
|
||||
|
||||
export const useFeaturesSort = (
|
||||
features: FeatureSchema[]
|
||||
): IFeaturesSortOutput => {
|
||||
const [sort, setSort] = useFeaturesSortState();
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
return sortFeatures(features, sort);
|
||||
}, [features, sort]);
|
||||
|
||||
return {
|
||||
setSort,
|
||||
sort,
|
||||
sorted,
|
||||
};
|
||||
};
|
||||
|
||||
export const createFeaturesFilterSortOptions =
|
||||
(): IFeaturesFilterSortOption[] => {
|
||||
return [
|
||||
{ type: 'name', name: 'Name' },
|
||||
{ type: 'type', name: 'Type' },
|
||||
{ type: 'enabled', name: 'Enabled' },
|
||||
{ type: 'stale', name: 'Stale' },
|
||||
{ type: 'status', name: 'Status' },
|
||||
{ type: 'created', name: 'Created' },
|
||||
{ type: 'archived', name: 'Archived' },
|
||||
{ type: 'last-seen', name: 'Last seen' },
|
||||
{ type: 'project', name: 'Project' },
|
||||
];
|
||||
};
|
||||
|
||||
const sortAscendingFeatures = (
|
||||
features: FeatureSchema[],
|
||||
sort: IFeaturesSort
|
||||
): FeatureSchema[] => {
|
||||
switch (sort.type) {
|
||||
case 'enabled':
|
||||
return sortByEnabled(features);
|
||||
case 'stale':
|
||||
return sortByStale(features);
|
||||
case 'created':
|
||||
return sortByCreated(features);
|
||||
case 'archived':
|
||||
return sortByArchived(features);
|
||||
case 'last-seen':
|
||||
return sortByLastSeen(features);
|
||||
case 'name':
|
||||
return sortByName(features);
|
||||
case 'project':
|
||||
return sortByProject(features);
|
||||
case 'type':
|
||||
return sortByType(features);
|
||||
case 'expired':
|
||||
return sortByExpired(features);
|
||||
case 'status':
|
||||
return sortByStatus(features);
|
||||
default:
|
||||
console.error(`Unknown feature sort type: ${sort.type}`);
|
||||
return features;
|
||||
}
|
||||
};
|
||||
|
||||
const sortFeatures = (
|
||||
features: FeatureSchema[],
|
||||
sort: IFeaturesSort
|
||||
): FeatureSchema[] => {
|
||||
const sorted = sortAscendingFeatures(features, sort);
|
||||
|
||||
if (sort.desc) {
|
||||
return [...sorted].reverse();
|
||||
}
|
||||
|
||||
return sorted;
|
||||
};
|
||||
|
||||
const sortByEnabled = (
|
||||
features: Readonly<FeatureSchema[]>
|
||||
): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) =>
|
||||
a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1
|
||||
);
|
||||
};
|
||||
|
||||
const sortByStale = (features: Readonly<FeatureSchema[]>): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) =>
|
||||
a.stale === b.stale ? 0 : a.stale ? -1 : 1
|
||||
);
|
||||
};
|
||||
|
||||
const sortByLastSeen = (
|
||||
features: Readonly<FeatureSchema[]>
|
||||
): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) =>
|
||||
a.lastSeenAt && b.lastSeenAt
|
||||
? compareNullableDates(b.lastSeenAt, a.lastSeenAt)
|
||||
: a.lastSeenAt
|
||||
? -1
|
||||
: b.lastSeenAt
|
||||
? 1
|
||||
: compareNullableDates(b.createdAt, a.createdAt)
|
||||
);
|
||||
};
|
||||
|
||||
const sortByCreated = (
|
||||
features: Readonly<FeatureSchema[]>
|
||||
): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) =>
|
||||
compareNullableDates(b.createdAt, a.createdAt)
|
||||
);
|
||||
};
|
||||
|
||||
const sortByArchived = (
|
||||
features: Readonly<FeatureSchema[]>
|
||||
): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) =>
|
||||
compareNullableDates(b.archivedAt, a.archivedAt)
|
||||
);
|
||||
};
|
||||
|
||||
const sortByName = (features: Readonly<FeatureSchema[]>): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) => a.name.localeCompare(b.name));
|
||||
};
|
||||
|
||||
const sortByProject = (
|
||||
features: Readonly<FeatureSchema[]>
|
||||
): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) =>
|
||||
a.project && b.project
|
||||
? a.project.localeCompare(b.project)
|
||||
: a.project
|
||||
? 1
|
||||
: b.project
|
||||
? -1
|
||||
: 0
|
||||
);
|
||||
};
|
||||
|
||||
const sortByType = (features: Readonly<FeatureSchema[]>): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) =>
|
||||
a.type && b.type
|
||||
? a.type.localeCompare(b.type)
|
||||
: a.type
|
||||
? 1
|
||||
: b.type
|
||||
? -1
|
||||
: 0
|
||||
);
|
||||
};
|
||||
|
||||
const compareNullableDates = (
|
||||
a: Date | null | undefined,
|
||||
b: Date | null | undefined
|
||||
): number => {
|
||||
return a && b ? a?.getTime?.() - b?.getTime?.() : a ? 1 : b ? -1 : 0;
|
||||
};
|
||||
|
||||
const sortByExpired = (
|
||||
features: Readonly<FeatureSchema[]>
|
||||
): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) => {
|
||||
const now = new Date();
|
||||
const dateA = a.createdAt!;
|
||||
const dateB = b.createdAt!;
|
||||
|
||||
const diffA = getDiffInDays(dateA, now);
|
||||
const diffB = getDiffInDays(dateB, now);
|
||||
|
||||
if (!expired(diffA, a.type!) && expired(diffB, b.type!)) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (expired(diffA, a.type!) && !expired(diffB, b.type!)) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
const expiration = toggleExpiryByTypeMap as Record<string, number>;
|
||||
const expiredByA = a.type ? diffA - expiration[a.type] : 0;
|
||||
const expiredByB = b.type ? diffB - expiration[b.type] : 0;
|
||||
|
||||
return expiredByB - expiredByA;
|
||||
});
|
||||
};
|
||||
|
||||
const sortByStatus = (features: Readonly<FeatureSchema[]>): FeatureSchema[] => {
|
||||
return [...features].sort((a, b) => {
|
||||
if (a.stale) {
|
||||
return 1;
|
||||
} else if (b.stale) {
|
||||
return -1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user