Skip to content

Commit 1e04935

Browse files
hsheth2hsheth2
authored
Merge branch 'datahub-project:master' into master
2 parents 3d32042 + 1fca985 commit 1e04935

File tree

122 files changed

+3464
-1150
lines changed

Some content is hidden

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

122 files changed

+3464
-1150
lines changed

‎.github/workflows/docker-unified.yml

+4-3
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,9 @@ env:
3333
#### IMPORTANT ####
3434

3535
DOCKER_CACHE: "DEPOT"
36-
DEPOT_PROJECT_ID: ${{ vars.DEPOT_PROJECT_ID }}
37-
DEPOT_TOKEN: ${{ secrets.DEPOT_TOKEN }}
36+
DEPOT_PROJECT_ID: "${{ vars.DEPOT_PROJECT_ID }}"
37+
DEPOT_TOKEN: "${{ secrets.DEPOT_TOKEN }}"
38+
3839

3940
permissions:
4041
contents: read
@@ -1131,7 +1132,7 @@ jobs:
11311132
uses: depot/setup-action@v1
11321133

11331134
- name: configure-docker
1134-
if: ${{ env.DOCKER_CACHE == 'DEPOT' }}
1135+
if: ${{ env.DOCKER_CACHE == 'DEPOT' && env.DOCKER_PROJECT_ID != '' }}
11351136
run: |
11361137
depot configure-docker
11371138

‎build.gradle

