Merge pull request #638 from Unleash/fix/pnps

fix: pnps

frontend/src/common.styles.js

@@ -103,4 +103,21 @@ export const useCommonStyles = makeStyles(theme => ({
         opacity: '0',
         transition: 'transform 1.25s ease, opacity 1s ease',
     },
+    fadeInTopStart: {
+        opacity: '0',
+        position: 'fixed',
+        right: '40px',
+        top: '40px',
+        transform: 'translateY(-400px)',
+    },
+    fadeInTopEnter: {
+        transform: 'translateY(100px)',
+        opacity: '1',
+        transition: 'transform 0.6s ease, opacity 1s ease',
+    },
+    fadeInTopLeave: {
+        transform: 'translateY(-400px)',
+        opacity: '0',
+        transition: 'transform 1.25s ease, opacity 1s ease',
+    },
 }));

frontend/src/component/App.tsx

@@ -12,7 +12,7 @@ import styles from './styles.module.scss';
 import IAuthStatus from '../interfaces/user';
 import { useState, useEffect } from 'react';
 import NotFound from './common/NotFound/NotFound';
-import Feedback from './common/Feedback';
+import Feedback from './common/Feedback/Feedback';
 import SWRProvider from './providers/SWRProvider/SWRProvider';
 import ConditionallyRender from './common/ConditionallyRender';
 import EnvironmentSplash from './common/EnvironmentSplash/EnvironmentSplash';
