Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-09 00:18:26 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #638 from Unleash/fix/pnps

Browse Source 
fix: pnps
This commit is contained in:
Youssef Khedher 2022-01-28 12:20:56 +01:00 committed by GitHub
commit d69c024bbe
12 changed files with 85 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/common.styles.js
View File

@ -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',
},
}));

6
frontend/src/component/App.tsx
View File

@ -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>
}
/>

4
frontend/src/component/common/Feedback/Feedback.styles.ts
View File

@ -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',

42
frontend/src/component/common/Feedback/Feedback.tsx
View File

@ -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 = ({
show,
hideFeedback,
fetchUser,
feedbackId,
openUrl,
}: IFeedbackProps) => {
const Feedback = ({ feedbackId, openUrl }: IFeedbackProps) => {
const { showFeedback, setShowFeedback } = useContext(UIContext);
const { refetch, feedback } = useUser();
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}
start={commonStyles.fadeInBottomStart}
enter={commonStyles.fadeInBottomEnter}
leave={commonStyles.fadeInBottomLeave}
mounted={showFeedback}
start={commonStyles.fadeInTopStart}
enter={commonStyles.fadeInTopEnter}
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>

19
frontend/src/component/common/Feedback/index.tsx
View File

@ -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);

10
frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts Normal file
View File

@ -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',
},
}));

12
frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
View File

@ -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}
enter={styles.fadeInBottomEnter}
leave={styles.fadeInBottomLeave}
container={styles.fullWidth}
start={commonStyles.fadeInBottomStartWithoutFixed}
enter={commonStyles.fadeInBottomEnter}
leave={commonStyles.fadeInBottomLeave}
container={styles.toastWrapper}
>
<Toast {...toastData} />
</AnimateOnMount>

4
frontend/src/component/feature/CreateFeature/CreateFeature/CreateFeature.tsx
View File

@ -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());
}

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

@ -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

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

@ -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>

5
frontend/src/component/providers/UIProvider/UIProvider.tsx
View File

@ -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>;

6
frontend/src/contexts/UIContext.ts
View File

@ -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;