+1
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,7 @@ project.ext.externalDependency = [
280280
'swaggerAnnotations': 'io.swagger.core.v3:swagger-annotations:2.2.15',
281281
'swaggerCli': 'io.swagger.codegen.v3:swagger-codegen-cli:3.0.46',
282282
'swaggerCore': 'io.swagger.core.v3:swagger-core:2.2.7',
283+
'swaggerParser': 'io.swagger.parser.v3:swagger-parser:2.1.15',
283284
'springBootAutoconfigureJdk11': 'org.springframework.boot:spring-boot-autoconfigure:2.7.18',
284285
'testng': 'org.testng:testng:7.8.0',
285286
'testContainers': 'org.testcontainers:testcontainers:' + testContainersVersion,

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

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { BADGE } from '@geometricpanda/storybook-addon-badges';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
import React from 'react';
4+
import AutoComplete from './AutoComplete';
5+
6+
// Auto Docs
7+
const meta = {
8+
title: 'Components / AutoComplete',
9+
component: AutoComplete,
10+
11+
// Display Properties
12+
parameters: {
13+
layout: 'centered',
14+
badges: [BADGE.STABLE, 'readyForDesignReview'],
15+
docs: {
16+
subtitle: 'This component allows to add autocompletion',
17+
},
18+
},
19+
20+
// Component-level argTypes
21+
argTypes: {
22+
dataTestId: {
23+
description: 'Optional property to set data-testid',
24+
control: 'text',
25+
},
26+
className: {
27+
description: 'Optional class names to pass into AutoComplete',
28+
control: 'text',
29+
},
30+
value: {
31+
description: 'Value of input',
32+
},
33+
defaultValue: {
34+
description: 'Selected option by default',
35+
},
36+
options: {
37+
description: 'Options available in dropdown',
38+
table: {
39+
type: {
40+
summary: 'OptionType',
41+
detail: `{
42+
label: React.ReactNode;
43+
value?: string | number | null;
44+
disabled?: boolean;
45+
[name: string]: any;
46+
children?: Omit<OptionType, 'children'>[];
47+
}
48+
`,
49+
},
50+
},
51+
},
52+
open: {
53+
description: 'Controlled open state of dropdown',
54+
},
55+
defaultActiveFirstOption: {
56+
description: 'Whether active first option by default',
57+
},
58+
filterOption: {
59+
description: 'If true, filter options by input, if function, filter options against it',
60+
},
61+
dropdownContentHeight: {
62+
description: "Height of dropdown's content",
63+
},
64+
onSelect: {
65+
description: 'Called when a option is selected',
66+
},
67+
onSearch: {
68+
description: 'Called when searching items',
69+
},
70+
onChange: {
71+
description: 'Called when selecting an option or changing an input value',
72+
},
73+
onDropdownVisibleChange: {
74+
description: 'Called when dropdown opened/closed',
75+
},
76+
onClear: {
77+
description: 'Called when clear',
78+
},
79+
dropdownRender: {
80+
description: 'Customize dropdown content',
81+
},
82+
dropdownAlign: {
83+
description: "Adjust how the autocomplete's dropdown should be aligned",
84+
},
85+
style: {
86+
description: 'Additional styles for the wrapper of the children',
87+
},
88+
dropdownStyle: {
89+
description: 'Additional styles for the dropdown',
90+
},
91+
dropdownMatchSelectWidth: {
92+
description:
93+
'Determine whether the dropdown menu and the select input are the same width.' +
94+
'Default set min-width same as input. Will ignore when value less than select width.',
95+
},
96+
},
97+
98+
// Define defaults
99+
args: {
100+
options: [
101+
{ label: 'test', value: 'test' },
102+
{ label: 'test2', value: 'test2' },
103+
],
104+
},
105+
} satisfies Meta<typeof AutoComplete>;
106+
107+
export default meta;
108+
109+
// Stories
110+
111+
type Story = StoryObj<typeof meta>;
112+
113+
// Basic story is what is displayed 1st in storybook & is used as the code sandbox
114+
// Pass props to this so that it can be customized via the UI props panel
115+
export const sandbox: Story = {
116+
tags: ['dev'],
117+
render: (props) => (
118+
<AutoComplete {...props}>
119+
<input />
120+
</AutoComplete>
121+
),
122+
};

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

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { AutoComplete as AntdAutoComplete } from 'antd';
2+
import React, { useCallback, useEffect, useState } from 'react';
3+
import ClickOutside from '../Utils/ClickOutside/ClickOutside';
4+
import { DropdownWrapper } from './components';
5+
import { AUTOCOMPLETE_WRAPPER_CLASS_CSS_SELECTOR, AUTOCOMPLETE_WRAPPER_CLASS_NAME, ESCAPE_KEY } from './constants';
6+
import { AutoCompleteProps, OptionType } from './types';
7+
import { OverlayClassProvider } from '../Utils';
8+
9+
export default function AutoComplete({
10+
children,
11+
dropdownContentHeight,
12+
dataTestId,
13+
onDropdownVisibleChange,
14+
onChange,
15+
onClear,
16+
value,
17+
...props
18+
}: React.PropsWithChildren<AutoCompleteProps>) {
19+
const [internalValue, setInternalValue] = useState<string>(value || '');
20+
const [internalOpen, setInternalOpen] = useState<boolean>(false);
21+
22+
useEffect(() => {
23+
onDropdownVisibleChange?.(internalOpen);
24+
}, [internalOpen, onDropdownVisibleChange]);
25+
26+
const onChangeHandler = (newValue: string, option: OptionType | OptionType[]) => {
27+
setInternalValue(newValue);
28+
if (!internalOpen && newValue !== '') setInternalOpen(true);
29+
onChange?.(newValue, option);
30+
};
31+
32+
const onKeyDownHandler = useCallback(
33+
(event: React.KeyboardEvent) => {
34+
if (event.key === ESCAPE_KEY) {
35+
if (internalOpen) {
36+
setInternalOpen(false);
37+
} else {
38+
setInternalValue('');
39+
onClear?.();
40+
}
41+
}
42+
},
43+
[internalOpen, setInternalValue, onClear],
44+
);
45+
46+
const onBlur = (event: React.FocusEvent) => {
47+
if (
48+
event.relatedTarget &&
49+
!(event.relatedTarget as HTMLElement).closest(AUTOCOMPLETE_WRAPPER_CLASS_CSS_SELECTOR)
50+
) {
51+
setInternalOpen(false);
52+
}
53+
};
54+
55+
return (
56+
<ClickOutside
57+
ignoreSelector={AUTOCOMPLETE_WRAPPER_CLASS_CSS_SELECTOR}
58+
onClickOutside={() => setInternalOpen(false)}
59+
>
60+
<AntdAutoComplete
61+
open={internalOpen}
62+
value={internalValue}
63+
{...props}
64+
listHeight={dropdownContentHeight}
65+
data-testid={dataTestId}
66+
onClick={() => setInternalOpen(true)}
67+
onBlur={onBlur}
68+
onClear={onClear}
69+
onKeyDown={onKeyDownHandler}
70+
onChange={onChangeHandler}
71+
dropdownRender={(menu) => {
72+
return (
73+
// Pass overlay class name to children to add possibility not to close autocomplete by clicking on child's portals
74+
// as ClickOutside will ignore them
75+
<OverlayClassProvider overlayClassName={AUTOCOMPLETE_WRAPPER_CLASS_NAME}>
76+
<DropdownWrapper className={AUTOCOMPLETE_WRAPPER_CLASS_NAME}>
77+
{props?.dropdownRender?.(menu) ?? menu}
78+
</DropdownWrapper>
79+
</OverlayClassProvider>
80+
);
81+
}}
82+
>
83+
{children}
84+
</AntdAutoComplete>
85+
</ClickOutside>
86+
);
87+
}

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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import styled from 'styled-components';
2+
3+
export const DropdownWrapper = styled.div`
4+
& .rc-virtual-list-scrollbar-thumb {
5+
background: rgba(193, 196, 208, 0.8) !important;
6+
}
7+
& .rc-virtual-list-scrollbar-show {
8+
background: rgba(193, 196, 208, 0.3) !important;
9+
}
10+
`;

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const AUTOCOMPLETE_WRAPPER_CLASS_NAME = 'autocomplete-wrapper';
2+
export const AUTOCOMPLETE_WRAPPER_CLASS_CSS_SELECTOR = `.${AUTOCOMPLETE_WRAPPER_CLASS_NAME}`;
3+
export const ESCAPE_KEY = 'Escape';

‎datahub-web-react/src/alchemy-components/components/AutoComplete/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import AutoComplete from './AutoComplete';
2+
3+
export { AutoComplete };

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { DefaultOptionType } from 'antd/lib/select';
2+
import { AlignType } from 'rc-trigger/lib/interface';
3+
import React from 'react';
4+
5+
export type ValueType = string;
6+
7+
export type OptionType = DefaultOptionType;
8+
9+
export interface AutoCompleteProps {
10+
dataTestId?: string;
11+
className?: string;
12+
13+
value?: ValueType;
14+
defaultValue?: ValueType;
15+
options: OptionType[];
16+
open?: boolean;
17+
18+
defaultActiveFirstOption?: boolean;
19+
filterOption?: boolean | ((inputValue: ValueType, option?: OptionType) => boolean);
20+
dropdownContentHeight?: number;
21+
22+
onSelect?: (value: ValueType, option: OptionType) => void;
23+
onSearch?: (value: ValueType) => void;
24+
onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
25+
onClear?: () => void;
26+
onDropdownVisibleChange?: (isOpen: boolean) => void;
27+
28+
dropdownRender?: (menu: React.ReactElement) => React.ReactElement | undefined;
29+
notFoundContent?: React.ReactNode;
30+
31+
dropdownAlign?: AlignType;
32+
style?: React.CSSProperties;
33+
dropdownStyle?: React.CSSProperties;
34+
dropdownMatchSelectWidth?: boolean | number;
35+
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export enum ButtonVariantValues {
77
filled = 'filled',
88
outline = 'outline',
99
text = 'text',
10+
secondary = 'secondary',
1011
}
1112
export type ButtonVariant = keyof typeof ButtonVariantValues;
1213

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

+31-3
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,20 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions): Colo
8888
};
8989
}
9090

