feat: display strategy title and type (#3908)

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.test.tsx

@@ -0,0 +1,34 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { StrategyItemContainer } from './StrategyItemContainer';
+import { IFeatureStrategy } from 'interfaces/strategy';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer';
+
+const server = testServerSetup();
+testServerRoute(server, '/api/admin/ui-config', {
+    flags: { strategyImprovements: true },
+});
+
+test('should render strategy name, custom title and description', async () => {
+    const strategy: IFeatureStrategy = {
+        id: 'irrelevant',
+        name: 'strategy name',
+        title: 'custom title',
+        constraints: [],
+        parameters: {},
+    };
+
+    render(
+        <UIProviderContainer>
+            <StrategyItemContainer
+                strategy={strategy}
+                description={'description'}
+            />
+        </UIProviderContainer>
+    );
+
+    expect(screen.getByText('strategy name')).toBeInTheDocument();
+    expect(screen.getByText('description')).toBeInTheDocument();
+    await screen.findByText('custom title'); // behind async flag
+});

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx

@@ -50,6 +50,13 @@ const StyledDescription = styled('div')(({ theme }) => ({
         display: 'block',
     },
 }));
+const StyledCustomTitle = styled('div')(({ theme }) => ({
+    fontWeight: 'normal',
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+        display: 'block',
+    },
+}));
 const StyledHeaderContainer = styled('div')({
     flexDirection: 'column',
     justifyContent: 'center',
@@ -141,11 +148,19 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
                         <StringTruncator
                             maxWidth="400"
                             maxLength={15}
-                            text={formatStrategyName(
+                            text={formatStrategyName(strategy.name)}
-                                uiConfig?.flags?.strategyImprovements
+                        />
-                                    ? strategy.title || strategy.name
+                        <ConditionallyRender
-                                    : strategy.name
+                            condition={
-                            )}
+                                Boolean(
+                                    uiConfig?.flags?.strategyImprovements
+                                ) && Boolean(strategy.title)
+                            }
+                            show={
+                                <StyledCustomTitle>
+                                    {formatStrategyName(String(strategy.title))}
+                                </StyledCustomTitle>
+                            }
                         />
                         <ConditionallyRender
                             condition={Boolean(description)}