- Searching for:
-
- {searchText}{' '}
- {searchableColumnsString
- ? ` in ${searchableColumnsString}`
- : ''}
+ {searchText ? (
+ <>
+ Searching for:
+
+ {searchText}{' '}
+ {searchableColumnsString
+ ? ` in ${searchableColumnsString}`
+ : ''}
+
+
+ ) : null}
+ {searchFilters.length > 0 ? (
+ <>
+ Filtering by:
+ {searchFilters.map((filter) => (
+
+ {filter.values.join(',')}{' '}
+ in {filter.header}. Options:{' '}
+ {[...new Set(filter.options)]
+ .slice(0, 10)
+ .join(', ')}
-
- }
- />
- 0}
- show={
- <>
- Filtering by:
- {searchFilters.map((filter) => (
-
-
- {filter.values.join(',')}
- {' '}
- in {filter.header}. Options:{' '}
- {[...new Set(filter.options)]
- .slice(0, 10)
- .join(', ')}
-
- ))}
-
- }
- />
+ ))}
+
+ ) : null}
);
};
diff --git a/frontend/src/component/common/Search/SearchSuggestions/SearchHistory.tsx b/frontend/src/component/common/Search/SearchSuggestions/SearchHistory.tsx
index d5653fd441e1..02b9869a86cb 100644
--- a/frontend/src/component/common/Search/SearchSuggestions/SearchHistory.tsx
+++ b/frontend/src/component/common/Search/SearchSuggestions/SearchHistory.tsx
@@ -1,6 +1,5 @@
import History from '@mui/icons-material/History';
import { Box, styled } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import type { VFC } from 'react';
import { StyledCode } from './SearchInstructions/SearchInstructions';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
@@ -33,23 +32,18 @@ export const SearchHistory: VFC = ({
});
};
- return (
-
-
-
-
- {savedQuery}
-
-
-
- }
- />
- );
+ return savedQuery ? (
+ <>
+
+
+
+ {savedQuery}
+
+
+
+ ) : null;
};
diff --git a/frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx b/frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx
index 03082dbf8d1e..fdf546615296 100644
--- a/frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx
+++ b/frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx
@@ -1,5 +1,4 @@
import { styled } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import type { VFC } from 'react';
import { onEnter } from '../onEnter';
@@ -57,41 +56,33 @@ export const SearchInstructions: VFC = ({
{filters.map((filter) => (
{filter.header}:{' '}
- 0}
- show={
+ {filter.options.length > 0 ? (
+
+ onClick(firstFilterOption(filter)),
+ )}
+ onClick={() => onClick(firstFilterOption(filter))}
+ >
+ {firstFilterOption(filter)}
+
+ ) : null}
+ {filter.options.length > 1 ? (
+ <>
+ {' or '}
- onClick(firstFilterOption(filter)),
+ onClick(secondFilterOption(filter)),
)}
- onClick={() =>
- onClick(firstFilterOption(filter))
- }
+ onClick={() => {
+ onClick(secondFilterOption(filter));
+ }}
>
- {firstFilterOption(filter)}
+ {secondFilterOption(filter)}
- }
- />
- 1}
- show={
- <>
- {' or '}
-
- onClick(secondFilterOption(filter)),
- )}
- onClick={() => {
- onClick(secondFilterOption(filter));
- }}
- >
- {secondFilterOption(filter)}
-
-
- }
- />
+
+ ) : null}
))}
diff --git a/frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx b/frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx
index 9ac99b590840..64a564a4120e 100644
--- a/frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx
+++ b/frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx
@@ -1,7 +1,6 @@
import FilterList from '@mui/icons-material/FilterList';
import History from '@mui/icons-material/History';
import { Box, Divider, styled } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import {
getColumnValues,
getFilterableColumns,
@@ -118,50 +117,36 @@ export const SearchSuggestions: VFC = ({
return (
-
-
-
-
- }
- />
+ {savedQuery ? (
+ <>
+
+
+
+ ) : null}
-
- }
- elseShow={
-
- }
- />
+ {searchContext.searchValue ? (
+
+ ) : (
+
+ )}
- 0}
- show='Combine filters and search: '
- />
+ {filters.length > 0 ? 'Combine filters and search: ' : null}
;
@@ -90,50 +89,42 @@ export const SegmentItem: VFC = ({
{segment.name}
-
- setIsOpen((value) => !value)}
- sx={{
- my: 0,
- ml: 'auto',
- fontSize: (theme) =>
- theme.typography.body2.fontSize,
- }}
- >
- {isOpen ? 'Close preview' : 'Preview'}
-
- }
- />
+ {headerContent ? headerContent : null}
+ {!isExpanded ? (
+
+ ) : null}
- 0}
- show={
-
- }
- elseShow={
-
- This segment has no constraints.
-
- }
- />
- }
- />
+ {constraintList ? (
+ constraintList
+ ) : (
+ 0}
+ show={
+
+ }
+ elseShow={
+
+ This segment has no constraints.
+
+ }
+ />
+ )}
);
diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
index 8d271268c5fb..745165862eeb 100644
--- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
+++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
@@ -8,7 +8,6 @@ import {
getFeatureStrategyIcon,
} from 'utils/strategyNames';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import type { PlaygroundStrategySchema } from 'openapi';
import { Badge } from '../Badge/Badge';
import { Link } from 'react-router-dom';
@@ -114,10 +113,9 @@ export const StrategyItemContainer: FC = ({
return (
- {orderNumber}}
- />
+ {orderNumber !== undefined ? (
+ {orderNumber}
+ ) : null}
= ({
draggable={Boolean(onDragStart)}
disabled={Boolean(strategy?.disabled)}
>
- (
-
-
-
- )}
- />
+ {onDragStart ? (
+
+
+
+ ) : null}
theme.palette.action.disabled,
@@ -157,35 +152,22 @@ export const StrategyItemContainer: FC = ({
maxLength={15}
text={formatStrategyName(String(strategy.name))}
/>
-
- {formatStrategyName(
- String(strategy.title),
- )}
-
- }
- />
+ {strategy.title ? (
+
+ {formatStrategyName(String(strategy.title))}
+
+ ) : null}
-
- {description}
-
- }
- />
+ {description ? (
+ {description}
+ ) : null}
- (
- <>
- Disabled
-
- )}
- />
+ {strategy?.disabled ? (
+ <>
+ Disabled
+
+ ) : null}
{
width: '100%',
}}
>
- {text}}
- elseShow={() => (
- {text}
- )}
- />
+ {text === 'AND' ? (
+ {text}
+ ) : (
+ {text}
+ )}
);
};
diff --git a/frontend/src/component/common/StringTruncator/StringTruncator.tsx b/frontend/src/component/common/StringTruncator/StringTruncator.tsx
index 74205701f83a..f1752e605823 100644
--- a/frontend/src/component/common/StringTruncator/StringTruncator.tsx
+++ b/frontend/src/component/common/StringTruncator/StringTruncator.tsx
@@ -1,5 +1,4 @@
import { Tooltip } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
interface IStringTruncatorProps {
text: string;
@@ -15,30 +14,26 @@ const StringTruncator = ({
className,
...rest
}: IStringTruncatorProps) => {
- return (
- maxLength}
- show={
-
-
- {text}
-
-
- }
- elseShow={{text}}
- />
+ return (text?.length ?? 0) > maxLength ? (
+
+
+ {text}
+
+
+ ) : (
+ {text}
);
};
diff --git a/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx b/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
index 0e897989cb44..2499f31923b5 100644
--- a/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
+++ b/frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx
@@ -2,7 +2,6 @@ import { useState, type VFC } from 'react';
import { IconButton } from '@mui/material';
import StarIcon from '@mui/icons-material/Star';
import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { TooltipResolver } from '../../TooltipResolver/TooltipResolver';
interface IFavoriteIconHeaderProps {
@@ -40,11 +39,11 @@ export const FavoriteIconHeader: VFC = ({
onClick={onToggle}
size='small'
>
- }
- elseShow={}
- />
+ {internalState ? (
+
+ ) : (
+
+ )}
);
diff --git a/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx b/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
index 34556e7de8fe..fa29058b098e 100644
--- a/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
+++ b/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
@@ -8,7 +8,6 @@ import {
import { TableCell } from '../TableCell/TableCell';
import { CellSortable } from '../SortableTableHeader/CellSortable/CellSortable';
import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { styled } from '@mui/material';
const HeaderCell = (header: Header) => {
@@ -100,37 +99,32 @@ export const PaginatedTable = ({
- 0 &&
- (totalItems || 0) > 25
- }
- show={
-
- tableInstance.setPagination({
- pageIndex: pagination.pageIndex + 1,
- pageSize: pagination.pageSize,
- })
- }
- fetchPrevPage={() =>
- tableInstance.setPagination({
- pageIndex: pagination.pageIndex - 1,
- pageSize: pagination.pageSize,
- })
- }
- setPageLimit={(pageSize) =>
- tableInstance.setPagination({
- pageIndex: 0,
- pageSize,
- })
- }
- />
- }
- />
+ {tableInstance.getRowModel().rows.length > 0 &&
+ (totalItems || 0) > 25 ? (
+
+ tableInstance.setPagination({
+ pageIndex: pagination.pageIndex + 1,
+ pageSize: pagination.pageSize,
+ })
+ }
+ fetchPrevPage={() =>
+ tableInstance.setPagination({
+ pageIndex: pagination.pageIndex - 1,
+ pageSize: pagination.pageSize,
+ })
+ }
+ setPageLimit={(pageSize) =>
+ tableInstance.setPagination({
+ pageIndex: 0,
+ pageSize,
+ })
+ }
+ />
+ ) : null}
);
};
diff --git a/frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx b/frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx
index b358bcdcf8a1..b641693fc8fd 100644
--- a/frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx
+++ b/frontend/src/component/common/Table/PaginationBar/PaginationBar.tsx
@@ -1,6 +1,5 @@
import type React from 'react';
import { Box, Typography, Button, styled } from '@mui/material';
-import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender';
import { ReactComponent as ArrowRight } from 'assets/icons/arrowRight.svg';
import { ReactComponent as ArrowLeft } from 'assets/icons/arrowLeft.svg';
@@ -82,33 +81,27 @@ export const PaginationBar: React.FC = ({
: ' '}
-
-
-
- }
- />
+ {hasPreviousPage ? (
+
+
+
+ ) : null}
Page {pageIndex + 1} of {pageCount}
-
-
-
- }
- />
+ {hasNextPage ? (
+
+
+
+ ) : null}
Show rows
diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
index 44a83cae7550..425305ad0531 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
@@ -9,7 +9,6 @@ import {
useState,
} from 'react';
import { Tooltip } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
import {
StyledButton,
@@ -114,42 +113,40 @@ export const CellSortable: FC = ({
isFlexGrow={isFlexGrow}
isSortable={isSortable}
>
-
-
+
+
-
-
- {children}
-
-
-
-
-
- {children}
-
-
-
-
-
- }
- elseShow={{children}
}
- />
+
+ {children}
+
+
+
+
+
+ {children}
+
+
+
+
+
+ ) : (
+ {children}
+ )}
);
};
diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx
index cacd9cb67f2d..5469e284188c 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx
@@ -1,9 +1,6 @@
import type { VFC } from 'react';
import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
-import UnfoldMoreOutlined from '@mui/icons-material/UnfoldMoreOutlined';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import classnames from 'classnames';
import type { Theme } from '@mui/material';
interface ISortArrowProps {
@@ -23,40 +20,35 @@ export const SortArrow: VFC = ({
isSorted: sorted,
isDesc: desc = false,
className,
-}) => (
- ({
- ...iconStyle(theme),
- })}
- className={className}
- fontSize='inherit'
- />
- }
- elseShow={
- ({
- ...iconStyle(theme),
- })}
- className={className}
- fontSize='inherit'
- />
- }
- />
- }
- elseShow={
- ({
- ...iconStyle(theme),
- })}
- className={classnames(className, 'hover-only')}
- fontSize='inherit'
- />
- }
- />
-);
+}) =>
+ sorted ? (
+ ({
+ ...iconStyle(theme),
+ })}
+ className={className}
+ fontSize='inherit'
+ />
+ }
+ elseShow={
+ ({
+ ...iconStyle(theme),
+ })}
+ className={className}
+ fontSize='inherit'
+ />
+ }
+ />
+ ) : (
+ ({
+ ...iconStyle(theme),
+ })}
+ className={className}
+ fontSize='inherit'
+ />
+ );
diff --git a/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx b/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
index 17344924ff95..38c21eab99eb 100644
--- a/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
+++ b/frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx
@@ -2,7 +2,6 @@ import type { VFC } from 'react';
import { Box, IconButton, styled } from '@mui/material';
import StarIcon from '@mui/icons-material/Star';
import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const StyledCell = styled(Box)(({ theme }) => ({
paddingLeft: theme.spacing(2),
@@ -37,22 +36,18 @@ export const FavoriteIconCell: VFC = ({
onClick,
}) => (
-
-
-
- }
- elseShow={
-
-
-
- }
- />
+ {value ? (
+
+
+
+ ) : (
+
+
+
+ )}
);
diff --git a/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx b/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx
index a8ab7f17165d..2e402244f70b 100644
--- a/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx
@@ -9,7 +9,6 @@ import { StyledDescription, StyledTitle } from '../LinkCell/LinkCell.styles';
import { Link } from 'react-router-dom';
import { Badge } from '../../../Badge/Badge';
import { HtmlTooltip } from '../../../HtmlTooltip/HtmlTooltip';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
interface IFeatureNameCellProps {
@@ -52,28 +51,20 @@ const CappedDescription: FC<{ text: string; searchQuery: string }> = ({
text,
searchQuery,
}) => {
- return (
- 40)}
- show={
- {text}
- }
- placement='bottom-start'
- arrow
- >
-
- {text}
-
-
- }
- elseShow={
-
- {text}
-
- }
- />
+ return text && text.length > 40 ? (
+ {text}}
+ placement='bottom-start'
+ arrow
+ >
+
+ {text}
+
+
+ ) : (
+
+ {text}
+
);
};
@@ -81,12 +72,10 @@ const CappedTag: FC<{ tag: string; children: ReactElement }> = ({
tag,
children,
}) => {
- return (
- 30}
- show={{children}}
- elseShow={children}
- />
+ return tag.length > 30 ? (
+ {children}
+ ) : (
+ children
);
};
@@ -184,10 +173,9 @@ const Tags: FC<{
onClick(tag3)}>{tag3}
)}
- 0}
- show={}
- />
+ {restTags.length > 0 ? (
+
+ ) : null}
);
};
@@ -280,31 +268,28 @@ export const PrimaryFeatureInfo: FC<{
feature={feature}
searchQuery={searchQuery}
/>
-
+ {dependencyType ? (
+
+ }
+ enterDelay={delay}
+ enterNextDelay={delay}
+ >
+
-
- {dependencyType}
-
-
- }
- />
+ {dependencyType}
+
+
+ ) : null}
);
};
@@ -313,21 +298,11 @@ const SecondaryFeatureInfo: FC<{
description: string;
searchQuery: string;
}> = ({ description, searchQuery }) => {
- return (
- ({ display: 'flex', gap: theme.spacing(1) })}
- >
-
-
- }
- />
- );
+ return description ? (
+ ({ display: 'flex', gap: theme.spacing(1) })}>
+
+
+ ) : null;
};
export const FeatureOverviewCell =
diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
index 68f866b788c4..99d697d7fde1 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
@@ -2,7 +2,6 @@ import type React from 'react';
import type { FC, VFC } from 'react';
import TimeAgo from 'react-timeago';
import { styled, Tooltip, useTheme } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
function shortenUnitName(unit?: string): string {
switch (unit) {
@@ -93,38 +92,28 @@ const Wrapper: FC<{
export const FeatureSeenCell: VFC = ({
value: lastSeenAt,
}) => {
- return (
- {
- return (
-
- {value}
- {shortenUnitName(unit)}
-
- );
- }}
- />
- }
- elseShow={
-
- –
-
- }
+ return lastSeenAt ? (
+ {
+ return (
+
+ {value}
+ {shortenUnitName(unit)}
+
+ );
+ }}
/>
+ ) : (
+
+ –
+
);
};
diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
index 81e941a1654b..4e5f7006b10d 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
@@ -1,7 +1,6 @@
-import { styled, type SxProps, type Theme, Typography } from '@mui/material';
+import { styled, type SxProps, type Theme } from '@mui/material';
import TimeAgo from 'react-timeago';
import type { ILastSeenEnvironments } from 'interfaces/featureToggle';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useLastSeenColors } from 'component/feature/FeatureView/FeatureEnvironmentSeen/useLastSeenColors';
import { LastSeenProgress } from './LastSeenProgress/LastSeenProgress';
@@ -83,84 +82,48 @@ export const LastSeenTooltip = ({
Last usage reported
-
- {environments?.map(({ name, lastSeenAt, yes, no }) => (
-
-
- {name}
-
-
- {
- const [, textColor] =
- getColor(unit);
- return (
-
- {`${value} ${unit}${
- value !== 1
- ? 's'
- : ''
- } ${suffix}`}
-
- );
- }}
- />
- }
- elseShow={
-
- no usage
-
- }
+ {Boolean(environments) && Boolean(environmentsHaveLastSeen) ? (
+
+ {environments?.map(({ name, lastSeenAt, yes, no }) => (
+
+
+ {name}
+
+
+ {lastSeenAt ? (
+ {
+ const [, textColor] =
+ getColor(unit);
+ return (
+
+ {`${value} ${unit}${
+ value !== 1 ? 's' : ''
+ } ${suffix}`}
+
+ );
+ }}
/>
-
-
-
- ))}
-
- }
- elseShow={
- {
- return (
-
- {`Reported ${value} ${unit}${
- value !== 1 ? 's' : ''
- } ${suffix}`}
-
- );
- }}
- />
- }
- />
+ ) : (
+
+ no usage
+
+ )}
+
+
+
+ ))}
+
+ ) : (
+ no usage
+ )}
Usage is reported from connected applications through metrics
diff --git a/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx b/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx
index 3aa5c699d242..48bb019559df 100644
--- a/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx
+++ b/frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx
@@ -3,7 +3,6 @@ import type { FC } from 'react';
import { Highlighter } from 'component/common/Highlighter/Highlighter';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { Box, styled } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
interface IHighlightCellProps {
@@ -49,27 +48,18 @@ export const HighlightCell: FC = ({
}) => {
const { searchQuery } = useSearchHighlightContext();
- const renderSubtitle = (
- 40 || subtitleTooltip),
- )}
- show={
-
-
-
- {subtitle}
-
-
-
- }
- elseShow={
+ const renderSubtitle =
+ subtitle && (subtitle.length > 40 || subtitleTooltip) ? (
+
{subtitle}
- }
- />
- );
+
+ ) : (
+
+ {subtitle}
+
+ );
return (
@@ -83,10 +73,7 @@ export const HighlightCell: FC = ({
{value}
{afterTitle}
-
+ {subtitle ? renderSubtitle : null}
);
};
diff --git a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
index 7ec25a43900e..caf595a54199 100644
--- a/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
+++ b/frontend/src/component/common/Table/cells/LinkCell/LinkCell.tsx
@@ -1,6 +1,5 @@
import type React from 'react';
import { Link as RouterLink } from 'react-router-dom';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Highlighter } from 'component/common/Highlighter/Highlighter';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
@@ -29,25 +28,18 @@ export const LinkCell: React.FC = ({
}) => {
const { searchQuery } = useSearchHighlightContext();
- const renderSubtitle = (
- 40)}
- show={
-
-
-
- {subtitle}
-
-
-
- }
- elseShow={
+ const renderSubtitle =
+ subtitle && subtitle.length > 40 ? (
+
{subtitle}
- }
- />
- );
+
+ ) : (
+
+ {subtitle}
+
+ );
const content = (
@@ -61,10 +53,7 @@ export const LinkCell: React.FC = ({
{title}
{children}
-
+ {subtitle ? renderSubtitle : null}
);
diff --git a/frontend/src/component/common/ThemeMode/ThemeMode.tsx b/frontend/src/component/common/ThemeMode/ThemeMode.tsx
index 67a6d3e582c5..80c20afef422 100644
--- a/frontend/src/component/common/ThemeMode/ThemeMode.tsx
+++ b/frontend/src/component/common/ThemeMode/ThemeMode.tsx
@@ -1,6 +1,5 @@
import UIContext from 'contexts/UIContext';
import { useContext } from 'react';
-import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
interface IThemeModeProps {
darkmode: JSX.Element;
@@ -10,11 +9,5 @@ interface IThemeModeProps {
export const ThemeMode = ({ darkmode, lightmode }: IThemeModeProps) => {
const { themeMode } = useContext(UIContext);
- return (
-
- );
+ return themeMode === 'dark' ? darkmode : lightmode;
};
diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
index 52b06f172615..4887249c3b53 100644
--- a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
+++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
@@ -4,7 +4,6 @@ import { useContext } from 'react';
import { IconButton, Tooltip } from '@mui/material';
import CheckMarkBadge from 'component/common/CheckmarkBadge/CheckMarkBadge';
import UIContext from 'contexts/UIContext';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import Close from '@mui/icons-material/Close';
import type { IToast } from 'interfaces/toast';
import { TOAST_TEXT } from 'utils/testIds';
@@ -71,12 +70,9 @@ const Toast = ({ title, text, type, confetti }: IToast) => {
{title}
-
{text}
- }
- />
+ {text ? (
+ {text}
+ ) : null}
diff --git a/frontend/src/component/common/UserAvatar/UserAvatar.tsx b/frontend/src/component/common/UserAvatar/UserAvatar.tsx
index 6c329c2ddd1a..fe23da1845ea 100644
--- a/frontend/src/component/common/UserAvatar/UserAvatar.tsx
+++ b/frontend/src/component/common/UserAvatar/UserAvatar.tsx
@@ -7,7 +7,6 @@ import {
} from '@mui/material';
import type { IUser } from 'interfaces/user';
import type { FC } from 'react';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { HtmlTooltip } from '../HtmlTooltip/HtmlTooltip';
const StyledAvatar = styled(Avatar)(({ theme }) => ({
width: theme.spacing(3.5),
@@ -90,11 +89,7 @@ export const UserAvatar: FC = ({
alt={user?.name || user?.email || user?.username || 'Gravatar'}
src={src || user?.imageUrl}
>
-
+ {fallback ? fallback : children}
);
diff --git a/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx b/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
index 4bed3acbe784..5198f19bf327 100644
--- a/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
+++ b/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
@@ -1,5 +1,4 @@
import Cancel from '@mui/icons-material/Cancel';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { styled } from '@mui/material';
interface IContextFormChipProps {
@@ -54,12 +53,9 @@ export const ContextFormChip = ({
{label}
- (
- {description}
- )}
- />
+ {description ? (
+ {description}
+ ) : null}
diff --git a/frontend/src/component/context/ContextList/AddContextButton.tsx b/frontend/src/component/context/ContextList/AddContextButton.tsx
index f8a548559f4d..65887491d890 100644
--- a/frontend/src/component/context/ContextList/AddContextButton.tsx
+++ b/frontend/src/component/context/ContextList/AddContextButton.tsx
@@ -2,7 +2,6 @@ import type { VFC } from 'react';
import { useNavigate } from 'react-router-dom';
import { useMediaQuery } from '@mui/material';
import Add from '@mui/icons-material/Add';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { CREATE_CONTEXT_FIELD } from 'component/providers/AccessProvider/permissions';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
@@ -13,29 +12,23 @@ export const AddContextButton: VFC = () => {
const smallScreen = useMediaQuery('(max-width:700px)');
const navigate = useNavigate();
- return (
- navigate('/context/create')}
- size='large'
- tooltipProps={{ title: 'Add context type' }}
- >
-
-
- }
- elseShow={
- navigate('/context/create')}
- permission={CREATE_CONTEXT_FIELD}
- color='primary'
- variant='contained'
- >
- New context field
-
- }
- />
+ return smallScreen ? (
+ navigate('/context/create')}
+ size='large'
+ tooltipProps={{ title: 'Add context type' }}
+ >
+
+
+ ) : (
+ navigate('/context/create')}
+ permission={CREATE_CONTEXT_FIELD}
+ color='primary'
+ variant='contained'
+ >
+ New context field
+
);
};
diff --git a/frontend/src/component/context/ContextList/ContextList/ContextList.tsx b/frontend/src/component/context/ContextList/ContextList/ContextList.tsx
index e2e5a7cf5a98..014f8e1a1474 100644
--- a/frontend/src/component/context/ContextList/ContextList/ContextList.tsx
+++ b/frontend/src/component/context/ContextList/ContextList/ContextList.tsx
@@ -10,7 +10,6 @@ import {
} from 'component/common/Table';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Dialogue as ConfirmDialogue } from 'component/common/Dialogue/Dialogue';
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import useContextsApi from 'hooks/api/actions/useContextsApi/useContextsApi';
@@ -212,27 +211,27 @@ const ContextList: VFC = () => {
- 0}
- show={
-
- No contexts found matching “
- {globalFilter}
- ”
-
- }
- elseShow={
-
- No contexts available. Get started by adding
- one.
-
- }
- />
- }
- />
+ {rows.length === 0 ? (
+ 0}
+ show={
+
+ No contexts found matching “
+ {globalFilter}
+ ”
+
+ }
+ elseShow={
+
+ No contexts available. Get started by adding one.
+
+ }
+ />
+ ) : (
+
+ No contexts available. Get started by adding one.
+
+ )}
{
open={plansOpen}
onClose={() => setPlansOpen(false)}
/>
-
- {
- setWelcomeOpen(false);
-
- setExpanded(false);
-
- trackEvent('demo-close', {
- props: {
- topic: 'welcome',
- step: 'welcome',
- },
- });
- }}
- onStart={() => {
- setWelcomeOpen(false);
-
- onStart();
-
- trackEvent('demo-start');
- }}
- />
- {
- setFinishOpen(false);
- setPlansOpen(true);
- }}
- onRestart={() => {
- setFinishOpen(false);
- onStart();
-
- trackEvent('demo-restart');
- }}
- />
- {
- setTopic(topic);
- setStep(0);
-
- setWelcomeOpen(false);
- setPlansOpen(false);
-
- trackEvent('demo-start-topic', {
- props: {
- topic: TOPICS[topic].title,
- },
- });
- }}
- topics={TOPICS}
- onWelcome={() => {
- closeGuide();
- setPlansOpen(false);
-
- setWelcomeOpen(true);
-
- trackEvent('demo-view-demo-link');
- }}
- />
-
-
- }
- />
+ {!isSmallScreen ? (
+ <>
+ {
+ setWelcomeOpen(false);
+
+ setExpanded(false);
+
+ trackEvent('demo-close', {
+ props: {
+ topic: 'welcome',
+ step: 'welcome',
+ },
+ });
+ }}
+ onStart={() => {
+ setWelcomeOpen(false);
+
+ onStart();
+
+ trackEvent('demo-start');
+ }}
+ />
+ {
+ setFinishOpen(false);
+ setPlansOpen(true);
+ }}
+ onRestart={() => {
+ setFinishOpen(false);
+ onStart();
+
+ trackEvent('demo-restart');
+ }}
+ />
+ {
+ setTopic(topic);
+ setStep(0);
+
+ setWelcomeOpen(false);
+ setPlansOpen(false);
+
+ trackEvent('demo-start-topic', {
+ props: {
+ topic: TOPICS[topic].title,
+ },
+ });
+ }}
+ topics={TOPICS}
+ onWelcome={() => {
+ closeGuide();
+ setPlansOpen(false);
+
+ setWelcomeOpen(true);
+
+ trackEvent('demo-view-demo-link');
+ }}
+ />
+
+
+ ) : null}
);
};
diff --git a/frontend/src/component/demo/DemoDialog/DemoDialogFinish/DemoDialogFinish.tsx b/frontend/src/component/demo/DemoDialog/DemoDialogFinish/DemoDialogFinish.tsx
index 97d2a3fe9e90..83334c0f80bd 100644
--- a/frontend/src/component/demo/DemoDialog/DemoDialogFinish/DemoDialogFinish.tsx
+++ b/frontend/src/component/demo/DemoDialog/DemoDialogFinish/DemoDialogFinish.tsx
@@ -1,7 +1,6 @@
import { Button, Typography, styled } from '@mui/material';
import { DemoDialog } from '../DemoDialog';
import Confetti from 'react-confetti';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const StyledActions = styled('div')(({ theme }) => ({
display: 'grid',
@@ -26,18 +25,15 @@ export const DemoDialogFinish = ({
onRestart,
}: IDemoDialogFinishProps) => (
<>
-
- }
- />
+ {open ? (
+
+ ) : null}
You finished the demo
diff --git a/frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx b/frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx
index 114f135467b6..5f263a879926 100644
--- a/frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx
+++ b/frontend/src/component/demo/DemoSteps/DemoStepTooltip/DemoStepTooltip.tsx
@@ -6,7 +6,6 @@ import {
alpha,
styled,
} from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import type {
ITutorialTopic,
ITutorialTopicStep,
@@ -112,45 +111,37 @@ export const DemoStepTooltip = ({
-
- {topics[topic].title}
-
- }
- />
+ {step.title ? (
+ step.title
+ ) : (
+
+ {topics[topic].title}
+
+ )}
{step.content}
- 0 || stepIndex > 0}
- show={
-
- }
- />
+ {topic > 0 || stepIndex > 0 ? (
+
+ ) : null}
- onNext(stepIndex)}
- variant='contained'
- sx={{ alignSelf: 'flex-end' }}
- data-testid='DEMO_NEXT_BUTTON'
- >
- {nextLabel}
-
- }
- />
+ {step.nextButton ? (
+
+ ) : null}
@@ -164,45 +155,34 @@ export const DemoStepTooltip = ({
-
- {topics[topic].title}
-
- }
- />
+ {step.title ? (
+ step.title
+ ) : (
+
+ {topics[topic].title}
+
+ )}
{step.content}
- 0 || stepIndex > 0}
- show={
-
- }
- />
+ {topic > 0 || stepIndex > 0 ? (
+
+ ) : null}
- onNext(stepIndex)}
- variant='contained'
- sx={{ alignSelf: 'flex-end' }}
- data-testid='DEMO_NEXT_BUTTON'
- >
- {nextLabel}
-
- }
- />
+ {step.nextButton ? (
+
+ ) : null}
diff --git a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
index 7f50086b104d..d840c63dc33d 100644
--- a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
+++ b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
@@ -13,7 +13,6 @@ import CheckCircle from '@mui/icons-material/CheckCircle';
import CircleOutlined from '@mui/icons-material/CircleOutlined';
import ExpandMore from '@mui/icons-material/ExpandMore';
import type { ITutorialTopic } from '../demo-topics';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { ReactComponent as StarsIcon } from 'assets/img/stars.svg';
const StyledAccordion = styled(Accordion)(({ theme }) => ({
@@ -209,11 +208,11 @@ export const DemoTopics = ({
selected={selected}
completed={completed}
>
- }
- elseShow={}
- />
+ {completed ? (
+
+ ) : (
+
+ )}
{topic.title}
diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
index 99b93248cfcf..9db45c80b76c 100644
--- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
+++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
@@ -10,7 +10,6 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import useToast from 'hooks/useToast';
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
import usePermissions from 'hooks/api/getters/usePermissions/usePermissions';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { PageContent } from 'component/common/PageContent/PageContent';
import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
@@ -72,83 +71,72 @@ const CreateEnvironment = () => {
navigate(GO_BACK);
};
- return (
-
-
- }
- />
- }
- >
-
+
-
-
- }
- elseShow={
- <>
- }
- >
-
-
- Currently Unleash does not support more than{' '}
- {environmentLimit} environments. If you need
- more please reach out.
-
-
-
-
-
-
- }
- />
+ ) : null
+ }
+ >
+
+
+
+ ) : (
+ <>
+ }>
+
+
+ Currently Unleash does not support more than{' '}
+ {environmentLimit} environments. If you need more please
+ reach out.
+
+
+
+
+
+
);
};
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCellPopover/EnvironmentActionCellPopover.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCellPopover/EnvironmentActionCellPopover.tsx
index 77b645b1e21a..1560d9d5e041 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCellPopover/EnvironmentActionCellPopover.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCellPopover/EnvironmentActionCellPopover.tsx
@@ -23,7 +23,6 @@ import Edit from '@mui/icons-material/Edit';
import CopyIcon from '@mui/icons-material/AddToPhotos';
import VisibilityOffOutlined from '@mui/icons-material/VisibilityOffOutlined';
import VisibilityOutlined from '@mui/icons-material/VisibilityOutlined';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const StyledMenuList = styled(MenuList)(({ theme }) => ({
padding: theme.spacing(1),
@@ -143,11 +142,11 @@ export const EnvironmentActionCellPopover = ({
disabled={!hasAccess || environment.protected}
>
- }
- elseShow={}
- />
+ {environment.enabled ? (
+
+ ) : (
+
+ )}
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
index ffca6514a1b1..d1c7e8e52456 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
@@ -30,7 +30,6 @@ import useApiTokensApi, {
type IApiTokenCreate,
} from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
import type { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const StyledForm = styled('form')(() => ({
display: 'flex',
@@ -339,31 +338,24 @@ export const EnvironmentCloneModal = ({
environment, so you can get started right
away.
-
-
- Which projects do you want this
- token to give access to?
-
-
- clearError(
- ErrorField.PROJECTS,
- )
- }
- />
-
- }
- />
+ {apiTokenGeneration ===
+ APITokenGeneration.NOW ? (
+ <>
+
+ Which projects do you want this
+ token to give access to?
+
+
+ clearError(ErrorField.PROJECTS)
+ }
+ />
+
+ ) : null}
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentProjectSelect/EnvironmentProjectSelect.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentProjectSelect/EnvironmentProjectSelect.tsx
index d3280263850e..d78cf33d1037 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentProjectSelect/EnvironmentProjectSelect.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentProjectSelect/EnvironmentProjectSelect.tsx
@@ -10,7 +10,6 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
import { caseInsensitiveSearch } from 'utils/search';
import useProjects from 'hooks/api/getters/useProjects/useProjects';
import { Fragment } from 'react';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { SelectAllButton } from 'component/admin/apiToken/ApiTokenForm/ProjectSelector/SelectProjectInput/SelectAllButton/SelectAllButton';
const StyledOption = styled('div')(({ theme }) => ({
@@ -102,15 +101,12 @@ export const EnvironmentProjectSelect = ({
const renderGroup = ({ key, children }: AutocompleteRenderGroupParams) => (
- 2}
- show={
-
- }
- />
+ {projectOptions.length > 2 ? (
+
+ ) : null}
{children}
);
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentDeprecateToggleDialog/EnvironmentDeprecateToggleDialog.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentDeprecateToggleDialog/EnvironmentDeprecateToggleDialog.tsx
index a57c469949be..21deee8a0c95 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentDeprecateToggleDialog/EnvironmentDeprecateToggleDialog.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentDeprecateToggleDialog/EnvironmentDeprecateToggleDialog.tsx
@@ -1,7 +1,6 @@
import { Alert } from '@mui/material';
import type React from 'react';
import type { IEnvironment } from 'interfaces/environments';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import { EnvironmentTableSingle } from 'component/environments/EnvironmentTable/EnvironmentTableSingle';
@@ -32,27 +31,21 @@ export const EnvironmentDeprecateToggleDialog = ({
setOpen(false);
}}
>
-
- Deprecating an environment will mark it as deprecated.
- Deprecated environments are set as not visible by
- default for new projects. Project owners are still able
- to override this setting in the project. This
- environment will still be visible in any current
- projects.
-
- }
- elseShow={
-
- Undeprecating an environment will no longer mark it as
- deprecated. An undeprecated environment will be set as
- visible by default for new projects.
-
- }
- />
-
+ {enabled ? (
+
+ Deprecating an environment will mark it as deprecated.
+ Deprecated environments are set as not visible by default
+ for new projects. Project owners are still able to override
+ this setting in the project. This environment will still be
+ visible in any current projects.
+
+ ) : (
+
+ Undeprecating an environment will no longer mark it as
+ deprecated. An undeprecated environment will be set as
+ visible by default for new projects.
+
+ )}
);
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
index f93712e0f45a..1398617fdf90 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
@@ -1,6 +1,5 @@
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import type { IEnvironment } from 'interfaces/environments';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Badge } from 'component/common/Badge/Badge';
import { Highlighter } from 'component/common/Highlighter/Highlighter';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
@@ -38,34 +37,30 @@ export const EnvironmentNameCell = ({
})}
>
{environment.name}
- Predefined}
- />
-
-
- Deprecated environment
-
-
- This environment is not auto-enabled for new
- projects. The project owner will need to
- manually enable it in the project.
-
-
- }
- describeChild
- arrow
- >
- Deprecated
-
- }
- />
+ {environment.protected ? (
+ Predefined
+ ) : null}
+ {!environment.enabled ? (
+
+
+ Deprecated environment
+
+
+ This environment is not auto-enabled for new
+ projects. The project owner will need to
+ manually enable it in the project.
+
+
+ }
+ describeChild
+ arrow
+ >
+ Deprecated
+
+ ) : null}
);
};
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx
index e2cb880a9a93..a00a31630c81 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx
@@ -17,7 +17,6 @@ import useEnvironmentApi, {
createSortOrderPayload,
} from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
import { formatUnknownError } from 'utils/formatUnknownError';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { EnvironmentRow } from './EnvironmentRow/EnvironmentRow';
import { EnvironmentNameCell } from './EnvironmentNameCell/EnvironmentNameCell';
import { EnvironmentActionCell } from './EnvironmentActionCell/EnvironmentActionCell';
@@ -123,27 +122,28 @@ export const EnvironmentTable = () => {
- 0}
- show={
-
- No environments found matching “
- {globalFilter}
- ”
-
- }
- elseShow={
-
- No environments available. Get started by adding
- one.
-
- }
- />
- }
- />
+ {rows.length === 0 ? (
+ 0}
+ show={
+
+ No environments found matching “
+ {globalFilter}
+ ”
+
+ }
+ elseShow={
+
+ No environments available. Get started by adding
+ one.
+
+ }
+ />
+ ) : (
+
+ No environments available. Get started by adding one.
+
+ )}
);
};
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx
index 1db478e66542..b7de0a0c7fec 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx
@@ -4,7 +4,6 @@ import { useTable } from 'react-table';
import { SortableTableHeader, Table, TableCell } from 'component/common/Table';
import { EnvironmentIconCell } from 'component/environments/EnvironmentTable/EnvironmentIconCell/EnvironmentIconCell';
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useMemo } from 'react';
const StyledTable = styled(Table)(({ theme }) => ({
@@ -62,21 +61,18 @@ export const EnvironmentTableSingle = ({
}) => (
{value}
- 0,
- )}
- >
- {original.enabledToggleCount === 1
- ? '1 toggle enabled'
- : `${original.enabledToggleCount} toggles enabled`}
-
- }
- />
+ {warnEnabledToggles ? (
+ 0,
+ )}
+ >
+ {original.enabledToggleCount === 1
+ ? '1 toggle enabled'
+ : `${original.enabledToggleCount} toggles enabled`}
+
+ ) : null}
),
},
diff --git a/frontend/src/component/events/EventCard/EventCard.tsx b/frontend/src/component/events/EventCard/EventCard.tsx
index 60d6cf0be3b4..dccac6a9ae37 100644
--- a/frontend/src/component/events/EventCard/EventCard.tsx
+++ b/frontend/src/component/events/EventCard/EventCard.tsx
@@ -1,5 +1,4 @@
import EventDiff from 'component/events/EventDiff/EventDiff';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMDHMS } from 'utils/formatDate';
import { Link } from 'react-router-dom';
@@ -89,59 +88,43 @@ const EventCard = ({ entry }: IEventCardProps) => {
{entry.type}
Changed by:
{entry.createdBy}
-
-
- Project:
-
-
-
- {entry.project}
-
-
-
- }
- />
-
-
- Feature:
-
-
-
- {entry.featureName}
-
-
-
- }
- />
-
-
- Environment:
-
- {entry.environment}
-
- }
- />
+ {entry.project ? (
+ <>
+ Project:
+
+
+ {entry.project}
+
+
+
+ ) : null}
+ {entry.featureName ? (
+ <>
+ Feature:
+
+
+ {entry.featureName}
+
+
+
+ ) : null}
+ {entry.environment ? (
+ <>
+
+ Environment:
+
+ {entry.environment}
+
+ ) : null}
-
- Changes:
-
-
- }
- />
+ {entry.data || entry.preData ? (
+
+ Changes:
+
+
+ ) : null}
);
};
diff --git a/frontend/src/component/events/EventLog/EventLog.tsx b/frontend/src/component/events/EventLog/EventLog.tsx
index 7cdffb402d32..ef735ad5880a 100644
--- a/frontend/src/component/events/EventLog/EventLog.tsx
+++ b/frontend/src/component/events/EventLog/EventLog.tsx
@@ -8,7 +8,6 @@ import { useState, useEffect } from 'react';
import { Search } from 'component/common/Search/Search';
import theme from 'themes/theme';
import { useLegacyEventSearch } from 'hooks/api/getters/useEventSearch/useLegacyEventSearch';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useOnVisible } from 'hooks/useOnVisible';
import { styled } from '@mui/system';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -99,14 +98,13 @@ const NewEventLog = ({ title, project, feature }: IEventLogProps) => {
} else {
return (
- {events.map((entry) => (
- }
- elseShow={() => }
- />
- ))}
+ {events.map((entry) =>
+ eventSettings.showData ? (
+
+ ) : (
+
+ ),
+ )}
);
}
@@ -137,19 +135,16 @@ const NewEventLog = ({ title, project, feature }: IEventLogProps) => {
/>
{resultComponent()}
- 25}
- show={
-
- }
- />
+ {total > 25 ? (
+
+ ) : null}
);
};
@@ -209,25 +204,20 @@ export const LegacyEventLog = ({ title, project, feature }: IEventLogProps) => {
}
>
- No events found.}
- />
- 0)}
- show={
-
- {cache?.map((entry) => (
- }
- elseShow={() => }
- />
- ))}
-
- }
- />
+ {cache && cache.length === 0 ? No events found.
: null}
+ {cache && cache.length > 0 ? (
+
+ {cache?.map((entry) =>
+ eventSettings.showData ? (
+
+ ) : (
+
+ ),
+ )}
+
+ ) : (
+
+ )}
);
diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
index caf6bddebdf5..96f1c3063774 100644
--- a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
+++ b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
@@ -16,7 +16,6 @@ import {
import FileCopy from '@mui/icons-material/FileCopy';
import { formatUnknownError } from 'utils/formatUnknownError';
import { trim } from 'component/common/util';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { getTogglePath } from 'utils/routePathHelpers';
import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
@@ -132,20 +131,14 @@ export const CopyFeatureToggle = () => {
Copy {featureId}
- {apiError}}
- />
-
- Copy functionality is disabled for this project because
- change request is enabled for at least one environment
- in this project.
-
- }
- />
+ {apiError ? {apiError} : null}
+ {isChangeRequestConfiguredInAnyEnv() ? (
+
+ Copy functionality is disabled for this project because
+ change request is enabled for at least one environment in
+ this project.
+
+ ) : null}
You are about to create a new feature flag by cloning the
@@ -157,14 +150,9 @@ export const CopyFeatureToggle = () => {
you can proceed.
-
- }
- />
+ {displayFeatureNamingInfo ? (
+
+ ) : null}
{
documentationLinkLabel='Feature flag types documentation'
formatApiCode={formatApiCode}
>
-
- Feature flag project limit reached. To
- be able to create more feature flags in this project
- please increase the feature flag upper limit in the
- project settings.
-
- }
- />
-
+ {projectFlagLimitReached ? (
+
+ Feature flag project limit reached. To be
+ able to create more feature flags in this project please
+ increase the feature flag upper limit in the project
+ settings.
+
+ ) : null}
{
clearErrors={clearErrors}
featureNaming={projectInfo.featureNaming}
Limit={
-
- }
- />
+ resourceLimitsEnabled ? (
+
+ ) : null
}
>
What feature do you want to depend on?
- {
- setParentValue({ status: 'enabled' });
- setParent(status);
- }}
- />
- }
- />
+ {showDependencyDialogue ? (
+ {
+ setParentValue({ status: 'enabled' });
+ setParent(status);
+ }}
+ />
+ ) : null}
-
-
- What feature status do you want to depend
- on?
-
-
-
- }
- />
+ {showStatus ? (
+
+
+ What feature status do you want to depend on?
+
+
+
+ ) : null}
-
-
- What variant do you want to depend
- on?
-
-
-
- )
- }
- />
+ {showVariants
+ ? parentValue.status === 'enabled_with_variants' && (
+
+
+ What variant do you want to depend on?
+
+
+
+ )
+ : null}
);
diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
index c72556e2b269..9ef700765a80 100644
--- a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
+++ b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
@@ -15,7 +15,6 @@ import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
import { projectFilterGenerator } from 'utils/projectFilterGenerator';
import FeatureProjectSelect from '../FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { trim } from 'component/common/util';
import Input from 'component/common/Input/Input';
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
@@ -149,12 +148,9 @@ const FeatureForm: React.FC = ({
What would you like to call your flag?
-
- }
- />
+ {displayFeatureNamingInfo ? (
+
+ ) : null}
= ({
{renderToggleDescription()}
-
- In which project do you want to save the flag?
-
- }
- />
+ {editable ? (
+
+ In which project do you want to save the flag?
+
+ ) : null}
{/* TODO: this can be removed after new create flag flow goes live */}
({
@@ -39,24 +38,18 @@ export const FeatureNamingPatternInfo: React.FC = ({
^{featureNaming.pattern}$
-
- Example
- {featureNaming?.example}
-
- }
- />
-
- Description
- {featureNaming?.description}
-
- }
- />
+ {featureNaming?.example ? (
+ <>
+ Example
+ {featureNaming?.example}
+
+ ) : null}
+ {featureNaming?.description ? (
+ <>
+ Description
+ {featureNaming?.description}
+
+ ) : null}
);
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
index 08dc98273084..653532d9de3f 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
@@ -5,7 +5,6 @@ import Add from '@mui/icons-material/Add';
import HelpOutline from '@mui/icons-material/HelpOutline';
import type { IConstraint } from 'interfaces/strategy';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import {
type IConstraintAccordionListRef,
@@ -98,74 +97,67 @@ export const FeatureStrategyConstraintAccordionList = forwardRef<
return (
-
-
- Constraints
-
-
- Constraints are advanced
- targeting rules that you can use
- to enable a feature flag for a
- subset of your users. Read more
- about constraints{' '}
-
- here
-
-
-
- }
- />
-
-
+
+ Constraints
+
+
+ Constraints are advanced targeting
+ rules that you can use to enable a
+ feature flag for a subset of your
+ users. Read more about constraints{' '}
+
+ here
+
+
+
+ }
/>
-
- ({
- marginTop: theme.spacing(2),
- marginBottom: theme.spacing(2),
- })}
- >
-
- }
+
+
+
+ ({
+ marginTop: theme.spacing(2),
+ marginBottom: theme.spacing(2),
+ })}
+ >
+ {resourceLimitsEnabled ? (
+
-
-
- }
- variant='outlined'
- color='primary'
- data-testid='ADD_CONSTRAINT_BUTTON'
- disabled={Boolean(limitReached)}
- >
- Add constraint
-
-
- }
- />
+ ) : null}
+
+
+ }
+ variant='outlined'
+ color='primary'
+ data-testid='ADD_CONSTRAINT_BUTTON'
+ disabled={Boolean(limitReached)}
+ >
+ Add constraint
+
+
+ ) : null}
);
},
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
index 25edd4794c78..437fdb8cb20e 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate.tsx
@@ -38,7 +38,6 @@ import { FeatureStrategyForm } from '../FeatureStrategyForm/FeatureStrategyForm'
import { NewStrategyVariants } from 'component/feature/StrategyTypes/NewStrategyVariants';
import { useUiFlag } from 'hooks/useUiFlag';
import { Limit } from 'component/common/Limit/Limit';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const useStrategyLimit = (strategyCount: number) => {
const resourceLimitsEnabled = useUiFlag('resourceLimits');
@@ -247,17 +246,14 @@ export const FeatureStrategyCreate = () => {
/>
}
Limit={
-
- }
- />
+ resourceLimitsEnabled ? (
+
+ ) : null
}
disabled={limitReached}
/>
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/CopyButton/CopyButton.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/CopyButton/CopyButton.tsx
index 4d849dca5fd4..916461322d4a 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/CopyButton/CopyButton.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/CopyButton/CopyButton.tsx
@@ -12,7 +12,6 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import type { IFeatureEnvironment } from 'interfaces/featureToggle';
import AccessContext from 'contexts/AccessContext';
import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
interface ICopyButtonProps {
environmentId: IFeatureEnvironment['name'];
@@ -84,14 +83,11 @@ export const CopyButton: VFC = ({
onClick={() => onClick(environment)}
disabled={!access}
>
-
-
-
- }
- />
+ {!access ? (
+
+
+
+ ) : null}
Copy from {environment}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
index 41035391d592..29a828504401 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
@@ -5,7 +5,6 @@ import useToast from 'hooks/useToast';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useFeatureImmutable } from 'hooks/api/getters/useFeature/useFeatureImmutable';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { CopyButton } from './CopyButton/CopyButton';
import { useChangeRequestAddStrategy } from 'hooks/useChangeRequestAddStrategy';
import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
@@ -142,7 +141,6 @@ export const FeatureStrategyEmpty = ({
/>
}
/>
-
You have not defined any strategies yet.
@@ -170,18 +168,15 @@ export const FeatureStrategyEmpty = ({
environmentId={environmentId}
matchWidth={canCopyFromOtherEnvironment}
/>
- environment.name,
- )}
- onClick={onCopyStrategies}
- />
- }
- />
+ {canCopyFromOtherEnvironment ? (
+ environment.name,
+ )}
+ onClick={onCopyStrategies}
+ />
+ ) : null}
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
index c3ed22619252..0479eaee082b 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
@@ -1,6 +1,5 @@
import type { FC } from 'react';
import { Link } from 'react-router-dom';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Alert } from '@mui/material';
import type { IFeatureToggle } from 'interfaces/featureToggle';
import { formatFeaturePath } from '../../FeatureStrategyEdit/FeatureStrategyEdit';
@@ -23,26 +22,19 @@ export const FeatureStrategyEnabled: FC = ({
const featurePageLink = feature flag page;
- return (
-
- This feature flag is currently enabled in the{' '}
- {environmentId} environment. Any changes
- made here will be available to users as soon as you hit{' '}
- save.
-
- }
- elseShow={
-
- This feature flag is currently disabled in the{' '}
- {environmentId} environment. Any changes
- made here will not take effect until the flag has been
- enabled on the {featurePageLink}.
-
- }
- />
+ return isFeatureEnabledInEnvironment(feature, environmentId) ? (
+
+ This feature flag is currently enabled in the{' '}
+ {environmentId} environment. Any changes made here
+ will be available to users as soon as you hit save.
+
+ ) : (
+
+ This feature flag is currently disabled in the{' '}
+ {environmentId} environment. Any changes made here
+ will not take effect until the flag has been enabled on the{' '}
+ {featurePageLink}.
+
);
};
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index 213f02d9d14b..fe5cb14707f3 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -22,7 +22,6 @@ import { FeatureStrategyEnabled } from './FeatureStrategyEnabled/FeatureStrategy
import { FeatureStrategyConstraints } from '../FeatureStrategyConstraints/FeatureStrategyConstraints';
import type { IFeatureToggle } from 'interfaces/featureToggle';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { STRATEGY_FORM_SUBMIT_ID } from 'utils/testIds';
import { useConstraintsValidation } from 'hooks/api/getters/useConstraintsValidation/useConstraintsValidation';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
@@ -354,14 +353,11 @@ export const FeatureStrategyForm = ({
{formatStrategyName(strategy.name || '')}
-
- {strategy.parameters?.rollout}%
-
- }
- />
+ {strategy.name === 'flexibleRollout' ? (
+
+ {strategy.parameters?.rollout}%
+
+ ) : null}
{foundEnvironment ? (
@@ -381,57 +377,45 @@ export const FeatureStrategyForm = ({
) : null}
-
-
- }
- />
- }
- />
+ {hasChangeRequestInReviewForEnvironment ? (
+ alert
+ ) : (
+
+ }
+ />
+ )}
-
- Custom strategies are deprecated. We recommend not
- adding them to any flags going forward and using the
- predefined strategies like Gradual rollout with{' '}
-
- constraints
- {' '}
- instead.
-
- }
- />
-
- }
- />
+ {!BuiltInStrategies.includes(strategy.name || 'default') ? (
+
+ Custom strategies are deprecated. We recommend not
+ adding them to any flags going forward and using the
+ predefined strategies like Gradual rollout with{' '}
+
+ constraints
+ {' '}
+ instead.
+
+ ) : null}
+ {!isChangeRequest ? (
+
+ ) : null}
-
-
- {
- setStrategy((prev) => ({
- ...prev,
- title,
- }));
- }}
- />
-
-
- setStrategy((strategyState) => ({
- ...strategyState,
- disabled: !strategyState.disabled,
- }))
- }
- />
+ {tab === 0 ? (
+ <>
+ {
+ setStrategy((prev) => ({
+ ...prev,
+ title,
+ }));
+ }}
+ />
-
-
- }
- />
+
+ setStrategy((strategyState) => ({
+ ...strategyState,
+ disabled: !strategyState.disabled,
+ }))
+ }
+ />
-
-
- Segmentation and constraints allow you to set
- filters on your strategies, so that they will
- only be evaluated for users and applications
- that match the specified preconditions.
-
-
+
+
+ ) : null}
-
-
- AND
-
-
-
- }
- />
+ {tab === 1 ? (
+ <>
+
+ Segmentation and constraints allow you to set
+ filters on your strategies, so that they will only
+ be evaluated for users and applications that match
+ the specified preconditions.
+
+
-
+
+ AND
+