Merge branch 'main' into alvin/docusaurus-36

Unleash · Nov 8, 2024 · 7c7343a · 7c7343a
2 parents 810998f + 0a250a7
commit 7c7343a
Show file tree

Hide file tree

Showing 169 changed files with 4,853 additions and 929 deletions.
diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
@@ -17,5 +17,5 @@ jobs:
         uses: actions/dependency-review-action@v4
         with:
           fail-on-severity: moderate
-          allow-licenses: Apache-2.0, MIT, BSD-2-Clause, BSD-3-Clause, ISC, 0BSD, CC0-1.0, Unlicense, BlueOak-1.0.0, CC-BY-4.0
+          allow-licenses: Apache-2.0, MIT, BSD-2-Clause, BSD-3-Clause, ISC, 0BSD, CC0-1.0, Unlicense, BlueOak-1.0.0, CC-BY-4.0, Artistic-2.0
           comment-summary-in-pr: always
diff --git a/frontend/cypress/integration/demo/demo.spec.ts b/frontend/cypress/integration/demo/demo.spec.ts
@@ -40,6 +40,7 @@ describe('demo', () => {
                     res.body.flags = {
                         ...res.body.flags,
                         demo: true,
+                        flagOverviewRedesign: true,
                     };
                 }
             });

diff --git a/frontend/cypress/integration/feature/feature.spec.ts b/frontend/cypress/integration/feature/feature.spec.ts
@@ -1,6 +1,7 @@
 ///<reference path="../../global.d.ts" />
 
 describe('feature', () => {
+    const baseUrl = Cypress.config().baseUrl;
     const randomId = String(Math.random()).split('.')[1];
     const featureToggleName = `unleash-e2e-${randomId}`;
     const projectName = `unleash-e2e-project-${randomId}`;
@@ -35,6 +36,19 @@ describe('feature', () => {
     beforeEach(() => {
         cy.login_UI();
         cy.visit('/features');
+
+        cy.intercept('GET', `${baseUrl}/api/admin/ui-config`, (req) => {
+            req.headers['cache-control'] =
+                'no-cache, no-store, must-revalidate';
+            req.on('response', (res) => {
+                if (res.body) {
+                    res.body.flags = {
+                        ...res.body.flags,
+                        flagOverviewRedesign: true,
+                    };
+                }
+            });
+        });
     });
 
     it('can create a feature flag', () => {

diff --git a/frontend/cypress/support/UI.ts b/frontend/cypress/support/UI.ts
@@ -227,7 +227,6 @@ export const deleteFeatureStrategy_UI = (
         },
     ).as('deleteUserStrategy');
     cy.visit(`/projects/${project}/features/${featureToggleName}`);
-    cy.get('[data-testid=FEATURE_ENVIRONMENT_ACCORDION_development]').click();
     cy.get('[data-testid=STRATEGY_REMOVE_MENU_BTN]').first().click();
     cy.get('[data-testid=STRATEGY_FORM_REMOVE_ID]').first().click();
     if (!shouldWait) return cy.get('[data-testid=DIALOGUE_CONFIRM_ID]').click();

diff --git a/frontend/package.json b/frontend/package.json
@@ -23,7 +23,7 @@
     "test:snapshot": "NODE_OPTIONS=\"${NODE_OPTIONS:-0} --no-experimental-fetch\" yarn test -u",
     "test:watch": "NODE_OPTIONS=\"${NODE_OPTIONS:-0} --no-experimental-fetch\" vitest watch",
     "lint:material:icons": "./check-imports.rc",
-    "lint": "biome lint src --apply",
+    "lint": "biome lint src --write",
     "lint:check": "biome check src",
     "fmt": "biome format src --write",
     "fmt:check": "biome check src",

diff --git a/frontend/src/assets/img/releaseTemplates.svg b/frontend/src/assets/img/releaseTemplates.svg
diff --git a/frontend/src/component/common/Highlight/Highlight.tsx b/frontend/src/component/common/Highlight/Highlight.tsx
@@ -1,5 +1,5 @@
 import { alpha, styled } from '@mui/material';
-import type { ReactNode } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { useHighlightContext } from './HighlightContext';
 import type { HighlightKey } from './HighlightProvider';
 
@@ -27,17 +27,23 @@ const StyledHighlight = styled('div', {
     },
 }));
 
-interface IHighlightProps {
+interface IHighlightProps extends HTMLAttributes<HTMLDivElement> {
     highlightKey: HighlightKey;
     children: ReactNode;
 }
 
-export const Highlight = ({ highlightKey, children }: IHighlightProps) => {
-    const { isHighlighted } = useHighlightContext();
+export const Highlight = forwardRef<HTMLDivElement, IHighlightProps>(
+    ({ highlightKey, children, ...props }, ref) => {
+        const { isHighlighted } = useHighlightContext();
 
-    return (
-        <StyledHighlight highlighted={isHighlighted(highlightKey)}>
-            {children}
-        </StyledHighlight>
-    );
-};
+        return (
+            <StyledHighlight
+                ref={ref}
+                highlighted={isHighlighted(highlightKey)}
+                {...props}
+            >
+                {children}
+            </StyledHighlight>
+        );
+    },
+);
diff --git a/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx b/frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx
@@ -1,4 +1,5 @@
 import { Button, styled } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const StyledTab = styled(Button)<{ selected: boolean }>(
     ({ theme, selected }) => ({
@@ -17,7 +18,8 @@ const StyledTab = styled(Button)<{ selected: boolean }>(
             transition: 'background-color 0.2s ease',
             color: theme.palette.text.primary,
             textAlign: 'left',
-            padding: theme.spacing(2, 4),
+            padding: theme.spacing(0, 2),
+            gap: theme.spacing(1),
             fontSize: theme.fontSizes.bodySize,
             fontWeight: selected
                 ? theme.fontWeight.bold
@@ -41,27 +43,53 @@ const StyledTab = styled(Button)<{ selected: boolean }>(
     }),
 );
 
+const StyledTabLabel = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
+}));
+
+const StyledTabDescription = styled('div')(({ theme }) => ({
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSizes.smallBody,
+    color: theme.palette.text.secondary,
+}));
+
 interface IVerticalTabProps {
     label: string;
+    description?: string;
     selected?: boolean;
     onClick: () => void;
-    icon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
 }
 
 export const VerticalTab = ({
     label,
+    description,
     selected,
     onClick,
-    icon,
+    startIcon,
+    endIcon,
 }: IVerticalTabProps) => (
     <StyledTab
         selected={Boolean(selected)}
+        className={selected ? 'selected' : ''}
         onClick={onClick}
         disableElevation
         disableFocusRipple
         fullWidth
     >
-        {label}
-        {icon}
+        {startIcon}
+        <StyledTabLabel>
+            {label}
+            <ConditionallyRender
+                condition={Boolean(description)}
+                show={
+                    <StyledTabDescription>{description}</StyledTabDescription>
+                }
+            />
+        </StyledTabLabel>
+        {endIcon}
     </StyledTab>
 );
diff --git a/frontend/src/component/common/VerticalTabs/VerticalTabs.tsx b/frontend/src/component/common/VerticalTabs/VerticalTabs.tsx
@@ -1,5 +1,6 @@
 import { styled } from '@mui/material';
 import { VerticalTab } from './VerticalTab/VerticalTab';
+import type { HTMLAttributes } from 'react';
 
 const StyledTabPage = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -15,11 +16,13 @@ const StyledTabPageContent = styled('div')(() => ({
     flexDirection: 'column',
 }));
 
-const StyledTabs = styled('div')(({ theme }) => ({
+const StyledTabs = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'fullWidth',
+})<{ fullWidth?: boolean }>(({ theme, fullWidth }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(1),
-    width: theme.spacing(30),
+    width: fullWidth ? '100%' : theme.spacing(30),
     flexShrink: 0,
     [theme.breakpoints.down('xl')]: {
         width: '100%',
@@ -29,38 +32,53 @@ const StyledTabs = styled('div')(({ theme }) => ({
 export interface ITab {
     id: string;
     label: string;
+    description?: string;
     path?: string;
     hidden?: boolean;
-    icon?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
 }
 
-interface IVerticalTabsProps {
+interface IVerticalTabsProps
+    extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     tabs: ITab[];
     value: string;
     onChange: (tab: ITab) => void;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 
 export const VerticalTabs = ({
     tabs,
     value,
     onChange,
     children,
-}: IVerticalTabsProps) => (
-    <StyledTabPage>
-        <StyledTabs>
-            {tabs
-                .filter((tab) => !tab.hidden)
-                .map((tab) => (
-                    <VerticalTab
-                        key={tab.id}
-                        label={tab.label}
-                        selected={tab.id === value}
-                        onClick={() => onChange(tab)}
-                        icon={tab.icon}
-                    />
-                ))}
-        </StyledTabs>
-        <StyledTabPageContent>{children}</StyledTabPageContent>
-    </StyledTabPage>
-);
+    ...props
+}: IVerticalTabsProps) => {
+    const verticalTabs = tabs
+        .filter((tab) => !tab.hidden)
+        .map((tab) => (
+            <VerticalTab
+                key={tab.id}
+                label={tab.label}
+                description={tab.description}
+                selected={tab.id === value}
+                onClick={() => onChange(tab)}
+                startIcon={tab.startIcon}
+                endIcon={tab.endIcon}
+            />
+        ));
+
+    if (!children) {
+        return (
+            <StyledTabs fullWidth {...props}>
+                {verticalTabs}
+            </StyledTabs>
+        );
+    }
+    return (
+        <StyledTabPage>
+            <StyledTabs {...props}>{verticalTabs}</StyledTabs>
+            <StyledTabPageContent>{children}</StyledTabPageContent>
+        </StyledTabPage>
+    );
+};
diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
@@ -131,7 +131,7 @@ export const TOPICS: ITutorialTopic[] = [
             },
             {
                 href: `/projects/${PROJECT}/features/demoApp.step2`,
-                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] button`,
+                target: 'button[data-testid="ADD_STRATEGY_BUTTON"]',
                 content: (
                     <Description>
                         Add a new strategy to this environment by using this
@@ -363,9 +363,10 @@ export const TOPICS: ITutorialTopic[] = [
                         strategies by using the arrow button.
                     </Description>
                 ),
+                optional: true,
             },
             {
-                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"].Mui-expanded a[data-testid="STRATEGY_EDIT-flexibleRollout"]`,
+                target: `a[data-testid="STRATEGY_EDIT-flexibleRollout"]`,
                 content: (
                     <Description>
                         Edit the existing gradual rollout strategy by using the
@@ -471,7 +472,7 @@ export const TOPICS: ITutorialTopic[] = [
             },
             {
                 href: `/projects/${PROJECT}/features/demoApp.step4`,
-                target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] button`,
+                target: 'button[data-testid="ADD_STRATEGY_BUTTON"]',
                 content: (
                     <Description>
                         Add a new strategy to this environment by using this

diff --git a/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx b/frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
@@ -96,7 +96,7 @@ export const EventTimelineHeader = ({
             <EventTimelineHeaderTip />
             <StyledCol>
                 <ConditionallyRender
-                    condition={Boolean(environment)}
+                    condition={Boolean(environment) && environments.length > 0}
                     show={() => (
                         <StyledFilter
                             select

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -171,11 +171,11 @@ const EnvironmentIconBox = styled(Box)(({ theme }) => ({
     alignItems: 'center',
 }));
 
-const EnvironmentTypography = styled(Typography)<{ enabled: boolean }>(
-    ({ theme, enabled }) => ({
-        fontWeight: enabled ? 'bold' : 'normal',
-    }),
-);
+const EnvironmentTypography = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'enabled',
+})<{ enabled: boolean }>(({ enabled }) => ({
+    fontWeight: enabled ? 'bold' : 'normal',
+}));
 
 const EnvironmentTypographyHeader = styled(Typography)(({ theme }) => ({
     marginRight: theme.spacing(0.5),

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
@@ -80,6 +80,7 @@ export const FeatureStrategyMenu = ({
     return (
         <StyledStrategyMenu onClick={(event) => event.stopPropagation()}>
             <PermissionButton
+                data-testid='ADD_STRATEGY_BUTTON'
                 permission={CREATE_FEATURE_STRATEGY}
                 projectId={projectId}
                 environmentId={environmentId}