91+
// Override styles for secondary variant
92+
if (variant === 'secondary') {
93+
return {
94+
...base,
95+
bgColor: getColor('violet', 0),
96+
hoverBgColor: getColor('violet', 100),
97+
activeBgColor: getColor('violet', 200),
98+
textColor: color500,
99+
borderColor: 'transparent',
100+
disabledBgColor: 'transparent',
101+
disabledBorderColor: 'transparent',
102+
};
103+
}
104+
91105
// Filled variable is the base style
92106
return base;
93107
};
@@ -96,16 +110,17 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions): Colo
96110
const getButtonVariantStyles = (variant: ButtonVariant, colorStyles: ColorStyles): CSSObject => {
97111
const variantStyles = {
98112
filled: {
99-
backgroundColor: colorStyles.bgColor,
113+
background: `radial-gradient(115.48% 144.44% at 50% -44.44%, var(--buttons-bg-2-for-gradient, #705EE4) 38.97%, var(--buttons-bg, #533FD1) 100%)`,
100114
border: `1px solid ${colorStyles.borderColor}`,
101115
color: colorStyles.textColor,
102116
'&:hover': {
103-
backgroundColor: colorStyles.hoverBgColor,
117+
background: `radial-gradient(115.48% 144.44% at 50% -44.44%, var(--buttons-bg-2-for-gradient, #705EE4) 38.97%, var(--buttons-bg, #533FD1) 100%)`,
104118
border: `1px solid ${colorStyles.hoverBgColor}`,
105119
boxShadow: shadows.sm,
106120
},
107121
'&:disabled': {
108122
backgroundColor: colorStyles.disabledBgColor,
123+
background: 'none',
109124
border: `1px solid ${colorStyles.disabledBorderColor}`,
110125
color: colorStyles.disabledTextColor,
111126
boxShadow: shadows.xs,
@@ -138,6 +153,19 @@ const getButtonVariantStyles = (variant: ButtonVariant, colorStyles: ColorStyles
138153
color: colorStyles.disabledTextColor,
139154
},
140155
},
156+
secondary: {
157+
backgroundColor: colorStyles.bgColor,
158+
border: 'none',
159+
color: colorStyles.textColor,
160+
'&:hover': {
161+
backgroundColor: colorStyles.hoverBgColor,
162+
boxShadow: 'none',
163+
},
164+
'&:disabled': {
165+
backgroundColor: colorStyles.disabledBgColor,
166+
color: colorStyles.disabledTextColor,
167+
},
168+
},
141169
};
142170

143171
return variantStyles[variant];
@@ -147,7 +175,7 @@ const getButtonVariantStyles = (variant: ButtonVariant, colorStyles: ColorStyles
147175
const getButtonFontStyles = (size: SizeOptions) => {
148176
const baseFontStyles = {
149177
fontFamily: typography.fonts.body,
150-
fontWeight: typography.fontWeights.normal,
178+
fontWeight: typography.fontWeights.semiBold,
151179
lineHeight: typography.lineHeights.none,
152180
};
153181

0 commit comments

Comments
 (0)