Merge branch 'main' into update/remove-snackbar

frontend/.github/workflows/e2e.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Run Cypress
         uses: cypress-io/github-action@v2
         with: 
-          env: AUTH_TOKEN=${{ secrets.UNLEASH_TOKEN }},DEFAULT_ENV="default"
+          env: AUTH_TOKEN=${{ secrets.UNLEASH_TOKEN }},DEFAULT_ENV="development"
           config: baseUrl=${{ github.event.deployment_status.target_url }}
           record: true
         env:

frontend/cypress/integration/feature-toggle/feature.spec.js

@@ -14,7 +14,7 @@
 let featureToggleName = '';
 let enterprise = false;
 let strategyId = '';
-let defaultEnv = 'default';
+let defaultEnv = 'development';
 
 describe('feature toggle', () => {
     before(() => {
@@ -94,7 +94,7 @@ describe('feature toggle', () => {
         cy.url().should('include', featureToggleName);
     });
 
-    it('Can add a gradual rollout strategy to the default environment', () => {
+    it('Can add a gradual rollout strategy to the development environment', () => {
         cy.wait(500);
         cy.visit(`/projects/default/features2/${featureToggleName}/strategies`);
         cy.get('[data-test=ADD_NEW_STRATEGY_ID]').click();
@@ -134,11 +134,10 @@ describe('feature toggle', () => {
         ).as('addStrategyToFeature');
 
         cy.get('[data-test=ADD_NEW_STRATEGY_SAVE_ID]').first().click();
-        cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
         cy.wait('@addStrategyToFeature');
     });
 
-    it('can update a strategy in the default environment', () => {
+    it('can update a strategy in the development environment', () => {
         cy.wait(500);
         cy.visit(`/projects/default/features2/${featureToggleName}/strategies`);
         cy.get('[data-test=STRATEGY_ACCORDION_ID-flexibleRollout').click();
@@ -182,11 +181,10 @@ describe('feature toggle', () => {
         ).as('updateStrategy');
 
         cy.get('[data-test=UPDATE_STRATEGY_BUTTON_ID]').first().click();
-        cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
         cy.wait('@updateStrategy');
     });
 
-    it('can delete a strategy in the default environment', () => {
+    it('can delete a strategy in the development environment', () => {
         cy.wait(500);
         cy.visit(`/projects/default/features2/${featureToggleName}/strategies`);
 
@@ -205,7 +203,7 @@ describe('feature toggle', () => {
         cy.wait('@deleteStrategy');
     });
 
-    it('Can add a userid  strategy to the default environment', () => {
+    it('Can add a userid  strategy to the development environment', () => {
         cy.wait(500);
         cy.visit(`/projects/default/features2/${featureToggleName}/strategies`);
         cy.get('[data-test=ADD_NEW_STRATEGY_ID]').click();
@@ -247,7 +245,6 @@ describe('feature toggle', () => {
         ).as('addStrategyToFeature');
 
         cy.get('[data-test=ADD_NEW_STRATEGY_SAVE_ID]').first().click();
-        cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click();
         cy.wait('@addStrategyToFeature');
     });
 

frontend/package.json

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

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-alert */
-import { useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
 import {
     Table,
     TableBody,
@@ -21,9 +20,14 @@ import loadingData from './loadingData';
 import useLoading from '../../../../hooks/useLoading';
 import usePagination from '../../../../hooks/usePagination';
 import PaginateUI from '../../../common/PaginateUI/PaginateUI';
+import { useHistory } from 'react-router-dom';
+import { IUser } from '../../../../interfaces/user';
+import IRole from '../../../../interfaces/role';
+import useToast from '../../../../hooks/useToast';
 
-function UsersList({ location, closeDialog, showDialog }) {
+const UsersList = () => {
     const { users, roles, refetch, loading } = useUsers();
+    const { setToastData, setToastApiError } = useToast();
     const {
         removeUser,
         changePassword,
@@ -31,13 +35,17 @@ function UsersList({ location, closeDialog, showDialog }) {
         userLoading,
         userApiErrors,
     } = useAdminUsersApi();
+    const history = useHistory();
+    const { location } = history;
     const { hasAccess } = useContext(AccessContext);
-    const [pwDialog, setPwDialog] = useState({ open: false });
+    const [pwDialog, setPwDialog] = useState<{ open: boolean; user?: IUser }>({
+        open: false,
+    });
     const [delDialog, setDelDialog] = useState(false);
     const [showConfirm, setShowConfirm] = useState(false);
     const [emailSent, setEmailSent] = useState(false);
     const [inviteLink, setInviteLink] = useState('');
-    const [delUser, setDelUser] = useState();
+    const [delUser, setDelUser] = useState<IUser>();
     const ref = useLoading(loading);
     const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
         usePagination(users, 50);
@@ -47,12 +55,14 @@ function UsersList({ location, closeDialog, showDialog }) {
         setDelUser(undefined);
     };
 
-    const openDelDialog = user => e => {
+    const openDelDialog =
+        (user: IUser) => (e: React.SyntheticEvent<Element, Event>) => {
             e.preventDefault();
             setDelDialog(true);
             setDelUser(user);
         };
-    const openPwDialog = user => e => {
+    const openPwDialog =
+        (user: IUser) => (e: React.SyntheticEvent<Element, Event>) => {
             e.preventDefault();
             setPwDialog({ open: true, user });
         };
@@ -61,26 +71,28 @@ function UsersList({ location, closeDialog, showDialog }) {
         setPwDialog({ open: false });
     };
 
-    const onDeleteUser = () => {
+    const onDeleteUser = async () => {
-        removeUser(delUser)
+        try {
-            .then(() => {
+            await removeUser(delUser);
+            setToastData({
+                title: `${delUser?.name} has been deleted`,
+                type: 'success',
+            });
             refetch();
             closeDelDialog();
-            })
+        } catch (e: any) {
-            .catch(handleCatch);
+            setToastApiError(e.toString());
+        }
     };
 
-    const handleCatch = () =>
-        console.log('An exception was thrown and handled.');
-
     const closeConfirm = () => {
         setShowConfirm(false);
         setEmailSent(false);
         setInviteLink('');
     };
 
-    const renderRole = roleId => {
+    const renderRole = (roleId: number) => {
-        const role = roles.find(r => r.id === roleId);
+        const role = roles.find((r: IRole) => r.id === roleId);
         return role ? role.name : '';
     };
 
@@ -156,7 +168,7 @@ function UsersList({ location, closeDialog, showDialog }) {
             />
 
             <ConditionallyRender
-                condition={delUser}
+                condition={Boolean(delUser)}
                 show={
                     <DelUser
                         showDialog={delDialog}
@@ -170,10 +182,6 @@ function UsersList({ location, closeDialog, showDialog }) {
             />
         </div>
     );
-}
-
-UsersList.propTypes = {
-    location: PropTypes.object.isRequired,
 };
 
 export default UsersList;

frontend/src/component/admin/users/index.js

@@ -1,6 +1,5 @@
-import { useContext, useState } from 'react';
+import { useContext } from 'react';
-import PropTypes from 'prop-types';
+import UsersList from './UsersList/UsersList';
-import UsersList from './UsersList';
 import AdminMenu from '../admin-menu';
 import PageContent from '../../../component/common/PageContent/PageContent';
 import AccessContext from '../../../contexts/AccessContext';
@@ -10,21 +9,13 @@ import { Alert } from '@material-ui/lab';
 import HeaderTitle from '../../../component/common/HeaderTitle';
 import { Button } from '@material-ui/core';
 import { useStyles } from './index.styles';
+import { useHistory } from 'react-router-dom';
 
-const UsersAdmin = ({ history }) => {
+const UsersAdmin = () => {
     const { hasAccess } = useContext(AccessContext);
-    const [showDialog, setDialog] = useState(false);
+    const history = useHistory();
     const styles = useStyles();
 
-    const openDialog = e => {
-        e.preventDefault();
-        setDialog(true);
-    };
-
-    const closeDialog = () => {
-        setDialog(false);
-    };
-
     return (
         <div>
             <AdminMenu history={history} />
@@ -59,13 +50,7 @@ const UsersAdmin = ({ history }) => {
             >
                 <ConditionallyRender
                     condition={hasAccess(ADMIN)}
-                    show={
+                    show={<UsersList />}
-                        <UsersList
-                            openDialog={openDialog}
-                            closeDialog={closeDialog}
-                            showDialog={showDialog}
-                        />
-                    }
                     elseShow={
                         <Alert severity="error">
                             You need instance admin to access this section.
@@ -77,9 +62,4 @@ const UsersAdmin = ({ history }) => {
     );
 };
 
-UsersAdmin.propTypes = {
-    match: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired,
-};
-
 export default UsersAdmin;

frontend/src/component/context/ContextForm/ContextForm.tsx

@@ -104,7 +104,7 @@ const ContextForm: React.FC<IContextForm> = ({
                     label="Context name"
                     value={contextName}
                     disabled={mode === 'Edit'}
-                    onChange={e => setContextName(e.target.value)}
+                    onChange={e => setContextName(trim(e.target.value))}
                     error={Boolean(errors.name)}
                     errorText={errors.name}
                     onFocus={() => clearErrors()}