Skip to content

Commit 7a7a997

Browse files
jennmuengevanh
jennmueng
authored and
evanh
committed
feat(ai): UI Adjustements + Dynamic CTA (#81058)
- Dynamic CTA that changes with what's available inside the drawer - Moves the Seer Icon out of the icons library and makes it standalone - Adjusts padding, alignment, and visual weighting ![CleanShot 2024-11-19 at 15 37 09](https://github.com/user-attachments/assets/d60223a2-6329-4cb5-ab0d-76f7b18ed2e2)
1 parent 216fe6e commit 7a7a997

File tree

8 files changed

+393
-139
lines changed

8 files changed

+393
-139
lines changed

‎static/app/components/ai/SeerIcon.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {forwardRef} from 'react';
2+
import styled from '@emotion/styled';
3+
4+
import type {SVGIconProps} from 'sentry/icons/svgIcon';
5+
import {SvgIcon} from 'sentry/icons/svgIcon';
6+
7+
const SeerIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
8+
return (
9+
<SvgIcon {...props} ref={ref} viewBox="0 0 30 30">
10+
<StyledPath d="M14.0407,3.1458L3.5742,17.0376c-.2989.3967-.2327.9584.1501,1.2748l10.4917,8.6705c.3436.284.8405.2838,1.1839-.0005l10.4717-8.6691c.3827-.3169.4483-.8788.1488-1.2753L15.5235,3.1448c-.3719-.4922-1.1115-.4917-1.4828.001Z" />
11+
<StyledPath d="M14.1483,12.3135l-5.1122,4.0552c-.3332.2643-.314.6812.0426.9278l5.1121,3.5339c.3337.2307.8482.2312,1.1828.0012l5.1412-3.534c.359-.2468.3782-.6657.0427-.9303l-5.1411-4.0551c-.3449-.272-.9243-.2714-1.2682.0013Z" />
12+
<StyledLine x1="14.7558" y1="15.9343" x2="14.7558" y2="17.2053" />
13+
</SvgIcon>
14+
);
15+
});
16+
17+
SeerIcon.displayName = 'SeerIcon';
18+
19+
export {SeerIcon};
20+
21+
const StyledPath = styled('path')`
22+
fill: none;
23+
stroke: currentColor;
24+
stroke-linecap: round;
25+
stroke-linejoin: round;
26+
stroke-width: 2.25px;
27+
`;
28+
29+
const StyledLine = styled('line')`
30+
fill: none;
31+
stroke: currentColor;
32+
stroke-linecap: round;
33+
stroke-linejoin: round;
34+
stroke-width: 2.25px;
35+
`;

‎static/app/components/group/groupSummary.tsx‎

