Skip to content

Commit 700116f

Browse files
sgomezvillamorsgomezvillamor
authored
Merge branch 'datahub-project:master' into master
2 parents 891f393 + d2bb33f commit 700116f

File tree

79 files changed

+4004
-658
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+4004
-658
lines changed

‎datahub-frontend/app/controllers/Application.java

+14-2
Original file line numberDiff line numberDiff line change
@@ -390,19 +390,31 @@ private void logSlowQuery(Http.Request request, String resolvedUri, float durati
390390
Optional<Cookie> actorCookie = request.getCookie("actor");
391391
String actorValue = actorCookie.isPresent() ? actorCookie.get().value() : "N/A";
392392

393+
// Get the JSON body
393394
try {
394395
ObjectMapper mapper = new ObjectMapper();
395396
JsonNode jsonNode = request.body().asJson();
396397
((ObjectNode) jsonNode).remove("query");
397-
jsonBody.append(mapper.writerWithDefaultPrettyPrinter().writeValueAsString(jsonNode));
398+
jsonBody.append(mapper.writeValueAsString(jsonNode));
398399
} catch (Exception e) {
399400
logger.info("GraphQL Request Received: {}, Unable to parse JSON body", resolvedUri);
400401
}
401402
String jsonBodyStr = jsonBody.toString();
403+
404+
// Get the query string
405+
StringBuilder query = new StringBuilder();
406+
try {
407+
ObjectMapper mapper = new ObjectMapper();
408+
query.append(mapper.writeValueAsString(request.queryString()));
409+
} catch (Exception e) {
410+
logger.info("GraphQL Request Received: {}, Unable to parse query string", resolvedUri);
411+
}
412+
String queryString = query.toString();
413+
402414
logger.info(
403415
"Slow GraphQL Request Received: {}, Request query string: {}, Request actor: {}, Request JSON: {}, Request completed in {} ms",
404416
resolvedUri,
405-
request.queryString(),
417+
queryString,
406418
actorValue,
407419
jsonBodyStr,
408420
duration);

‎datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx

+22-27
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import { ButtonVariantValues } from '@components/components/Button/types';
2+
import { MATERIAL_UI_ICONS, PHOSPHOR_ICONS } from '@components/components/Icon/constants';
3+
import { SizeValues } from '@components/theme/config';
14
import React from 'react';
25

36
import type { Meta, StoryObj } from '@storybook/react';
@@ -33,7 +36,7 @@ const meta = {
3336
},
3437
variant: {
3538
description: 'The variant of the Button.',
36-
options: ['filled', 'outline', 'text'],
39+
options: Object.values(ButtonVariantValues),
3740
table: {
3841
defaultValue: { summary: buttonDefaults.variant },
3942
},
@@ -43,7 +46,7 @@ const meta = {
4346
},
4447
color: {
4548
description: 'The color of the Button.',
46-
options: ['violet', 'green', 'red', 'blue', 'gray'],
49+
options: ['violet', 'green', 'red', 'gray'],
4750
table: {
4851
defaultValue: { summary: buttonDefaults.color },
4952
},
@@ -53,31 +56,22 @@ const meta = {
5356
},
5457
size: {
5558
description: 'The size of the Button.',
56-
options: ['sm', 'md', 'lg', 'xl'],
59+
options: Object.values(SizeValues),
5760
table: {
5861
defaultValue: { summary: buttonDefaults.size },
5962
},
6063
control: {
6164
type: 'select',
6265
},
6366
},
64-
iconSize: {
65-
description: 'The optional size of the Icon.',
66-
options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
67-
table: {
68-
defaultValue: {
69-
summary: 'undefined',
70-
detail: 'The size of the Button will be used as the size of the Icon',
71-
},
72-
},
73-
control: {
74-
type: 'select',
75-
},
76-
},
7767
icon: {
7868
description: 'The icon to display in the Button.',
7969
type: 'string',
8070
options: AVAILABLE_ICONS,
71+
mapping: Object.fromEntries([
72+
...MATERIAL_UI_ICONS.map((icon) => [icon, { icon, source: 'material', size: '2xl' }]),
73+
...PHOSPHOR_ICONS.map((icon) => [icon, { icon, source: 'phosphor', size: '2xl' }]),
74+
]),
8175
table: {
8276
defaultValue: { summary: 'undefined' },
8377
},
@@ -143,7 +137,7 @@ const meta = {
143137

144138
// Define defaults
145139
args: {
146-
children: 'Button Content',
140+
children: 'Button',
147141
variant: buttonDefaults.variant,
148142
color: buttonDefaults.color,
149143
size: buttonDefaults.size,
@@ -167,7 +161,7 @@ type Story = StoryObj<typeof meta>;
167161
// Pass props to this so that it can be customized via the UI props panel
168162
export const sandbox: Story = {
169163
tags: ['dev'],
170-
render: (props) => <Button {...props}>Button</Button>,
164+
render: (props) => <Button {...props} />,
171165
};
172166

173167
export const states = () => (
@@ -191,26 +185,27 @@ export const colors = () => (
191185

192186
export const sizes = () => (
193187
<GridList>
194-
<Button size="sm">Small Button</Button>
195-
<Button size="md">Regular Button</Button>
196-
<Button size="lg">Large Button</Button>
197-
<Button size="xl">XLarge Button</Button>
188+
<Button size="xs">XSmall</Button>
189+
<Button size="sm">Small</Button>
190+
<Button size="md">Regular</Button>
191+
<Button size="lg">Large</Button>
192+
<Button size="xl">XLarge</Button>
198193
</GridList>
199194
);
200195

201196
export const withIcon = () => (
202197
<GridList>
203-
<Button icon="Add">Icon Left</Button>
204-
<Button icon="Add" iconPosition="right">
198+
<Button icon={{ icon: 'Add', source: 'material' }}>Icon Left</Button>
199+
<Button icon={{ icon: 'Add', source: 'material' }} iconPosition="right">
205200
Icon Right
206201
</Button>
207202
</GridList>
208203
);
209204

210205
export const circleShape = () => (
211206
<GridList>
212-
<Button icon="Add" size="sm" isCircle />
213-
<Button icon="Add" isCircle />
214-
<Button icon="Add" size="lg" isCircle />
207+
<Button icon={{ icon: 'Add', source: 'material' }} size="sm" isCircle />
208+
<Button icon={{ icon: 'Add', source: 'material' }} isCircle />
209+
<Button icon={{ icon: 'Add', source: 'material' }} size="lg" isCircle />
215210
</GridList>
216211
);

‎datahub-web-react/src/alchemy-components/components/Button/Button.tsx

+4-9
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,11 @@ export const Button = ({
2424
size = buttonDefaults.size,
2525
icon, // default undefined
2626
iconPosition = buttonDefaults.iconPosition,
27-
iconSize,
2827
isCircle = buttonDefaults.isCircle,
2928
isLoading = buttonDefaults.isLoading,
3029
isDisabled = buttonDefaults.isDisabled,
3130
isActive = buttonDefaults.isActive,
3231
children,
33-
iconSource,
34-
iconColor,
3532
...props
3633
}: ButtonProps) => {
3734
const styleProps = {
@@ -42,6 +39,7 @@ export const Button = ({
4239
isLoading,
4340
isActive,
4441
isDisabled,
42+
hasChildren: !!children,
4543
};
4644

4745
if (isLoading) {
@@ -52,15 +50,12 @@ export const Button = ({
5250
);
5351
}
5452

53+
// Prefer `icon.size` over `size` for icon size
5554
return (
5655
<ButtonBase {...styleProps} {...props}>
57-
{icon && iconPosition === 'left' && (
58-
<Icon icon={icon} color={iconColor} size={iconSize || size} source={iconSource} />
59-
)}
56+
{icon && iconPosition === 'left' && <Icon size={size} {...icon} />}
6057
{!isCircle && children}
61-
{icon && iconPosition === 'right' && (
62-
<Icon icon={icon} color={iconColor} size={iconSize || size} source={iconSource} />
63-
)}
58+
{icon && iconPosition === 'right' && <Icon size={size} {...icon} />}
6459
</ButtonBase>
6560
);
6661
};

‎datahub-web-react/src/alchemy-components/components/Button/types.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1+
import { IconProps } from '@components/components/Icon/types';
12
import { ButtonHTMLAttributes } from 'react';
23

3-
import type { IconNames } from '@components';
4-
import type { SizeOptions, ColorOptions, FontSizeOptions } from '@components/theme/config';
5-
import { IconSource } from '../Icon/types';
4+
import type { SizeOptions, ColorOptions } from '@components/theme/config';
65

7-
export type ButtonVariant = 'filled' | 'outline' | 'text';
6+
export enum ButtonVariantValues {
7+
filled = 'filled',
8+
outline = 'outline',
9+
text = 'text',
10+
}
11+
export type ButtonVariant = keyof typeof ButtonVariantValues;
812

913
export interface ButtonPropsDefaults {
1014
variant: ButtonVariant;
@@ -20,10 +24,7 @@ export interface ButtonPropsDefaults {
2024
export interface ButtonProps
2125
extends Partial<ButtonPropsDefaults>,
2226
Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
23-
icon?: IconNames;
24-
iconSize?: FontSizeOptions;
25-
iconSource?: IconSource;
26-
iconColor?: ColorOptions;
27+
icon?: IconProps;
2728
}
2829

29-
export type ButtonStyleProps = Omit<ButtonPropsDefaults, 'iconPosition'>;
30+
export type ButtonStyleProps = Omit<ButtonPropsDefaults, 'iconPosition'> & { hasChildren: boolean };

‎datahub-web-react/src/alchemy-components/components/Button/utils.ts

+12-30
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions): Colo
8181

8282
bgColor: colors.transparent,
8383
borderColor: colors.transparent,
84-
hoverBgColor: colors.transparent,
84+
hoverBgColor: colors.gray[1500],
8585
activeBgColor: colors.transparent,
8686
disabledBgColor: colors.transparent,
8787
disabledBorderColor: colors.transparent,
@@ -151,26 +151,7 @@ const getButtonFontStyles = (size: SizeOptions) => {
151151
lineHeight: typography.lineHeights.none,
152152
};
153153

154-
const sizeStyles = {
155-
sm: {
156-
...baseFontStyles,
157-
fontSize: getFontSize(size), // 12px
158-
},
159-
md: {
160-
...baseFontStyles,
161-
fontSize: getFontSize(size), // 14px
162-
},
163-
lg: {
164-
...baseFontStyles,
165-
fontSize: getFontSize(size), // 16px
166-
},
167-
xl: {
168-
...baseFontStyles,
169-
fontSize: getFontSize(size), // 18px
170-
},
171-
};
172-
173-
return sizeStyles[size];
154+
return { ...baseFontStyles, fontSize: getFontSize(size) };
174155
};
175156

176157
// Generate radii styles for button
@@ -180,13 +161,14 @@ const getButtonRadiiStyles = (isCircle: boolean) => {
180161
};
181162

182163
// Generate padding styles for button
183-
const getButtonPadding = (size: SizeOptions, variant: ButtonVariant, isCircle: boolean) => {
164+
const getButtonPadding = (size: SizeOptions, hasChildren: boolean, isCircle: boolean) => {
184165
if (isCircle) return { padding: spacing.xsm };
166+
if (!hasChildren) return { padding: spacing.xsm };
185167

186168
const paddingStyles = {
187169
xs: {
188-
vertical: 0,
189-
horizontal: 0,
170+
vertical: 6,
171+
horizontal: 6,
190172
},
191173
sm: {
192174
vertical: 8,
@@ -208,7 +190,7 @@ const getButtonPadding = (size: SizeOptions, variant: ButtonVariant, isCircle: b
208190

209191
const selectedStyle = paddingStyles[size];
210192
const verticalPadding = selectedStyle.vertical;
211-
const horizontalPadding = variant === 'text' ? 0 : selectedStyle.horizontal;
193+
const horizontalPadding = selectedStyle.horizontal;
212194
return { padding: `${verticalPadding}px ${horizontalPadding}px` };
213195
};
214196

@@ -221,16 +203,16 @@ const getButtonActiveStyles = (colorStyles: ColorStyles) => ({
221203
});
222204

223205
// Generate loading styles for button
224-
const getButtonLoadingStyles = () => ({
206+
const getButtonLoadingStyles = (): CSSObject => ({
225207
pointerEvents: 'none',
226208
opacity: 0.75,
227209
});
228210

229211
/*
230212
* Main function to generate styles for button
231213
*/
232-
export const getButtonStyle = (props: ButtonStyleProps) => {
233-
const { variant, color, size, isCircle, isActive, isLoading, isDisabled } = props;
214+
export const getButtonStyle = (props: ButtonStyleProps): CSSObject => {
215+
const { variant, color, size, isCircle, isActive, isLoading, isDisabled, hasChildren } = props;
234216

235217
// Get map of colors
236218
const colorStyles = getButtonColorStyles(variant, color);
@@ -239,10 +221,10 @@ export const getButtonStyle = (props: ButtonStyleProps) => {
239221
const variantStyles = getButtonVariantStyles(variant, colorStyles);
240222
const fontStyles = getButtonFontStyles(size);
241223
const radiiStyles = getButtonRadiiStyles(isCircle);
242-
const paddingStyles = getButtonPadding(size, variant, isCircle);
224+
const paddingStyles = getButtonPadding(size, hasChildren, isCircle);
243225

244226
// Base of all generated styles
245-
let styles = {
227+
let styles: CSSObject = {
246228
...variantStyles,
247229
...fontStyles,
248230
...radiiStyles,

‎datahub-web-react/src/alchemy-components/components/Drawer/Drawer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Drawer = ({
2626
{onBack && (
2727
<Button
2828
color="gray"
29-
icon="ArrowBack"
29+
icon={{ icon: 'ArrowBack', source: 'material' }}
3030
iconPosition="left"
3131
isCircle
3232
onClick={() => onBack?.()}
@@ -41,7 +41,7 @@ export const Drawer = ({
4141
{closable && (
4242
<Button
4343
color="gray"
44-
icon="Close"
44+
icon={{ icon: 'Close', source: 'material' }}
4545
iconPosition="left"
4646
isCircle
4747
onClick={() => onClose?.()}

‎datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const meta = {
5050
subTitle: 'Description of the card',
5151
renderControls: () => (
5252
<>
53-
<Button icon="Add" variant="outline" size="md">
53+
<Button icon={{ icon: 'Add', source: 'material' }} variant="outline" size="md">
5454
Assertion
5555
</Button>
5656
<SimpleSelect

‎datahub-web-react/src/alchemy-components/components/Icon/constants.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const MATERIAL_UI_ICONS = [
1+
export const MATERIAL_UI_ICONS = [
22
'AccountCircle',
33
'AccountTree',
44
'AddCircle',
@@ -546,7 +546,7 @@ const MATERIAL_UI_ICONS = [
546546
'ZoomOutMap',
547547
];
548548

549-
const PHOSPHOR_ICONS = [
549+
export const PHOSPHOR_ICONS = [
550550
'Activity',
551551
'AddressBook',
552552
'Airplane',

‎datahub-web-react/src/alchemy-components/components/Input/Input.stories.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { MATERIAL_UI_ICONS, PHOSPHOR_ICONS } from '@components/components/Icon/constants';
12
import React from 'react';
23

34
import type { Meta, StoryObj } from '@storybook/react';
@@ -54,6 +55,10 @@ const meta = {
5455
description: 'The icon to display in the Input.',
5556
type: 'string',
5657
options: AVAILABLE_ICONS,
58+
mapping: Object.fromEntries([
59+
...MATERIAL_UI_ICONS.map((icon) => [icon, { icon, source: 'material' }]),
60+
...PHOSPHOR_ICONS.map((icon) => [icon, { icon, source: 'phosphor' }]),
61+
]),
5762
table: {
5863
defaultValue: { summary: 'undefined' },
5964
},

0 commit comments

Comments
 (0)