Merge branch 'main' into task/Add_strategy_information_to_playground_results

frontend/.github/workflows/release_changelog.yml

@@ -22,5 +22,6 @@ jobs:
           tag_name: ${{ github.ref }}
           release_name: ${{ github.ref }}
           body: ${{ steps.github_release.outputs.changelog }}
+          prerelease: ${{ contains(github.ref, 'beta') || contains(github.ref, 'alpha') }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN}}

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unleash-frontend",
   "description": "unleash your features",
-  "version": "4.14.0-beta.6",
+  "version": "4.14.1",
   "keywords": [
     "unleash",
     "feature toggle",

frontend/src/component/admin/groups/Group/Group.tsx

@@ -132,13 +132,7 @@ export const Group: VFC = () => {
                 align: 'center',
                 Cell: ({ row: { original: rowUser } }: any) => (
                     <ActionCell>
-                        <Tooltip
+                        <Tooltip title="Edit user" arrow describeChild>
-                            title="Edit user"
-                            arrow
-                            placement="bottom-end"
-                            describeChild
-                            enterDelay={1000}
-                        >
                             <IconButton
                                 onClick={() => {
                                     setSelectedUser(rowUser);
@@ -151,9 +145,7 @@ export const Group: VFC = () => {
                         <Tooltip
                             title="Remove user from group"
                             arrow
-                            placement="bottom-end"
                             describeChild
-                            enterDelay={1000}
                         >
                             <IconButton
                                 onClick={() => {

frontend/src/component/admin/groups/GroupForm/GroupForm.tsx

@@ -24,6 +24,10 @@ const StyledInput = styled(Input)(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
+const StyledGroupFormUsersTableWrapper = styled('div')(({ theme }) => ({
+    marginBottom: theme.spacing(6),
+}));
+
 const StyledButtonContainer = styled('div')(() => ({
     marginTop: 'auto',
     display: 'flex',
@@ -101,10 +105,12 @@ export const GroupForm: FC<IGroupForm> = ({
                             users={users}
                             setUsers={setUsers}
                         />
+                        <StyledGroupFormUsersTableWrapper>
                             <GroupFormUsersTable
                                 users={users}
                                 setUsers={setUsers}
                             />
+                        </StyledGroupFormUsersTableWrapper>
                     </>
                 }
             />

frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx

@@ -83,9 +83,7 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
                         <Tooltip
                             title="Remove user from group"
                             arrow
-                            placement="bottom-end"
                             describeChild
-                            enterDelay={1000}
                         >
                             <IconButton
                                 onClick={() =>

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx

@@ -102,11 +102,9 @@ export const GroupCard = ({ group }: IGroupCardProps) => {
                                 ))}
                                 elseShow={
                                     <Tooltip
-                                        title="This project is not used in any project"
+                                        title="This group is not used in any project"
                                         arrow
-                                        placement="bottom-end"
                                         describeChild
-                                        enterDelay={1000}
                                     >
                                         <Badge>Not used</Badge>
                                     </Tooltip>

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx

@@ -52,13 +52,7 @@ export const GroupCardActions: FC<IGroupCardActions> = ({
                 e.stopPropagation();
             }}
         >
-            <Tooltip
+            <Tooltip title="Group actions" arrow describeChild>
-                title="Group actions"
-                arrow
-                placement="bottom-end"
-                describeChild
-                enterDelay={1000}
-            >
                 <IconButton
                     id={id}
                     aria-controls={open ? menuId : undefined}

frontend/src/component/common/PercentageCircle/PercentageCircle.tsx

@@ -5,12 +5,14 @@ interface IPercentageCircleProps {
     percentage: number;
     secondaryPieColor?: string;
     className?: string;
+    hideNumber?: boolean;
 }
 
 const PercentageCircle = ({
     styles,
     percentage,
     secondaryPieColor,
+    hideNumber,
     ...rest
 }: IPercentageCircleProps) => {
     const theme = useTheme();
@@ -35,9 +37,10 @@ const PercentageCircle = ({
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
+                    fontSize: '12px',
                 }}
             >
-                100%
+                {hideNumber ? null : '100%'}
             </div>
         );
     }

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx

@@ -8,6 +8,7 @@ import { FeatureStrategyMenu } from '../FeatureStrategyMenu/FeatureStrategyMenu'
 import { PresetCard } from './PresetCard/PresetCard';
 import { useStyles } from './FeatureStrategyEmpty.styles';
 import { formatUnknownError } from 'utils/formatUnknownError';
+import { useFeatureImmutable } from 'hooks/api/getters/useFeature/useFeatureImmutable';
 import { getFeatureStrategyIcon } from 'utils/strategyNames';
 
 interface IFeatureStrategyEmptyProps {
@@ -25,9 +26,15 @@ export const FeatureStrategyEmpty = ({
     const { addStrategyToFeature } = useFeatureStrategyApi();
     const { setToastData, setToastApiError } = useToast();
     const { refetchFeature } = useFeature(projectId, featureId);
+    const { refetchFeature: refetchFeatureImmutable } = useFeatureImmutable(
+        projectId,
+        featureId
+    );
 
     const onAfterAddStrategy = () => {
         refetchFeature();
+        refetchFeatureImmutable();
+
         setToastData({
             title: 'Strategy created',
             text: 'Successfully created strategy',
@@ -96,6 +103,8 @@ export const FeatureStrategyEmpty = ({
                     title="Standard strategy"
                     Icon={getFeatureStrategyIcon('default')}
                     onClick={onAddSimpleStrategy}
+                    projectId={projectId}
+                    environmentId={environmentId}
                 >
                     The standard strategy is strictly on/off for your entire
                     userbase.
@@ -104,6 +113,8 @@ export const FeatureStrategyEmpty = ({
                     title="Gradual rollout"
                     Icon={getFeatureStrategyIcon('flexibleRollout')}
                     onClick={onAddGradualRolloutStrategy}
+                    projectId={projectId}
+                    environmentId={environmentId}
                 >
                     Roll out to a percentage of your userbase.
                 </PresetCard>

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/PresetCard/PresetCard.tsx

@@ -1,8 +1,12 @@
 import { ElementType, FC } from 'react';
-import { Button, Card, CardContent, styled, Typography } from '@mui/material';
+import { Card, CardContent, Typography, styled, Box } from '@mui/material';
+import PermissionButton from 'component/common/PermissionButton/PermissionButton';
+import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
 
 interface IPresetCardProps {
     title: string;
+    projectId: string;
+    environmentId: string;
     onClick: () => void;
     Icon: ElementType;
 }
@@ -17,6 +21,8 @@ export const PresetCard: FC<IPresetCardProps> = ({
     title,
     children,
     Icon,
+    projectId,
+    environmentId,
     onClick,
 }) => (
     <StyledCard variant="outlined">
@@ -34,14 +40,18 @@ export const PresetCard: FC<IPresetCardProps> = ({
                 {children}
             </Typography>
 
-            <Button
+            <Box sx={{ ml: 'auto', mt: 'auto', pt: 1 }}>
+                <PermissionButton
+                    permission={CREATE_FEATURE_STRATEGY}
+                    projectId={projectId}
+                    environmentId={environmentId}
                     variant="outlined"
                     size="small"
-                sx={{ ml: 'auto', mt: 'auto' }}
                     onClick={onClick}
                 >
                     Use template
-            </Button>
+                </PermissionButton>
+            </Box>
         </CardContent>
     </StyledCard>
 );

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -50,6 +50,7 @@ export const StrategyExecution = ({ strategy }: IStrategyExecutionProps) => {
                             sx={{ display: 'flex', alignItems: 'center' }}
                         >
                             <PercentageCircle
+                                hideNumber
                                 percentage={parseParameterNumber(
                                     parameters[key]
                                 )}

frontend/src/component/project/Project/ProjectFeatureToggles/ActionsCell/ActionsCell.tsx

@@ -59,13 +59,7 @@ export const ActionsCell: VFC<IActionsCellProps> = ({
 
     return (
         <Box className={classes.cell}>
-            <Tooltip
+            <Tooltip title="Feature toggle actions" arrow describeChild>
-                title="Feature toggle actions"
-                arrow
-                placement="bottom-end"
-                describeChild
-                enterDelay={1000}
-            >
                 <IconButton
                     id={id}
                     aria-controls={open ? menuId : undefined}

frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx

@@ -23,6 +23,7 @@ import { sortTypes } from 'utils/sortTypes';
 
 const StyledPageContent = styled(PageContent)(({ theme }) => ({
     height: '100vh',
+    overflow: 'auto',
     padding: theme.spacing(7.5, 6),
     '& .header': {
         padding: theme.spacing(0, 0, 2, 0),