@@ -109,6 +109,8 @@ const App = ({ location, user, fetchUiBootstrap }: IAppProps) => {
                 show={<Loader />}
                 elseShow={
                     <div className={styles.container}>
+                        <ToastRenderer />
+
                         <ConditionallyRender
                             condition={showSplash}
                             show={
@@ -139,8 +141,6 @@ const App = ({ location, user, fetchUiBootstrap }: IAppProps) => {
                                 </LayoutPicker>
                             }
                         />
-
-                        <ToastRenderer />
                     </div>
                 }
             />

frontend/src/component/common/Feedback/Feedback.styles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     feedback: {
-        borderRadius: '3px',
+        borderRadius: '12.5px',
         backgroundColor: '#fff',
         zIndex: '9999',
         boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)',
@@ -12,7 +12,7 @@ export const useStyles = makeStyles(theme => ({
         height: '200px',
     },
     animateContainer: {
-        zIndex: '9999',
+        zIndex: 9999,
     },
     container: {
         display: 'flex',

frontend/src/component/common/Feedback/Feedback.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Button, IconButton } from '@material-ui/core';
 import classnames from 'classnames';
 import CloseIcon from '@material-ui/icons/Close';
@@ -10,6 +10,8 @@ import AnimateOnMount from '../AnimateOnMount/AnimateOnMount';
 import ConditionallyRender from '../ConditionallyRender';
 import { formatApiPath } from '../../../utils/format-path';
 import { Action, Dispatch } from 'redux';
+import UIContext from '../../../contexts/UIContext';
+import useUser from '../../../hooks/api/getters/useUser/useUser';
 
 interface IFeedbackProps {
     show?: boolean;
@@ -19,13 +21,9 @@ interface IFeedbackProps {
     openUrl: string;
 }
 
-const Feedback = ({
+const Feedback = ({ feedbackId, openUrl }: IFeedbackProps) => {
-    show,
+    const { showFeedback, setShowFeedback } = useContext(UIContext);
-    hideFeedback,
+    const { refetch, feedback } = useUser();
-    fetchUser,
-    feedbackId,
-    openUrl,
-}: IFeedbackProps) => {
     const [answeredNotNow, setAnsweredNotNow] = useState(false);
     const styles = useStyles();
     const commonStyles = useCommonStyles();
@@ -42,15 +40,15 @@ const Feedback = ({
                 },
                 body: JSON.stringify({ feedbackId }),
             });
-            await fetchUser();
+            await refetch();
         } catch {
-            hideFeedback();
+            setShowFeedback(false);
         }
 
         // Await api call to register confirmation
         window.open(openUrl, '_blank');
         setTimeout(() => {
-            hideFeedback();
+            setShowFeedback(false);
         }, 200);
     };
 
@@ -69,22 +67,28 @@ const Feedback = ({
                 },
                 body: JSON.stringify({ feedbackId, neverShow: true }),
             });
-            await fetchUser();
+            await refetch();
         } catch {
-            hideFeedback();
+            setShowFeedback(false);
         }
 
         setTimeout(() => {
-            hideFeedback();
+            setShowFeedback(false);
         }, 100);
     };
+    console.log(feedback);
+    const pnps = feedback.find(feedback => feedback.feedbackId === feedbackId);
+
+    if (pnps?.given || pnps?.neverShow) {
+        return null;
+    }
 
     return (
         <AnimateOnMount
-            mounted={show}
+            mounted={showFeedback}
-            start={commonStyles.fadeInBottomStart}
+            start={commonStyles.fadeInTopStart}
-            enter={commonStyles.fadeInBottomEnter}
+            enter={commonStyles.fadeInTopEnter}
-            leave={commonStyles.fadeInBottomLeave}
+            leave={commonStyles.fadeInTopLeave}
             container={styles.animateContainer}
         >
             <div className={styles.feedback}>
@@ -96,7 +100,7 @@ const Feedback = ({
                 >
                     <IconButton
                         className={styles.close}
-                        onClick={() => hideFeedback()}
+                        onClick={() => setShowFeedback(false)}
                     >
                         <CloseIcon />
                     </IconButton>

frontend/src/component/common/Feedback/index.tsx

@@ -1,19 +0,0 @@
-import { Dispatch } from 'react';
-import { connect } from 'react-redux';
-import { Action } from 'redux';
-import { hideFeedback } from '../../../store/feedback/actions';
-import { fetchUser } from '../../../store/user/actions';
-import Feedback from './Feedback';
-
-const mapStateToProps = (state: any) => ({
-    show: state.feedback.show,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
-    hideFeedback: () => {
-        hideFeedback(dispatch)();
-    },
-    fetchUser: () => fetchUser()(dispatch),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Feedback);

frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts

@@ -0,0 +1,10 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    toastWrapper: {
+        right: 0,
+        left: 0,
+        margin: '0 auto',
+        maxWidth: '450px',
+    },
+}));

frontend/src/component/common/ToastRenderer/ToastRenderer.tsx

@@ -2,13 +2,15 @@ import { Portal } from '@material-ui/core';
 import { useContext, useEffect } from 'react';
 import { useCommonStyles } from '../../../common.styles';
 import UIContext, { IToastData } from '../../../contexts/UIContext';
+import { useStyles } from './ToastRenderer.styles';
 import AnimateOnMount from '../AnimateOnMount/AnimateOnMount';
 import Toast from './Toast/Toast';
 
 const ToastRenderer = () => {
     // @ts-ignore-next-line
     const { toastData, setToast } = useContext(UIContext);
-    const styles = useCommonStyles();
+    const commonStyles = useCommonStyles();
+    const styles = useStyles();
 
     const hide = () => {
         setToast((prev: IToastData) => ({ ...prev, show: false }));
@@ -30,10 +32,10 @@ const ToastRenderer = () => {
         <Portal>
             <AnimateOnMount
                 mounted={toastData?.show}
-                start={styles.fadeInBottomStartWithoutFixed}
+                start={commonStyles.fadeInBottomStartWithoutFixed}
-                enter={styles.fadeInBottomEnter}
+                enter={commonStyles.fadeInBottomEnter}
-                leave={styles.fadeInBottomLeave}
+                leave={commonStyles.fadeInBottomLeave}
-                container={styles.fullWidth}
+                container={styles.toastWrapper}
             >
                 <Toast {...toastData} />
             </AnimateOnMount>

frontend/src/component/feature/CreateFeature/CreateFeature/CreateFeature.tsx

@@ -8,10 +8,13 @@ import useFeatureApi from '../../../../hooks/api/actions/useFeatureApi/useFeatur
 import { CREATE_FEATURE } from '../../../providers/AccessProvider/permissions';
 import PermissionButton from '../../../common/PermissionButton/PermissionButton';
 import { CF_CREATE_BTN_ID } from '../../../../testIds';
+import { useContext } from 'react';
+import UIContext from '../../../../contexts/UIContext';
 
 const CreateFeature = () => {
     /* @ts-ignore */
     const { setToastData, setToastApiError } = useToast();
+    const { setShowFeedback } = useContext(UIContext);
     const { uiConfig } = useUiConfig();
     const history = useHistory();
 
@@ -46,6 +49,7 @@ const CreateFeature = () => {
                 confetti: true,
                 type: 'success',
             });
+            setShowFeedback(true);
         } catch (e: any) {
             setToastApiError(e.toString());
         }

frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap

@@ -496,10 +496,10 @@ exports[`renders correctly with with variants 1`] = `
           </svg>
           <fieldset
             aria-hidden={true}
-            className="PrivateNotchedOutline-root-23 MuiOutlinedInput-notchedOutline"
+            className="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
           >
             <legend
-              className="PrivateNotchedOutline-legendLabelled-25 PrivateNotchedOutline-legendNotched-26"
+              className="PrivateNotchedOutline-legendLabelled-28 PrivateNotchedOutline-legendNotched-29"
             >
               <span>
                 Stickiness

frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap

@@ -29,7 +29,7 @@ exports[`renders correctly with one feature 1`] = `
         }
       >
         <div
-          className="MuiChip-root makeStyles-chip-21 MuiChip-colorPrimary MuiChip-outlined MuiChip-outlinedPrimary"
+          className="MuiChip-root makeStyles-chip-24 MuiChip-colorPrimary MuiChip-outlined MuiChip-outlinedPrimary"
           onKeyDown={[Function]}
           onKeyUp={[Function]}
           title="Feature toggle is active."
@@ -104,10 +104,10 @@ exports[`renders correctly with one feature 1`] = `
             </svg>
             <fieldset
               aria-hidden={true}
-              className="PrivateNotchedOutline-root-22 MuiOutlinedInput-notchedOutline"
+              className="PrivateNotchedOutline-root-25 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="PrivateNotchedOutline-legendLabelled-24 PrivateNotchedOutline-legendNotched-25"
+                className="PrivateNotchedOutline-legendLabelled-27 PrivateNotchedOutline-legendNotched-28"
               >
                 <span>
                   Feature type
@@ -163,10 +163,10 @@ exports[`renders correctly with one feature 1`] = `
             </svg>
             <fieldset
               aria-hidden={true}
-              className="PrivateNotchedOutline-root-22 MuiOutlinedInput-notchedOutline"
+              className="PrivateNotchedOutline-root-25 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                className="PrivateNotchedOutline-legendLabelled-24 PrivateNotchedOutline-legendNotched-25"
+                className="PrivateNotchedOutline-legendLabelled-27 PrivateNotchedOutline-legendNotched-28"
               >
                 <span>
                   Project
@@ -198,7 +198,7 @@ exports[`renders correctly with one feature 1`] = `
       >
         <span
           aria-disabled={true}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-26 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-disabled-28 Mui-disabled Mui-disabled Mui-disabled"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-29 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-disabled-31 Mui-disabled Mui-disabled Mui-disabled"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -217,7 +217,7 @@ exports[`renders correctly with one feature 1`] = `
           >
             <input
               checked={false}
-              className="PrivateSwitchBase-input-29 MuiSwitch-input"
+              className="PrivateSwitchBase-input-32 MuiSwitch-input"
               disabled={true}
               onChange={[Function]}
               type="checkbox"
@@ -350,7 +350,7 @@ exports[`renders correctly with one feature 1`] = `
   </div>
   <hr />
   <div
-    className="MuiPaper-root makeStyles-tabNav-30 MuiPaper-elevation1 MuiPaper-rounded"
+    className="MuiPaper-root makeStyles-tabNav-33 MuiPaper-elevation1 MuiPaper-rounded"
   >
     <div
       className="MuiTabs-root"
@@ -398,7 +398,7 @@ exports[`renders correctly with one feature 1`] = `
               Activation
             </span>
             <span
-              className="PrivateTabIndicator-root-31 PrivateTabIndicator-colorPrimary-32 MuiTabs-indicator"
+              className="PrivateTabIndicator-root-34 PrivateTabIndicator-colorPrimary-35 MuiTabs-indicator"
               style={Object {}}
             />
           </button>

frontend/src/component/providers/UIProvider/UIProvider.tsx

@@ -11,13 +11,16 @@ const UIProvider: React.FC = ({ children }) => {
         persist: false,
         type: '',
     });
+    const [showFeedback, setShowFeedback] = useState();
 
     const context = React.useMemo(
         () => ({
             setToast,
             toastData,
+            showFeedback,
+            setShowFeedback,
         }),
-        [toastData]
+        [toastData, showFeedback]
     );
 
     return <UIContext.Provider value={context}>{children}</UIContext.Provider>;

frontend/src/contexts/UIContext.ts

@@ -9,11 +9,13 @@ export interface IToastData {
     confetti?: boolean;
     type: string;
 }
-interface IFeatureStrategiesUIContext {
+interface IUIContext {
     toastData: IToastData;
     setToast: React.Dispatch<React.SetStateAction<IToastData>>;
+    showFeedback: boolean;
+    setShowFeedback: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const UIContext = React.createContext<IFeatureStrategiesUIContext | null>(null);
+const UIContext = React.createContext<IUIContext | null>(null);
 
 export default UIContext;