Skip to content

Commit

Permalink
ref(feedback): Refactor the 3 feedback integrations we have into one …
Browse files Browse the repository at this point in the history
…base hook and two views (#61411)

We don't need to copy+paste here 3x!


Also, we probably don't need any of this code in sentry, because
Feedback is only initialized in getsentry. I can followup with those
moves.
  • Loading branch information
ryan953 authored Dec 8, 2023
1 parent a825290 commit dca84ab
Show file tree
Hide file tree
Showing 24 changed files with 133 additions and 170 deletions.
41 changes: 0 additions & 41 deletions static/app/components/feedback/widget/feedbackWidget.tsx

This file was deleted.

22 changes: 22 additions & 0 deletions static/app/components/feedback/widget/feedbackWidgetButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import {useRef} from 'react';

import {Button} from 'sentry/components/button';
import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
import {IconMegaphone} from 'sentry/icons/iconMegaphone';
import {t} from 'sentry/locale';

export default function FeedbackWidgetButton() {
const buttonRef = useRef<HTMLButtonElement>(null);
const feedback = useFeedbackWidget({buttonRef});

// Do not show button if Feedback integration is not enabled
if (!feedback) {
return null;
}

return (
<Button ref={buttonRef} size="sm" icon={<IconMegaphone />}>
{t('Give Feedback')}
</Button>
);
}
27 changes: 27 additions & 0 deletions static/app/components/feedback/widget/floatingFeedbackWidget.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {css, Global} from '@emotion/react';

import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
import theme from 'sentry/utils/theme';

/**
* Use this to display the Feedback widget in certain routes/components
*/
export default function FloatingFeedbackWidget() {
const feedback = useFeedbackWidget({});

// No need for global styles if Feedback integration is not enabled
if (!feedback) {
return null;
}

// z-index needs to be below our indicators which is 10001
return (
<Global
styles={css`
#sentry-feedback {
--z-index: ${theme.zIndex.toast - 1};
}
`}
/>
);
}
48 changes: 48 additions & 0 deletions static/app/components/feedback/widget/useFeedbackWidget.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import {RefObject, useEffect} from 'react';
import {Feedback, getCurrentHub} from '@sentry/react';

import {t} from 'sentry/locale';
import ConfigStore from 'sentry/stores/configStore';
import {useLegacyStore} from 'sentry/stores/useLegacyStore';

interface Props {
buttonRef?: RefObject<HTMLButtonElement>;
}

export default function useFeedbackWidget({buttonRef}: Props) {
const config = useLegacyStore(ConfigStore);
const hub = getCurrentHub();
const feedback = hub.getIntegration(Feedback);

useEffect(() => {
if (!feedback) {
return undefined;
}

const options = {
colorScheme: config.theme === 'dark' ? ('dark' as const) : ('light' as const),
buttonLabel: t('Give Feedback'),
submitButtonLabel: t('Send Feedback'),
messagePlaceholder: t('What did you expect?'),
formTitle: t('Give Feedback'),
};

if (buttonRef) {
if (buttonRef.current) {
const widget = feedback.attachTo(buttonRef.current, options);
return () => {
feedback.removeWidget(widget);
};
}
} else {
const widget = feedback.createWidget(options);
return () => {
feedback.removeWidget(widget);
};
}

return undefined;
}, [buttonRef, config.theme, feedback]);

return feedback;
}
4 changes: 2 additions & 2 deletions static/app/components/profiling/profileHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import {useCallback, useMemo} from 'react';
import styled from '@emotion/styled';

import {Button} from 'sentry/components/button';
import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
import * as Layout from 'sentry/components/layouts/thirds';
import {
ProfilingBreadcrumbs,
ProfilingBreadcrumbsProps,
} from 'sentry/components/profiling/profilingBreadcrumbs';
import ProfilingFeedbackButton from 'sentry/components/profiling/profilingFeedbackButton';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {Event} from 'sentry/types';
Expand Down Expand Up @@ -87,7 +87,7 @@ function ProfileHeader({transaction, projectId, eventId}: ProfileHeaderProps) {
</SmallerProfilingBreadcrumbsWrapper>
</SmallerHeaderContent>
<StyledHeaderActions>
<ProfilingFeedbackButton />
<FeedbackWidgetButton />
{transactionTarget && (
<Button size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
{t('Go to Transaction')}
Expand Down
46 changes: 0 additions & 46 deletions static/app/components/profiling/profilingFeedbackButton.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions static/app/views/ddm/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from '@emotion/styled';

import ButtonBar from 'sentry/components/buttonBar';
import FeatureBadge from 'sentry/components/featureBadge';
import FeedbackWidget from 'sentry/components/feedback/widget/feedbackWidget';
import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
import {GithubFeedbackButton} from 'sentry/components/githubFeedbackButton';
import FullViewport from 'sentry/components/layouts/fullViewport';
import * as Layout from 'sentry/components/layouts/thirds';
Expand Down Expand Up @@ -49,7 +49,7 @@ function MainContent({showTraceTable}: {showTraceTable?: boolean}) {
</Layout.HeaderActions>
</Layout.Header>
<Layout.Body>
<FeedbackWidget />
<FloatingFeedbackWidget />
<Layout.Main fullWidth>
<PaddedContainer>
<PageFilterBar condensed>
Expand Down
4 changes: 2 additions & 2 deletions static/app/views/feedback/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {RouteComponentProps} from 'react-router';

import Feature from 'sentry/components/acl/feature';
import Alert from 'sentry/components/alert';
import FeedbackWidget from 'sentry/components/feedback/widget/feedbackWidget';
import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
import * as Layout from 'sentry/components/layouts/thirds';
import NoProjectMessage from 'sentry/components/noProjectMessage';
import {t} from 'sentry/locale';
Expand All @@ -22,7 +22,7 @@ export default function FeedbackContainer({children}: Props) {
renderDisabled={NoAccess}
>
<NoProjectMessage organization={organization}>
<FeedbackWidget />
<FloatingFeedbackWidget />
{children}
</NoProjectMessage>
</Feature>
Expand Down
46 changes: 0 additions & 46 deletions static/app/views/monitors/components/cronsFeedbackButton.tsx

This file was deleted.

5 changes: 2 additions & 3 deletions static/app/views/monitors/components/monitorHeaderActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {deleteMonitor, updateMonitor} from 'sentry/actionCreators/monitors';
import {Button} from 'sentry/components/button';
import ButtonBar from 'sentry/components/buttonBar';
import Confirm from 'sentry/components/confirm';
import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
import {IconDelete, IconEdit, IconSubscribed, IconUnsubscribed} from 'sentry/icons';
import {t} from 'sentry/locale';
import useApi from 'sentry/utils/useApi';
Expand All @@ -12,8 +13,6 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';

import {Monitor, MonitorObjectStatus} from '../types';

import CronsFeedbackButton from './cronsFeedbackButton';

type Props = {
monitor: Monitor;
onUpdate: (data: Monitor) => void;
Expand Down Expand Up @@ -56,7 +55,7 @@ function MonitorHeaderActions({monitor, orgId, onUpdate}: Props) {

return (
<ButtonBar gap={1}>
<CronsFeedbackButton />
<FeedbackWidgetButton />
<Confirm
onConfirm={handleDelete}
message={t('Are you sure you want to permanently delete this cron monitor?')}
Expand Down
4 changes: 2 additions & 2 deletions static/app/views/monitors/create.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import {Fragment} from 'react';
import {browserHistory} from 'react-router';

import Breadcrumbs from 'sentry/components/breadcrumbs';
import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
import * as Layout from 'sentry/components/layouts/thirds';
import {t} from 'sentry/locale';
import useOrganization from 'sentry/utils/useOrganization';
import usePageFilters from 'sentry/utils/usePageFilters';
import {normalizeUrl} from 'sentry/utils/withDomainRequired';

import CronsFeedbackButton from './components/cronsFeedbackButton';
import MonitorForm from './components/monitorForm';
import {Monitor} from './types';

Expand Down Expand Up @@ -49,7 +49,7 @@ function CreateMonitor() {
<Layout.Title>{t('Add Monitor')}</Layout.Title>
</Layout.HeaderContent>
<Layout.HeaderActions>
<CronsFeedbackButton />
<FeedbackWidgetButton />
</Layout.HeaderActions>
</Layout.Header>
<Layout.Body>
Expand Down
4 changes: 2 additions & 2 deletions static/app/views/monitors/overview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import * as qs from 'query-string';

import ButtonBar from 'sentry/components/buttonBar';
import FeatureBadge from 'sentry/components/featureBadge';
import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
import * as Layout from 'sentry/components/layouts/thirds';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
Expand All @@ -24,7 +25,6 @@ import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyti
import useOrganization from 'sentry/utils/useOrganization';
import useRouter from 'sentry/utils/useRouter';

import CronsFeedbackButton from './components/cronsFeedbackButton';
import {
CronsLandingPanel,
isValidGuide,
Expand Down Expand Up @@ -85,7 +85,7 @@ export default function Monitors() {
</Layout.HeaderContent>
<Layout.HeaderActions>
<ButtonBar gap={1}>
<CronsFeedbackButton />
<FeedbackWidgetButton />
{showAddMonitor && (
<NewMonitorButton size="sm" icon={<IconAdd isCircled size="xs" />}>
{t('Add Monitor')}
Expand Down
4 changes: 2 additions & 2 deletions static/app/views/performance/browser/resources/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';

import Breadcrumbs from 'sentry/components/breadcrumbs';
import FeedbackWidget from 'sentry/components/feedback/widget/feedbackWidget';
import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
import * as Layout from 'sentry/components/layouts/thirds';
import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
Expand Down Expand Up @@ -63,7 +63,7 @@ function ResourcesLandingPage() {
</Layout.Header>
<Layout.Body>
<Layout.Main fullWidth>
<FeedbackWidget />
<FloatingFeedbackWidget />
<PageErrorAlert />
<FilterOptionsContainer columnCount={2}>
<PageFilterBar condensed>
Expand Down
Loading

0 comments on commit dca84ab

Please sign in to comment.