fix: reset stickiness to default on variants modal close (#3455)

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->
Expanded the onClose handler to reset stickiness to default for project
on modal close
## About the changes
<!-- Describe the changes introduced. What are they and why are they
being introduced? Feel free to also add screenshots or steps to view the
changes if they're visual. -->

<!-- Does it close an issue? Multiple? -->
Closes #

<!-- (For internal contributors): Does it relate to an issue on public
roadmap? -->
<!--
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#
-->

### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->


## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/cypress/global.d.ts

@@ -75,7 +75,7 @@ declare namespace Cypress {
         ): Chainable;
         createProject_API(name: string): Chainable;
         deleteProject_API(name: string): Chainable;
-        createFeature_API(name: string, projectName: string): Chainable;
+        createFeature_API(name: string, projectName?: string): Chainable;
         deleteFeature_API(name: string): Chainable;
     }
 }

frontend/cypress/integration/feature/feature.spec.ts

@@ -1,14 +1,13 @@
 ///<reference path="../../global.d.ts" />
 
-const ENTERPRISE = Boolean(Cypress.env('ENTERPRISE'));
-const randomId = String(Math.random()).split('.')[1];
-const featureToggleName = `unleash-e2e-${randomId}`;
+describe('feature', () => {
+    const randomId = String(Math.random()).split('.')[1];
+    const featureToggleName = `unleash-e2e-${randomId}`;
 
-const variant1 = 'variant1';
-const variant2 = 'variant2';
-let strategyId = '';
+    const variant1 = 'variant1';
+    const variant2 = 'variant2';
+    let strategyId = '';
 
-describe('feature', () => {
     before(() => {
         cy.runBefore();
     });

frontend/cypress/integration/groups/groups.spec.ts

@@ -1,16 +1,11 @@
 ///<reference path="../../global.d.ts" />
 
-const baseUrl = Cypress.config().baseUrl;
-const randomId = String(Math.random()).split('.')[1];
-const groupName = `unleash-e2e-${randomId}`;
-const userIds: any[] = [];
-
-// Disable all active splash pages by visiting them.
-const disableActiveSplashScreens = () => {
-    cy.visit(`/splash/operators`);
-};
-
 describe('groups', () => {
+    const baseUrl = Cypress.config().baseUrl;
+    const randomId = String(Math.random()).split('.')[1];
+    const groupName = `unleash-e2e-${randomId}`;
+    const userIds: any[] = [];
+
     before(() => {
         cy.runBefore();
         cy.login_UI();

frontend/cypress/integration/import/import.spec.ts

@@ -1,18 +1,13 @@
 ///<reference path="../../global.d.ts" />
 
-const baseUrl = Cypress.config().baseUrl;
-const randomSeed = String(Math.random()).split('.')[1];
-const randomFeatureName = `cypress-features${randomSeed}`;
-const userIds: any[] = [];
-
-// Disable all active splash pages by visiting them.
-const disableActiveSplashScreens = () => {
-    cy.visit(`/splash/operators`);
-};
-
 describe('imports', () => {
+    const baseUrl = Cypress.config().baseUrl;
+    const randomSeed = String(Math.random()).split('.')[1];
+    const randomFeatureName = `cypress-features${randomSeed}`;
+    const userIds: any[] = [];
+
     before(() => {
-        disableActiveSplashScreens();
+        cy.runBefore();
         cy.login_UI();
         for (let i = 1; i <= 2; i++) {
             cy.request('POST', `${baseUrl}/api/admin/user-admin`, {

frontend/cypress/integration/projects/access.spec.ts

@@ -11,21 +11,16 @@ import {
     //@ts-ignore
 } from '../../../src/utils/testIds';
 
-const baseUrl = Cypress.config().baseUrl;
-const randomId = String(Math.random()).split('.')[1];
-const groupAndProjectName = `group-e2e-${randomId}`;
-const userName = `user-e2e-${randomId}`;
-const groupIds: any[] = [];
-const userIds: any[] = [];
-
-// Disable all active splash pages by visiting them.
-const disableActiveSplashScreens = () => {
-    cy.visit(`/splash/operators`);
-};
-
 describe('project-access', () => {
+    const baseUrl = Cypress.config().baseUrl;
+    const randomId = String(Math.random()).split('.')[1];
+    const groupAndProjectName = `group-e2e-${randomId}`;
+    const userName = `user-e2e-${randomId}`;
+    const groupIds: any[] = [];
+    const userIds: any[] = [];
+
     before(() => {
-        disableActiveSplashScreens();
+        cy.runBefore();
         cy.login_UI();
         for (let i = 1; i <= 2; i++) {
             const name = `${i}-${userName}`;

frontend/cypress/integration/projects/notifications.spec.ts

@@ -1,20 +1,16 @@
 ///<reference path="../../global.d.ts" />
 
-import UserCredentials = Cypress.UserCredentials;
-
-const ENTERPRISE = Boolean(Cypress.env('ENTERPRISE'));
-const randomId = String(Math.random()).split('.')[1];
-const featureToggleName = `notifications_test-${randomId}`;
-const baseUrl = Cypress.config().baseUrl;
-let strategyId = '';
-let userIds: number[] = [];
-let userCredentials: UserCredentials[] = [];
-const userName = `notifications_user-${randomId}`;
-const projectName = `default`;
-
 const EDITOR = 2;
 
 describe('notifications', () => {
+    const randomId = String(Math.random()).split('.')[1];
+    const featureToggleName = `notifications_test-${randomId}`;
+    const baseUrl = Cypress.config().baseUrl;
+    let userIds: number[] = [];
+    let userCredentials: Cypress.UserCredentials[] = [];
+    const userName = `notifications_user-${randomId}`;
+    const projectName = `default`;
+
     before(() => {
         cy.runBefore();
     });
@@ -45,10 +41,11 @@ describe('notifications', () => {
             cy.get("[data-testid='NOTIFICATIONS_BUTTON']").click();
 
             //then
-            cy.get("[data-testid='UNREAD_NOTIFICATIONS']").should('exist');
-            cy.get("[data-testid='NOTIFICATIONS_LIST']")
-                .eq(0)
-                .should('contain.text', `New feature ${featureToggleName}`);
+            // cy.get("[data-testid='UNREAD_NOTIFICATIONS']").should('exist');
+            cy.get("[data-testid='NOTIFICATIONS_LIST']").should(
+                'contain.text',
+                `New feature ${featureToggleName}`
+            );
 
             //clean
             // We need to login as admin for cleanup

frontend/cypress/integration/projects/overview.spec.ts

@@ -8,13 +8,14 @@ import {
     //@ts-ignore
 } from '../../../src/utils/testIds';
 
-const randomId = String(Math.random()).split('.')[1];
-const featureTogglePrefix = 'unleash-e2e-project-overview';
-const featureToggleName = `${featureTogglePrefix}-${randomId}`;
-const baseUrl = Cypress.config().baseUrl;
-const selectAll = '[title="Toggle All Rows Selected"] input[type="checkbox"]';
-
 describe('project overview', () => {
+    const randomId = String(Math.random()).split('.')[1];
+    const featureTogglePrefix = 'unleash-e2e-project-overview';
+    const featureToggleName = `${featureTogglePrefix}-${randomId}`;
+    const baseUrl = Cypress.config().baseUrl;
+    const selectAll =
+        '[title="Toggle All Rows Selected"] input[type="checkbox"]';
+
     before(() => {
         cy.runBefore();
     });

frontend/cypress/integration/projects/settings.spec.ts

@@ -1,16 +1,14 @@
 ///<reference path="../../global.d.ts" />
 
-const randomId = String(Math.random()).split('.')[1];
-const baseUrl = Cypress.config().baseUrl;
-let strategyId = '';
-const userName = `settings-user-${randomId}`;
-const projectName = `stickiness-project-${randomId}`;
-const TEST_STICKINESS = 'userId';
-const featureToggleName = `settings-${randomId}`;
-let cleanFeature = false;
-let cleanProject = false;
-
 describe('project settings', () => {
+    const randomId = String(Math.random()).split('.')[1];
+    const baseUrl = Cypress.config().baseUrl;
+    const projectName = `stickiness-project-${randomId}`;
+    const TEST_STICKINESS = 'userId';
+    const featureToggleName = `settings-${randomId}`;
+    let cleanFeature = false;
+    let cleanProject = false;
+
     before(() => {
         cy.runBefore();
     });

frontend/cypress/integration/segments/segments.spec.ts

@@ -1,10 +1,10 @@
 ///<reference path="../../global.d.ts" />
 
-const randomId = String(Math.random()).split('.')[1];
-const segmentName = `unleash-e2e-${randomId}`;
-let segmentId: string;
-
 describe('segments', () => {
+    const randomId = String(Math.random()).split('.')[1];
+    const segmentName = `unleash-e2e-${randomId}`;
+    let segmentId: string;
+
     before(() => {
         cy.runBefore();
     });

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/EnvironmentVariantsModal.tsx

@@ -209,7 +209,7 @@ export const EnvironmentVariantsModal = ({
                 stickiness:
                     variantsEdit?.length > 0
                         ? variantsEdit[0].stickiness
-                        : 'default',
+                        : defaultStickiness,
                 new: true,
                 isValid: false,
                 id,
@@ -307,18 +307,17 @@ export const EnvironmentVariantsModal = ({
         }
     }, [apiPayload.error]);
 
+    const handleClose = () => {
+        updateStickiness(defaultStickiness).then();
+        setOpen(false);
+    };
+
     if (loading || stickiness === '') {
         return <Loader />;
     }
 
     return (
-        <SidebarModal
-            open={open}
-            onClose={() => {
-                setOpen(false);
-            }}
-            label=""
-        >
+        <SidebarModal open={open} onClose={handleClose} label="">
             <FormTemplate
                 modal
                 title=""
@@ -459,11 +458,7 @@ export const EnvironmentVariantsModal = ({
                                 ? changeRequestButtonText
                                 : 'Save variants'}
                         </Button>
-                        <StyledCancelButton
-                            onClick={() => {
-                                setOpen(false);
-                            }}
-                        >
+                        <StyledCancelButton onClick={handleClose}>
                             Cancel
                         </StyledCancelButton>
                     </StyledButtonContainer>