From e263431f6720c30b954764e6737dfdf1d5dda40b Mon Sep 17 00:00:00 2001 From: Rodley <100950196+rodleyorosa@users.noreply.github.com> Date: Mon, 7 Aug 2023 12:25:17 +0200 Subject: [PATCH] feat: remove feedback from UI refs: SHELL-140 (#299) --- src/boot/app/default-views.ts | 8 - src/constants/index.ts | 2 - src/reporting/__mocks__/functions.ts | 2 - src/reporting/feedback.tsx | 437 --------------------------- src/reporting/functions.ts | 9 - src/reporting/store.ts | 12 +- src/utility-bar/bar.test.tsx | 3 +- src/utility-bar/bar.tsx | 14 - 8 files changed, 2 insertions(+), 485 deletions(-) delete mode 100644 src/reporting/feedback.tsx diff --git a/src/boot/app/default-views.ts b/src/boot/app/default-views.ts index 08e75a76..45425a4e 100644 --- a/src/boot/app/default-views.ts +++ b/src/boot/app/default-views.ts @@ -11,7 +11,6 @@ import { size } from 'lodash'; import type { AppState, PrimaryBarView, SettingsView } from '../../../types'; import { SEARCH_APP_ID, SETTINGS_APP_ID, SHELL_APP_ID } from '../../constants'; -import Feedback from '../../reporting/feedback'; import { SearchAppView } from '../../search/search-app-view'; import { AccountsSettings } from '../../settings/accounts-settings'; import GeneralSettings from '../../settings/general-settings'; @@ -97,12 +96,6 @@ const searchAppView = { component: SearchAppView }; -const feedbackBoardView = { - id: 'feedback', - app: SHELL_APP_ID, - component: Feedback, - route: 'feedback' -}; export const registerDefaultViews = (t: TFunction): void => { useAppStore.setState( produce((s: AppState) => { @@ -123,7 +116,6 @@ export const registerDefaultViews = (t: TFunction): void => { s.views.appView = [searchAppView, settingsAppView]; s.views.settings = [settingsGeneralView(t), settingsAccountsView(t)]; } - s.views.board = [feedbackBoardView]; }) ); }; diff --git a/src/constants/index.ts b/src/constants/index.ts index 6426f0df..fe346faf 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -125,8 +125,6 @@ export const SCALING_LIMIT = { export const LOGIN_V3_CONFIG_PATH = '/zx/login/v3/config'; export const DARK_READER_PROP_KEY = 'zappDarkreaderMode'; export const SENTRY_SHELL_DSN = 'https://0ce2448c05b94f0182c47ae52c7ff52c@feedback.zextras.tools/6'; -export const SENTRY_FEEDBACK_DNS = - 'https://1b6b3e2bbdc64a73bf45c72b725c56b4@feedback.zextras.tools/8'; export enum ResultLabelType { NORMAL = 'normal', diff --git a/src/reporting/__mocks__/functions.ts b/src/reporting/__mocks__/functions.ts index 38be562c..ced4476b 100644 --- a/src/reporting/__mocks__/functions.ts +++ b/src/reporting/__mocks__/functions.ts @@ -7,5 +7,3 @@ import * as actualFunctions from '../functions'; export const report: typeof actualFunctions.report = () => (): string => ''; - -export const feedback: typeof actualFunctions.feedback = (): string => ''; diff --git a/src/reporting/feedback.tsx b/src/reporting/feedback.tsx deleted file mode 100644 index ad86c94f..00000000 --- a/src/reporting/feedback.tsx +++ /dev/null @@ -1,437 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 Zextras - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -import React, { - TextareaHTMLAttributes, - useCallback, - useEffect, - useMemo, - useReducer, - useState -} from 'react'; - -import type { Event as SentryEvent } from '@sentry/browser'; -import { - Button, - Container, - ContainerProps, - Icon, - LabelFactoryProps, - Row, - Select, - SelectItem, - Text, - useSnackbar -} from '@zextras/carbonio-design-system'; -import type { TFunction } from 'i18next'; -import { filter, find, map } from 'lodash'; -import styled, { DefaultTheme } from 'styled-components'; - -import { feedback } from './functions'; -import { useUserAccount } from '../store/account'; -import { useAppList } from '../store/app'; -import { closeBoard } from '../store/boards'; -import { getT } from '../store/i18n'; - -// TODO: replace with DS TextArea? -const TextArea = styled.textarea<{ size?: keyof DefaultTheme['sizes']['font'] }>` - width: 100%; - min-height: 8rem; - box-sizing: border-box; - outline: none; - border: none; - background: ${({ theme }): string => theme.palette.gray5.regular}; - resize: none; - transition: height 0.4s ease; - color: ${({ theme }): string => theme.palette.text.regular}; - font-family: ${({ theme }): string => theme.fonts.default}; - font-size: ${({ theme, size }): string => theme.sizes.font[size ?? 'medium']}; - &:focus { - background: ${({ theme }): string => theme.palette.gray4.regular}; - outline: none; - } -`; - -const TextContainer = styled(Container)` - text-align: justify; - align-items: flex-start; - width: 80%; -`; - -const ButtonContainer = styled(Container)` - width: 20%; - position: relative; -`; - -const TAContainer = styled(Container)` - background: ${({ theme }): string => theme.palette.gray5.regular}; - border-radius: 0.125rem 0.125rem 0 0; - padding: 0.5rem; - transition: height 0.4s ease; - height: auto; - max-height: 50%; - &:focus-within { - background: ${({ theme }): string => theme.palette.gray4.regular}; - outline: none; - border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.primary.regular}; - } -`; - -const SubHeadingText = styled(Text)<{ lineHeight?: string }>` - border-radius: 0.125rem 0.125rem 0 0; - font-size: 0.875rem; - font-weight: 300; - margin-top: 0.625rem; - line-height: ${({ lineHeight }): string => lineHeight ?? 'normal'}; -`; - -interface LabelContainerProps extends ContainerProps { - disabled: boolean; -} - -const LabelContainer = styled(Container)` - border-bottom: 0.0625rem solid - ${({ theme, disabled }): string => - disabled ? theme.palette.error.regular : theme.palette.gray2.regular}; -`; - -const emptyEvent: SentryEvent = { - message: '', - level: 'info', - release: 'unknown', - extra: { - app: '0', - topic: '0' - }, - user: {} -}; - -type SentryEventReducer = - | { type: 'set-user'; payload: SentryEvent['user'] } - | { type: 'reset'; payload: never } - | { type: 'set-message'; payload: SentryEvent['message'] } - | { type: 'select-app'; payload: { version: SentryEvent['release']; app: string } } - | { type: 'select-topic'; payload: string }; - -function reducer(state: SentryEvent, { type, payload }: SentryEventReducer): SentryEvent { - switch (type) { - case 'set-user': - return { ...state, user: payload }; - case 'reset': - return emptyEvent; - case 'set-message': - return { ...state, message: payload }; - case 'select-app': - return { - ...state, - release: payload.version, - extra: { ...state.extra, app: payload.app } - }; - case 'select-topic': - return { ...state, extra: { ...state.extra, topic: payload } }; - default: - return state; - } -} - -type Topic = { label: string; value: string }; - -const getTopics = (t: TFunction): Array => [ - { label: t('feedback.user_interface', 'User interface'), value: 'UserInterface' }, - { label: t('feedback.behaviors', 'Behaviors'), value: 'Behaviors' }, - { label: t('feedback.missing_features', 'Missing features'), value: 'MissingFeatures' }, - { label: t('feedback.other', 'Other'), value: 'Other' } -]; - -interface ModuleLabelFactory { - selected: SelectItem[]; - label?: string; - open: boolean; - focus: boolean; - disabled: boolean; -} - -const ModuleLabelFactory = ({ - selected, - label, - open, - focus, - disabled -}: ModuleLabelFactory): JSX.Element => ( - - - - {selected.length > 0 ? selected[0].label : label} - - - - -); - -interface FeedbackLabelFactoryProps extends LabelFactoryProps { - showErr: boolean; -} - -const FeedbackLabelFactory = ({ - selected, - label, - open, - focus, - showErr -}: FeedbackLabelFactoryProps): JSX.Element => ( - - - {showErr ? ( - - {selected.length > 0 ? selected[0].label : label} - - ) : ( - - {selected.length > 0 ? selected[0].label : label} - - )} - - - {showErr ? ( - - ) : ( - - )} - -); - -const Feedback = (): JSX.Element => { - const t = getT(); - const allApps = useAppList(); - const apps = useMemo( - () => filter(allApps, (app) => !!app.sentryDsn), - - [allApps] - ); - const appItems = useMemo( - (): SelectItem[] => - map( - apps, - (app): SelectItem => ({ - label: app.display, - value: app.name - }) - ), - [apps] - ); - const account = useUserAccount(); - const [sentryEvent, dispatch] = useReducer(reducer, emptyEvent); - const [showErr, setShowErr] = useState(false); - const [limit, setLimit] = useState(0); - - const onAppSelect = useCallback( - (ev) => - dispatch({ - type: 'select-app', - payload: { - app: ev, - version: find(apps, ['name', ev])?.version - } - }), - [apps] - ); - - const onTopicSelect = useCallback((ev) => { - setShowErr(false); - dispatch({ type: 'select-topic', payload: ev }); - }, []); - - const onInputChange = useCallback< - NonNullable['onChange']> - >((event) => { - // eslint-disable-next-line no-param-reassign - event.target.style.height = 'auto'; - // eslint-disable-next-line no-param-reassign - event.target.style.height = `${25 + event.target.scrollHeight}px`; - if (event.target.value.length <= 500) { - setLimit(event.target.value.length); - dispatch({ type: 'set-message', payload: event.target.value }); - } - }, []); - - const checkTopicSelect = useCallback< - NonNullable['onKeyUp']> - >( - (event) => { - if (sentryEvent.extra?.topic === '0') { - setShowErr(true); - } else { - setShowErr(false); - } - if (event.key === 'Backspace' && sentryEvent.message?.length === 0) { - setShowErr(false); - } - }, - [setShowErr, sentryEvent] - ); - - const createSnackbar = useSnackbar(); - - const confirmHandler = useCallback(() => { - const feedbackId = feedback(sentryEvent); - createSnackbar( - feedbackId - ? { type: 'success', label: t('feedback.success', 'Thank you for your feedback') } - : { - type: 'error', - label: t('feedback.error', 'There was an error while sending your feedback') - } - ); - closeBoard('feedback'); - }, [sentryEvent, createSnackbar, t]); - - useEffect(() => { - dispatch({ - type: 'set-user', - payload: { id: account.id, name: account.displayName ?? account.name } - }); - }, [account]); - - const disabledSend = useMemo( - () => - (sentryEvent?.message?.length ?? 0) <= 0 || - sentryEvent.extra?.topic === '0' || - sentryEvent.extra?.app === '0', - [sentryEvent.message, sentryEvent.extra?.topic, sentryEvent.extra?.app] - ); - - const LabelFactory = useCallback( - (props: LabelFactoryProps) => , - [showErr] - ); - - const topics = useMemo(() => getTopics(t), [t]); - - const defaultTopic = useMemo( - (): Topic => - find(topics, (topic) => topic.value === sentryEvent.extra?.topic) ?? { label: '', value: '' }, - [sentryEvent.extra?.topic, topics] - ); - - return ( - - - - - {t('feedback.report_something', 'Do you want to report something?')} - - - {t( - 'feedback.explanation', - 'Please send us your feedback about your new experience with Zextras Server. Your opinion is meaningful for us to improve our product. So tell us what’s on your mind.' - )} - - - {t( - 'feedback.hint', - 'Remember: define the topic using module and macro area selectors before write your feedback. Thanks for your help.' - )} - - - - -