Home Explore Help
Sign In
SMusatov
/
sentry
mirror of https://github.com/getsentry/sentry
1
0
Fork 0
Files
Browse Source

ref(suggested-fix): Update animation (#47326)

Priscila Oliveira 1 year ago
parent
e6907ea452
commit
1fffc7f2a2
10 changed files with 38 additions and 60 deletions
Split View Show Diff Stats
  1. 0 1
      static/app/components/events/aiSuggestedSolution/banner-background.svg
  2. 0 0
      static/app/components/events/aiSuggestedSolution/banner-sentaur-dark-mode.svg
  3. 7 8
      static/app/components/events/aiSuggestedSolution/banner.tsx
  4. 0 1
      static/app/components/events/aiSuggestedSolution/experimentalFeatureBadge.tsx
  5. 0 7
      static/app/components/events/aiSuggestedSolution/index.tsx
  6. BIN
      static/app/components/events/aiSuggestedSolution/suggestion-wheel-of-fortune-dark-mode.mp4
  7. BIN
      static/app/components/events/aiSuggestedSolution/suggestion-wheel-of-fortune-light-mode.mp4
  8. 4 27
      static/app/components/events/aiSuggestedSolution/suggestion.tsx
  9. 6 16
      static/app/components/featureBadge.tsx
  10. 21 0
      static/images/spot/ai-suggestion-banner-background.svg

+ 0 - 1
static/app/components/events/aiSuggestedSolution/banner-background.svg
View File 

@@ -1 +0,0 @@
 
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="artwork" x="0" y="0" style="enable-background:new 0 0 503.8 81" version="1.1" viewBox="0 0 503.8 81"><style>.st0{fill:#ffe5b8}</style><path d="M503.8 0v77c0 2.2-1.8 4-4 4H20.3L0 18.2 269.9 0h233.9z" class="st0"/><path d="M503.8 77v4h-4c2.2 0 4-1.8 4-4z" class="st0"/></svg>

File diff suppressed because it is too large
+ 0 - 0
static/app/components/events/aiSuggestedSolution/banner-sentaur-dark-mode.svg


+ 7 - 8
static/app/components/events/aiSuggestedSolution/banner.tsx
View File 

@@ -1,23 +1,22 @@
 
 import styled from '@emotion/styled';
 
 
+import bannerBackground from 'sentry-images/spot/ai-suggestion-banner-background.svg';
 
+import bannerSentaur from 'sentry-images/spot/ai-suggestion-banner-sentaur.svg';
 
+import bannerStars from 'sentry-images/spot/ai-suggestion-banner-stars.svg';
 
+
 
 import {Button} from 'sentry/components/button';
 
 import {Panel, PanelBody} from 'sentry/components/panels';
 
 import {t} from 'sentry/locale';
 
 import {space} from 'sentry/styles/space';
 
 import TextBlock from 'sentry/views/settings/components/text/textBlock';
 
 
-import bannerBackground from './banner-background.svg';
 
-import bannerSentaurDarkMode from './banner-sentaur-dark-mode.svg';
 
-import bannerSentaurLightMode from './banner-sentaur-light-mode.svg';
 
-import bannerStars from './banner-stars.svg';
 
 import {ExperimentalFeatureBadge} from './experimentalFeatureBadge';
 
 
 type Props = {
 
-  darkMode: boolean;
 
   onViewSuggestion: () => void;
 
 };
 
 
-export function Banner({onViewSuggestion, darkMode}: Props) {
 
+export function Banner({onViewSuggestion}: Props) {
 
   return (
 
     <Wrapper>
 
       <Body withPadding>
 
@@ -33,7 +32,7 @@ export function Banner({onViewSuggestion, darkMode}: Props) {
 
         <Action>
 
           <Background src={bannerBackground} />
 
           <Stars src={bannerStars} />
 
-          <Sentaur src={darkMode ? bannerSentaurDarkMode : bannerSentaurLightMode} />
 
+          <Sentaur src={bannerSentaur} />
 
           <ViewSuggestionButton size="xs" onClick={onViewSuggestion}>
 
             {t('View Suggestion')}
 
           </ViewSuggestionButton>
 
@@ -68,7 +67,7 @@ const Title = styled('div')`
 
   grid-template-columns: max-content max-content;
 
   align-items: center;
 
   /* to be consistent with the feature badge size */
 
-  line-height: 20px;
 
+  line-height: ${space(2)};
 
 `;
 
 
 const Description = styled(TextBlock)`

+ 0 - 1
static/app/components/events/aiSuggestedSolution/experimentalFeatureBadge.tsx
View File 

@@ -4,7 +4,6 @@ import {t} from 'sentry/locale';
 
 export function ExperimentalFeatureBadge() {
 
   return (
 
     <FeatureBadge
 
-      size="sm"
 
       type="experimental"
 
       title={t(
 
         'This is an OpenAI generated solution that suggests a fix for this issue. Be aware that this may not be accurate.'

+ 0 - 7
static/app/components/events/aiSuggestedSolution/index.tsx
View File 

@@ -5,8 +5,6 @@ import {Button} from 'sentry/components/button';
 
 import {EventDataSection} from 'sentry/components/events/eventDataSection';
 
 import ExternalLink from 'sentry/components/links/externalLink';
 
 import {t, tct} from 'sentry/locale';
 
-import ConfigStore from 'sentry/stores/configStore';
 
-import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 
 import {Event, Project} from 'sentry/types';
 
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 
 import {getAnalyticsDataForEvent} from 'sentry/utils/events';
 
@@ -22,7 +20,6 @@ type Props = {
 
 
 export function AiSuggestedSolution({projectSlug, event}: Props) {
 
   const organization = useOrganization();
 
-  const config = useLegacyStore(ConfigStore);
 
   const [showDetails, setShowDetails] = useState(true);
 
   const [openSuggestion, setOpenSuggestion] = useState(false);
 
 
@@ -30,8 +27,6 @@ export function AiSuggestedSolution({projectSlug, event}: Props) {
 
     return null;
 
   }
 
 
-  const darkMode = config.theme === 'dark';
 
-
 
   return (
 
     <StyledEventDataSection
 
       type="ai-suggested-solution"
 
@@ -60,7 +55,6 @@ export function AiSuggestedSolution({projectSlug, event}: Props) {
 
       {showDetails ? (
 
         !openSuggestion ? (
 
           <Banner
 
-            darkMode={darkMode}
 
             onViewSuggestion={() => {
 
               trackAdvancedAnalyticsEvent(
 
                 'ai_suggested_solution.view_suggestion_button_clicked',
 
@@ -76,7 +70,6 @@ export function AiSuggestedSolution({projectSlug, event}: Props) {
 
           />
 
         ) : (
 
           <Suggestion
 
-            darkMode={darkMode}
 
             projectSlug={projectSlug}
 
             event={event}
 
             onHideSuggestion={() => {

BIN
static/app/components/events/aiSuggestedSolution/suggestion-wheel-of-fortune-dark-mode.mp4
View File


BIN
static/app/components/events/aiSuggestedSolution/suggestion-wheel-of-fortune-light-mode.mp4
View File


+ 4 - 27
static/app/components/events/aiSuggestedSolution/suggestion.tsx
View File 

@@ -1,6 +1,5 @@
 
 import {useCallback} from 'react';
 
 import {InjectedRouter} from 'react-router';
 
-import {css} from '@emotion/react';
 
 import styled from '@emotion/styled';
 
 
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
 
@@ -22,13 +21,10 @@ import useOrganization from 'sentry/utils/useOrganization';
 
 import useRouter from 'sentry/utils/useRouter';
 
 
 import {ExperimentalFeatureBadge} from './experimentalFeatureBadge';
 
-import suggestionWheelOfFortuneDarkMode from './suggestion-wheel-of-fortune-dark-mode.mp4';
 
-import suggestionWheelOfFortuneLightMode from './suggestion-wheel-of-fortune-light-mode.mp4';
 
 import {SuggestionLoaderMessage} from './suggestionLoaderMessage';
 
 import {useOpenAISuggestionLocalStorage} from './useOpenAISuggestionLocalStorage';
 
 
 type Props = {
 
-  darkMode: boolean;
 
   event: Event;
 
   onHideSuggestion: () => void;
 
   projectSlug: Project['slug'];
 
@@ -115,7 +111,7 @@ function ErrorDescription({
 
   return <SuggestionLoadingError onRetry={onRefetch} />;
 
 }
 
 
-export function Suggestion({onHideSuggestion, projectSlug, event, darkMode}: Props) {
 
+export function Suggestion({onHideSuggestion, projectSlug, event}: Props) {
 
   const organization = useOrganization();
 
   const router = useRouter();
 
   const [individualConsent, setIndividualConsent] = useOpenAISuggestionLocalStorage();
 
@@ -143,7 +139,7 @@ export function Suggestion({onHideSuggestion, projectSlug, event, darkMode}: Pro
 
   }, [onHideSuggestion]);
 
 
   return (
 
-    <Wrapper darkMode={darkMode}>
 
+    <Panel>
 
       <Header>
 
         <div>
 
           {t('AI Solution')}
 
@@ -156,17 +152,7 @@ export function Suggestion({onHideSuggestion, projectSlug, event, darkMode}: Pro
 
       <PanelBody>
 
         {dataIsLoading ? (
 
           <LoaderWrapper>
 
-            <video height="309px" autoPlay loop muted>
 
-              <source
 
-                src={
 
-                  darkMode
 
-                    ? suggestionWheelOfFortuneDarkMode
 
-                    : suggestionWheelOfFortuneLightMode
 
-                }
 
-                type="video/mp4"
 
-              />
 
-              {t('Your browser does not support the video tag.')}
 
-            </video>
 
+            <div className="ai-suggestion-wheel-of-fortune" />
 
             <SuggestionLoaderMessage />
 
           </LoaderWrapper>
 
         ) : dataIsError ? (
 
@@ -252,19 +238,10 @@ export function Suggestion({onHideSuggestion, projectSlug, event, darkMode}: Pro
 
           </ButtonBar>
 
         </Feedback>
 
       </PanelFooter>
 
-    </Wrapper>
 
+    </Panel>
 
   );
 
 }
 
 
-const Wrapper = styled(Panel)<{darkMode: boolean}>`
 
-  ${p =>
 
-    p.darkMode &&
 
-    css`
 
-      /* hack until we update the background of the loading video */
 
-      background: #2b2031;
 
-    `}
 
-`;
 
-
 
 const Header = styled(PanelHeader)`
 
   background: transparent;
 
   padding: ${space(1)} ${space(2)};

+ 6 - 16
static/app/components/featureBadge.tsx
View File 

@@ -14,7 +14,6 @@ type BadgeProps = {
 
   type: 'alpha' | 'beta' | 'new' | 'experimental';
 
   expiresAt?: Date;
 
   noTooltip?: boolean;
 
-  size?: 'xs' | 'sm';
 
   title?: string;
 
   variant?: 'indicator' | 'badge';
 
 };
 
@@ -40,7 +39,6 @@ const labels = {
 
 function BaseFeatureBadge({
 
   type,
 
   variant = 'badge',
 
-  size = 'xs',
 
   title,
 
   noTooltip,
 
   expiresAt,
 
@@ -62,16 +60,9 @@ function BaseFeatureBadge({
 
 
   return (
 
     <div {...props}>
 
-      <Tooltip
 
-        title={title ?? defaultTitles[type]}
 
-        disabled={noTooltip}
 
-        position="right"
 
-        containerDisplayMode="inline-flex"
 
-      >
 
+      <Tooltip title={title ?? defaultTitles[type]} disabled={noTooltip} position="right">
 
         <Fragment>
 
-          {variant === 'badge' && (
 
-            <StyledBadge size={size} type={type} text={labels[type]} />
 
-          )}
 
+          {variant === 'badge' && <StyledBadge type={type} text={labels[type]} />}
 
           {variant === 'indicator' && (
 
             <CircleIndicator color={theme.badge[type].indicatorColor} size={8} />
 
           )}
 
@@ -81,14 +72,13 @@ function BaseFeatureBadge({
 
   );
 
 }
 
 
-const StyledBadge = styled(Badge)<{size: 'xs' | 'sm'}>`
 
+const StyledBadge = styled(Badge)`
 
   margin: 0;
 
   padding: 0 ${space(0.75)};
 
-  line-height: ${p => (p.size === 'xs' ? space(2) : space(3))};
 
-  height: ${p => (p.size === 'xs' ? space(2) : space(3))};
 
+  line-height: ${space(2)};
 
+  height: ${space(2)};
 
   font-weight: normal;
 
-  font-size: ${p =>
 
-    p.size === 'xs' ? p.theme.fontSizeExtraSmall : p.theme.fontSizeSmall};
 
+  font-size: ${p => p.theme.fontSizeExtraSmall};
 
   vertical-align: middle;
 
 `;

+ 21 - 0
static/images/spot/ai-suggestion-banner-background.svg
View File 

@@ -0,0 +1,21 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<!-- Generator: Adobe Illustrator 27.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
+<svg version="1.1" id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+	 viewBox="0 0 503.8 81" style="enable-background:new 0 0 503.8 81;" xml:space="preserve">
 
+<style type="text/css">
 
+	.st0{fill:#AD6CAA;}
 
+	.st1{fill:#241C2A;}
 
+	.st2{fill:#8E4991;}
 
+	.st3{fill:#EFE4EF;}
 
+	.st4{fill:#AF6CAD;}
 
+	.st5{fill:#ECB532;}
 
+	.st6{fill:#ECB532;stroke:#241C2A;stroke-width:1.2315;stroke-miterlimit:10;}
 
+	.st7{fill:#ECB532;stroke:#241C2A;stroke-width:0.8535;stroke-miterlimit:10;}
 
+	.st8{fill:#ECB532;stroke:#241C2A;stroke-width:0.574;stroke-miterlimit:10;}
 
+	.st9{fill:#B39ED3;}
 
+	.st10{fill:#FCA9CB;}
 
+	.st11{fill:#FFE5B8;}
 
+</style>
 
+<path class="st10" d="M503.8,0v77c0,2.2-1.8,4-4,4H20.3L0,18.3L269.9,0H503.8z"/>
 
+<path class="st11" d="M503.8,77v4h-4C502,81,503.8,79.2,503.8,77z"/>
 
+</svg>

Some files were not shown because too many files changed in this diff