Lines changed: 49 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,10 @@ export function GroupSummary({
9494
];
9595

9696
return (
97-
<Body preview={preview} data-testid="group-summary">
97+
<div data-testid="group-summary">
9898
{isError ? <div>{t('Error loading summary')}</div> : null}
9999
<Content>
100-
<InsightGrid preview={preview}>
100+
<InsightGrid>
101101
{insightCards.map(card => {
102102
// Hide the card if we're not loading and there's no insight
103103
if (!isPending && !card.insight) {
@@ -110,53 +110,52 @@ export function GroupSummary({
110110
<CardTitleIcon>{card.icon}</CardTitleIcon>
111111
<CardTitleText>{card.title}</CardTitleText>
112112
</CardTitle>
113-
{isPending ? (
114-
<CardContent>
115-
<Placeholder height="1.5rem" />
116-
</CardContent>
117-
) : (
118-
card.insight && (
119-
<CardContent
120-
dangerouslySetInnerHTML={{
121-
__html: marked(
122-
preview
123-
? card.insight.replace(/\*\*/g, '') ?? ''
124-
: card.insight ?? ''
125-
),
126-
}}
127-
/>
128-
)
129-
)}
113+
<CardContentContainer>
114+
<CardLineDecorationWrapper>
115+
<CardLineDecoration />
116+
</CardLineDecorationWrapper>
117+
{isPending ? (
118+
<CardContent>
119+
<Placeholder height="1.5rem" />
120+
</CardContent>
121+
) : (
122+
card.insight && (
123+
<CardContent
124+
dangerouslySetInnerHTML={{
125+
__html: marked(
126+
preview
127+
? card.insight.replace(/\*\*/g, '') ?? ''
128+
: card.insight ?? ''
129+
),
130+
}}
131+
/>
132+
)
133+
)}
134+
</CardContentContainer>
130135
</InsightCard>
131136
);
132137
})}
133138
</InsightGrid>
134139
</Content>
135-
</Body>
140+
</div>
136141
);
137142
}
138143

139-
const Body = styled('div')<{preview?: boolean}>`
140-
padding: ${p => (p.preview ? 0 : `0 ${space(2)} ${space(0.5)} ${space(2)}`)};
141-
`;
142-
143144
const Content = styled('div')`
144145
display: flex;
145146
flex-direction: column;
146147
gap: ${space(1)};
147148
`;
148149

149-
const InsightGrid = styled('div')<{preview?: boolean}>`
150+
const InsightGrid = styled('div')`
150151
display: flex;
151152
flex-direction: column;
152153
gap: ${space(1)};
153-
margin-top: ${p => (p.preview ? 0 : space(1))};
154154
`;
155155

156156
const InsightCard = styled('div')`
157157
display: flex;
158158
flex-direction: column;
159-
padding: ${space(0.5)};
160159
border-radius: ${p => p.theme.borderRadius};
161160
background: ${p => p.theme.background};
162161
width: 100%;
@@ -174,6 +173,7 @@ const CardTitle = styled('div')<{preview?: boolean}>`
174173
const CardTitleText = styled('p')`
175174
margin: 0;
176175
font-size: ${p => p.theme.fontSizeMedium};
176+
font-weight: ${p => p.theme.fontWeightBold};
177177
`;
178178

179179
const CardTitleIcon = styled('div')`
@@ -182,17 +182,36 @@ const CardTitleIcon = styled('div')`
182182
color: ${p => p.theme.subText};
183183
`;
184184

185+
const CardContentContainer = styled('div')`
186+
display: flex;
187+
align-items: center;
188+
gap: ${space(1)};
189+
`;
190+
191+
const CardLineDecorationWrapper = styled('div')`
192+
display: flex;
193+
width: 14px;
194+
align-self: stretch;
195+
justify-content: center;
196+
flex-shrink: 0;
197+
padding: 0.275rem 0;
198+
`;
199+
200+
const CardLineDecoration = styled('div')`
201+
width: 2px;
202+
align-self: stretch;
203+
background-color: ${p => p.theme.border};
204+
`;
205+
185206
const CardContent = styled('div')`
186207
overflow-wrap: break-word;
187208
word-break: break-word;
188-
padding-left: 14px;
189-
border-left: 1px solid ${p => p.theme.border};
190-
margin-left: ${space(0.75)};
191209
p {
192210
margin: 0;
193211
white-space: pre-wrap;
194212
}
195213
code {
196214
word-break: break-all;
197215
}
216+
flex: 1;
198217
`;

‎static/app/icons/iconSeer.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎static/app/icons/icons.stories.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,6 @@ const SECTIONS: TSection[] = [
147147
name: 'Timer',
148148
defaultProps: {},
149149
},
150-
{
151-
id: 'seer',
152-
groups: ['product'],
153-
keywords: ['ai'],
154-
name: 'Seer',
155-
defaultProps: {},
156-
},
157150
],
158151
},
159152
{

‎static/app/icons/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ export {IconReturn} from './iconReturn';
8989
export {IconRewind10} from './iconRewind10';
9090
export {IconSad} from './iconSad';
9191
export {IconSearch} from './iconSearch';
92-
export {IconSeer} from './iconSeer';
9392
export {IconSentry} from './iconSentry';
9493
export {IconSettings} from './iconSettings';
9594
export {IconShow} from './iconShow';

‎static/app/views/issueDetails/streamline/solutionsHubDrawer.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
33

44
import starImage from 'sentry-images/spot/banner-star.svg';
55

6+
import {SeerIcon} from 'sentry/components/ai/SeerIcon';
67
import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
78
import FeatureBadge from 'sentry/components/badge/featureBadge';
89
import {Breadcrumbs as NavigationBreadcrumbs} from 'sentry/components/breadcrumbs';
@@ -18,7 +19,7 @@ import {GroupSummary, useGroupSummary} from 'sentry/components/group/groupSummar
1819
import HookOrDefault from 'sentry/components/hookOrDefault';
1920
import Input from 'sentry/components/input';
2021
import LoadingIndicator from 'sentry/components/loadingIndicator';
21-
import {IconDocs, IconSeer} from 'sentry/icons';
22+
import {IconDocs} from 'sentry/icons';
2223
import {t, tct} from 'sentry/locale';
2324
import {space} from 'sentry/styles/space';
2425
import {EntryType, type Event} from 'sentry/types/event';
@@ -211,7 +212,7 @@ export function SolutionsHubDrawer({group, project, event}: SolutionsHubDrawerPr
211212
)}
212213
<HeaderText>
213214
<HeaderContainer>
214-
<IconSeer size="lg" />
215+
<SeerIcon size="lg" />
215216
{t('Sentry AI')}
216217
<StyledFeatureBadge
217218
type="beta"
@@ -409,7 +410,7 @@ const StyledCard = styled('div')`
409410
border: 1px solid ${p => p.theme.border};
410411
overflow: hidden;
411412
box-shadow: ${p => p.theme.dropShadowMedium};
412-
padding-bottom: ${space(1)};
413+
padding: ${space(1.5)} ${space(2)};
413414
`;
414415

415416
const HeaderText = styled('div')`

0 commit comments

Comments
 (0)