MEN-7355 - feat: added feedback dialog

frontend/entrypoint.sh

@@ -35,6 +35,7 @@ cat >/var/www/mender-gui/dist/env.js <<EOF
       hasDeviceConfig: "$HAVE_DEVICECONFIG",
       hasDeviceConnect: "$HAVE_DEVICECONNECT",
       hasDeltaProgress: "$HAVE_DELTA_PROGRESS",
+      hasFeedbackEnabled: "$HAVE_FEEDBACK_ENABLED",
       hasMonitor: "$HAVE_MONITOR",
       hasMultitenancy: "$HAVE_MULTITENANT",
       hasReleaseTags: "$HAVE_RELEASE_TAGS",

frontend/src/js/components/app.js

@@ -40,6 +40,7 @@ import { dark as darkTheme, light as lightTheme } from '../themes/Mender';
 import Tracking from '../tracking';
 import ConfirmDismissHelptips from './common/dialogs/confirmdismisshelptips';
 import DeviceConnectionDialog from './common/dialogs/deviceconnectiondialog';
+import FeedbackDialog from './common/dialogs/feedback';
 import StartupNotificationDialog from './common/dialogs/startupnotification';
 import Footer from './footer';
 import Header from './header/header';
@@ -106,6 +107,7 @@ export const AppRoot = () => {
   const showDismissHelptipsDialog = useSelector(state => !state.onboarding.complete && state.onboarding.showTipsDialog);
   const showDeviceConnectionDialog = useSelector(state => state.users.showConnectDeviceDialog);
   const showStartupNotification = useSelector(state => state.users.showStartupNotification);
+  const showFeedbackDialog = useSelector(state => state.users.showFeedbackDialog);
   const snackbar = useSelector(state => state.app.snackbar);
   const trackingCode = useSelector(state => state.app.trackerCode);
   const isDarkMode = useSelector(getIsDarkMode);
@@ -208,6 +210,7 @@ export const AppRoot = () => {
             {showDismissHelptipsDialog && <ConfirmDismissHelptips />}
             {showDeviceConnectionDialog && <DeviceConnectionDialog onCancel={() => dispatch(setShowConnectingDialog(false))} />}
             {showStartupNotification && <StartupNotificationDialog />}
+            {showFeedbackDialog && <FeedbackDialog />}
           </div>
         ) : (
           <div className={classes.public}>

frontend/src/js/components/common/dialogs/feedback.js

@@ -0,0 +1,168 @@
+// Copyright 2024 Northern.tech AS
+//
+//    Licensed under the Apache License, Version 2.0 (the "License");
+//    you may not use this file except in compliance with the License.
+//    You may obtain a copy of the License at
+//
+//        http://www.apache.org/licenses/LICENSE-2.0
+//
+//    Unless required by applicable law or agreed to in writing, software
+//    distributed under the License is distributed on an "AS IS" BASIS,
+//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//    See the License for the specific language governing permissions and
+//    limitations under the License.
+import React, { useEffect, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
+
+import {
+  Close as CloseIcon,
+  SentimentVeryDissatisfied as DissatisfiedIcon,
+  SentimentNeutral as NeutralIcon,
+  SentimentSatisfiedAlt as SatisfiedIcon,
+  SentimentVeryDissatisfiedOutlined as VeryDissatisfiedIcon,
+  SentimentVerySatisfiedOutlined as VerySatisfiedIcon
+} from '@mui/icons-material';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  TextField,
+  dialogClasses,
+  dialogTitleClasses,
+  iconButtonClasses,
+  lighten,
+  textFieldClasses
+} from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+
+import actions from '@northern.tech/store/actions';
+import { TIMEOUTS } from '@northern.tech/store/constants';
+import { submitFeedback } from '@northern.tech/store/thunks';
+
+const { setShowFeedbackDialog } = actions;
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    [`.${dialogClasses.paper}`]: { width: 350, bottom: 0, right: 0, position: 'absolute' },
+    [`.${dialogTitleClasses.root}`]: {
+      alignSelf: 'flex-end',
+      padding: 0,
+      [`.${iconButtonClasses.root}`]: { paddingBottom: 0 }
+    }
+  },
+  columns: { gap: theme.spacing(2) },
+  rating: {
+    [`.${iconButtonClasses.root}`]: {
+      borderRadius: theme.shape.borderRadius,
+      height: theme.spacing(6),
+      width: theme.spacing(6),
+      backgroundColor: lighten(theme.palette.primary.main, 0.85),
+      color: theme.palette.primary.main,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: lighten(theme.palette.primary.main, 0.85)
+      }
+    }
+  },
+  text: { [`.${textFieldClasses.root}`]: { marginTop: 0 }, '.submitButton': { alignSelf: 'start' } }
+}));
+
+const satisfactionLevels = [
+  { Icon: VeryDissatisfiedIcon, title: 'Very Dissatisfied' },
+  { Icon: DissatisfiedIcon, title: 'Dissatisfied' },
+  { Icon: NeutralIcon, title: 'Neutral' },
+  { Icon: SatisfiedIcon, title: 'Satisfied' },
+  { Icon: VerySatisfiedIcon, title: 'Very Satisfied' }
+];
+const explanations = ['Very unsatisfied', 'Very satisfied'];
+
+const SatisfactionGauge = ({ classes, setSatisfaction }) => {
+  return (
+    <div className={`flexbox column ${classes.columns}`}>
+      <div>How satisfied are you with Mender?</div>
+      <div className={`flexbox space-between ${classes.rating}`}>
+        {satisfactionLevels.map(({ Icon, title }, index) => (
+          <IconButton key={`satisfaction-${index}`} onClick={() => setSatisfaction(index)} title={title}>
+            <Icon />
+          </IconButton>
+        ))}
+      </div>
+      <div className="flexbox space-between muted">
+        {explanations.map((explanation, index) => (
+          <div className="slightly-smaller" key={`explanation-${index}`}>
+            {explanation}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const TextEntry = ({ classes, feedback, onChangeFeedback, onSubmit }) => (
+  <div className={`flexbox column ${classes.columns} ${classes.text}`}>
+    <div>What do you think is the most important thing to improve in Mender? (optional)</div>
+    <TextField hint="Your feedback" multiline minRows={4} onChange={({ target: { value } }) => onChangeFeedback(value)} value={feedback} variant="outlined" />
+    <Button className="submitButton" variant="contained" onClick={onSubmit}>
+      Submit Feedback
+    </Button>
+  </div>
+);
+
+const AppreciationNote = () => <p className="margin-top-none align-center">Thank you for taking the time to share your thoughts!</p>;
+
+const progressionLevels = [SatisfactionGauge, TextEntry, AppreciationNote];
+
+export const FeedbackDialog = () => {
+  const [progress, setProgress] = useState(0);
+  const [satisfaction, setSatisfaction] = useState(2);
+  const [feedback, setFeedback] = useState('');
+  const dispatch = useDispatch();
+  const isInitialized = useRef(false);
+
+  const { classes } = useStyles();
+
+  useEffect(() => {
+    if (!isInitialized.current) {
+      return;
+    }
+    setProgress(current => current + 1);
+  }, [satisfaction]);
+
+  useEffect(() => {
+    setTimeout(() => (isInitialized.current = true), TIMEOUTS.threeSeconds);
+  }, []);
+
+  const onCloseClick = () => dispatch(setShowFeedbackDialog(false));
+
+  const onAdvance = () => setProgress(current => current + 1);
+
+  const onSubmit = () => {
+    onAdvance();
+    dispatch(submitFeedback({ satisfaction: satisfactionLevels[satisfaction].title, feedback }));
+  };
+
+  const Component = progressionLevels[progress];
+  return (
+    <Dialog className={classes.root} open>
+      <DialogTitle>
+        <IconButton onClick={onCloseClick} aria-label="close" size="small">
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent>
+        <Component
+          classes={classes}
+          feedback={feedback}
+          setSatisfaction={setSatisfaction}
+          onChangeFeedback={setFeedback}
+          onSubmit={onSubmit}
+          onAdvance={onAdvance}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FeedbackDialog;

frontend/src/js/store/storehooks.ts

@@ -66,6 +66,7 @@ const featureFlags = [
   'hasDeltaProgress',
   'hasDeviceConfig',
   'hasDeviceConnect',
+  'hasFeedbackEnabled',
   'hasReporting',
   'hasMonitor',
   'isEnterprise'

frontend/src/js/store/usersSlice/index.ts

@@ -41,6 +41,7 @@ export const initialState = {
   },
   settingsInitialized: false,
   showConnectDeviceDialog: false,
+  showFeedbackDialog: true,
   showStartupNotification: false,
   tooltips: {
     byId: {
@@ -134,6 +135,9 @@ export const usersSlice = createSlice({
         ...action.payload
       };
     },
+    setShowFeedbackDialog: (state, action) => {
+      state.showFeedbackDialog = action.payload;
+    },
     setShowConnectingDialog: (state, action) => {
       state.showConnectDeviceDialog = action.payload;
     },

frontend/src/js/store/usersSlice/thunks.ts

@@ -23,9 +23,11 @@ import {
   APPLICATION_JSON_CONTENT_TYPE,
   APPLICATION_JWT_CONTENT_TYPE,
   SSO_TYPES,
+  TIMEOUTS,
   apiRoot,
   emptyRole,
-  emptyUiPermissions
+  emptyUiPermissions,
+  tenantadmApiUrlv2
 } from '@northern.tech/store/constants';
 import { getOnboardingState, getOrganization, getTooltipsState, getUserSettings as getUserSettingsSelector } from '@northern.tech/store/selectors';
 import { commonErrorFallback, commonErrorHandler } from '@northern.tech/store/store';
@@ -759,3 +761,15 @@ export const setAllTooltipsReadState = createAsyncThunk(`${sliceName}/toggleHelp
   const updatedTips = Object.keys(HELPTOOLTIPS).reduce((accu, id) => ({ ...accu, [id]: { readState } }), {});
   return Promise.resolve(dispatch(actions.setTooltipsState(updatedTips))).then(() => dispatch(saveUserSettings()));
 });
+
+export const submitFeedback = createAsyncThunk(`${sliceName}/submitFeedback`, ({ satisfaction, feedback, ...additionalInfo }, { dispatch, getState }) => {
+  const meta = {
+    ...additionalInfo,
+    tenant: getOrganization(getState())
+  };
+  return GeneralApi.post(`${tenantadmApiUrlv2}/contact/support`, { feedback, satisfaction, meta }).then(() => {
+    const today = new Date();
+    dispatch(saveUserSettings({ feedbackCollected: today.toISOString().substring(0, 7) }));
+    setTimeout(() => dispatch(actions.setShowFeedbackDialog(false)), TIMEOUTS.threeSeconds);
+  });
+});