pixel-react 1.7.8 → 1.7.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Button/Button.d.ts +2 -2
- package/lib/components/Button/types.d.ts +17 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
- package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
- package/lib/components/ChooseFile/types.d.ts +68 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
- package/lib/components/ConnectingBranch/data.d.ts +19 -33
- package/lib/components/ConnectingBranch/types.d.ts +10 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/LabelEditTextField/types.d.ts +2 -0
- package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/Select/types.d.ts +1 -1
- package/lib/components/StatusCard/types.d.ts +2 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/data.d.ts +74 -0
- package/lib/components/TableTree/types.d.ts +4 -0
- package/lib/components/TextArea/Textarea.d.ts +1 -1
- package/lib/components/TextArea/Types.d.ts +1 -0
- package/lib/index.d.ts +174 -63
- package/lib/index.esm.js +474 -286
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +474 -285
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/validateFile/validateFile.d.ts +2 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +1 -0
- package/src/assets/Themes/BlueTheme.scss +44 -44
- package/src/assets/Themes/DarkTheme.scss +1 -0
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/failed_status_icon.svg +1 -1
- package/src/assets/icons/flaky_status_icon.svg +1 -1
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/settings.svg +3 -0
- package/src/assets/icons/skipped_status_icon.svg +1 -1
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/warning_status_icon.svg +1 -1
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Button/Button.scss +12 -0
- package/src/components/Button/Button.tsx +29 -11
- package/src/components/Button/types.ts +21 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
- package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
- package/src/components/Charts/MultiRadialChart/types.ts +4 -1
- package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
- package/src/components/ChooseFile/ChooseFile.tsx +46 -0
- package/src/components/ChooseFile/types.ts +78 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
- package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
- package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
- package/src/components/ConnectingBranch/types.ts +21 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
- package/src/components/LabelEditTextField/types.ts +2 -0
- package/src/components/MachineInputField/MachineInputField.tsx +67 -70
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
- package/src/components/Select/Select.tsx +4 -4
- package/src/components/Select/types.ts +1 -1
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
- package/src/components/StatusCard/StatusCard.scss +2 -1
- package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
- package/src/components/StatusCard/StatusCard.tsx +10 -2
- package/src/components/StatusCard/types.ts +2 -0
- package/src/components/TableTree/Components/TableBody.tsx +19 -15
- package/src/components/TableTree/Components/TableCell.tsx +47 -31
- package/src/components/TableTree/Components/TableRow.tsx +4 -0
- package/src/components/TableTree/TableTree.scss +122 -109
- package/src/components/TableTree/data.ts +16 -1
- package/src/components/TableTree/types.ts +4 -0
- package/src/components/TextArea/Textarea.tsx +2 -0
- package/src/components/TextArea/Types.ts +3 -0
- package/src/index.ts +3 -0
- package/src/utils/validateFile/validateFile.stories.tsx +49 -0
- package/src/utils/validateFile/validateFile.ts +39 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
- package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
- package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -17,6 +17,7 @@ const Textarea = ({
|
|
17
17
|
onChange,
|
18
18
|
onBlur,
|
19
19
|
onFocus,
|
20
|
+
onPaste,
|
20
21
|
rows = 4,
|
21
22
|
cols = 40,
|
22
23
|
resize = false,
|
@@ -65,6 +66,7 @@ const Textarea = ({
|
|
65
66
|
onChange={onChange}
|
66
67
|
onBlur={onBlur}
|
67
68
|
onFocus={onFocus}
|
69
|
+
onPaste={onPaste}
|
68
70
|
required={required}
|
69
71
|
rows={rows}
|
70
72
|
cols={cols}
|
@@ -49,6 +49,9 @@ export interface TextareaProps {
|
|
49
49
|
onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
|
50
50
|
|
51
51
|
onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
|
52
|
+
|
53
|
+
onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
|
54
|
+
|
52
55
|
/**
|
53
56
|
* id to select the textarea field uniquely
|
54
57
|
*/
|
package/src/index.ts
CHANGED
@@ -71,6 +71,7 @@ import FieldSet from './components/FieldSet';
|
|
71
71
|
import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
|
72
72
|
import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
|
73
73
|
import ProgressBar from './components/ProgressBar';
|
74
|
+
import ChooseFile from './components/ChooseFile/ChooseFile';
|
74
75
|
|
75
76
|
// Utils imports
|
76
77
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
@@ -184,6 +185,8 @@ export {
|
|
184
185
|
PhoneInputField,
|
185
186
|
TableWithAccordion,
|
186
187
|
ProgressBar,
|
188
|
+
ChooseFile,
|
189
|
+
|
187
190
|
// utils exports
|
188
191
|
checkEmpty,
|
189
192
|
getExtension,
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import {
|
3
|
+
validateFileExtension,
|
4
|
+
validateZipFileExtension,
|
5
|
+
} from './validateFile';
|
6
|
+
|
7
|
+
export default {
|
8
|
+
title: 'Utils/validateFile',
|
9
|
+
};
|
10
|
+
|
11
|
+
const allowedFileTypes = {
|
12
|
+
'.txt': 'text/plain',
|
13
|
+
'.zip': 'application/zip',
|
14
|
+
'.jpg': 'image/jpeg',
|
15
|
+
};
|
16
|
+
|
17
|
+
export const ValidateFileExtension = () => {
|
18
|
+
const [result, setResult] = useState<string | boolean>('');
|
19
|
+
|
20
|
+
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
21
|
+
const isValid = validateFileExtension(event, allowedFileTypes);
|
22
|
+
setResult(isValid ? 'Valid file type' : 'Invalid file type');
|
23
|
+
};
|
24
|
+
|
25
|
+
return (
|
26
|
+
<div>
|
27
|
+
<h3>Validate File Extension</h3>
|
28
|
+
<input type="file" onChange={handleFileChange} />
|
29
|
+
<p>Result: {result.toString()}</p>
|
30
|
+
</div>
|
31
|
+
);
|
32
|
+
};
|
33
|
+
|
34
|
+
export const ValidateZipFileExtension = () => {
|
35
|
+
const [result, setResult] = useState<string | boolean>('');
|
36
|
+
|
37
|
+
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
38
|
+
const isValid = validateZipFileExtension(event);
|
39
|
+
setResult(isValid ? 'Valid ZIP file' : 'Invalid ZIP file');
|
40
|
+
};
|
41
|
+
|
42
|
+
return (
|
43
|
+
<div>
|
44
|
+
<h3>Validate ZIP File Extension</h3>
|
45
|
+
<input type="file" onChange={handleFileChange} />
|
46
|
+
<p>Result: {result.toString()}</p>
|
47
|
+
</div>
|
48
|
+
);
|
49
|
+
};
|
@@ -0,0 +1,39 @@
|
|
1
|
+
export const validateFileExtension = (
|
2
|
+
file: File | React.ChangeEvent<HTMLInputElement>,
|
3
|
+
allowedFileTypes: Record<string, string>
|
4
|
+
) => {
|
5
|
+
const selectedFile =
|
6
|
+
(file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
|
7
|
+
(file as File);
|
8
|
+
const fileExtension =
|
9
|
+
'.' + selectedFile?.name?.split('.')?.pop()?.toLowerCase();
|
10
|
+
const fileType = selectedFile?.type;
|
11
|
+
if (
|
12
|
+
['.ipa', '.y4m', '.yml', '.md', '.pem', '.properties'].includes(
|
13
|
+
fileExtension
|
14
|
+
) &&
|
15
|
+
Object.keys(allowedFileTypes)?.includes(fileExtension)
|
16
|
+
) {
|
17
|
+
return true;
|
18
|
+
}
|
19
|
+
return (
|
20
|
+
allowedFileTypes[fileExtension] &&
|
21
|
+
fileType === allowedFileTypes[fileExtension]
|
22
|
+
);
|
23
|
+
};
|
24
|
+
|
25
|
+
export const validateZipFileExtension = (
|
26
|
+
file: File | React.ChangeEvent<HTMLInputElement>
|
27
|
+
) => {
|
28
|
+
const selectedFile =
|
29
|
+
(file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
|
30
|
+
(file as File);
|
31
|
+
// List of valid MIME types
|
32
|
+
const validMimeTypes = ['application/zip', 'application/x-zip-compressed'];
|
33
|
+
// Validating the file extension and MIME type
|
34
|
+
return (
|
35
|
+
selectedFile &&
|
36
|
+
validMimeTypes?.includes(selectedFile?.type) &&
|
37
|
+
selectedFile?.name?.toLowerCase()?.endsWith('.zip')
|
38
|
+
);
|
39
|
+
};
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './AddButton';
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './AddVariables';
|
@@ -1,35 +0,0 @@
|
|
1
|
-
export type dynamicObject = {
|
2
|
-
[key: string]: any;
|
3
|
-
};
|
4
|
-
export interface AddVariableProps {
|
5
|
-
/**
|
6
|
-
* Label for the field
|
7
|
-
*/
|
8
|
-
label?: string;
|
9
|
-
/**
|
10
|
-
* List of variables
|
11
|
-
*/
|
12
|
-
variableList?: dynamicObject[];
|
13
|
-
/**
|
14
|
-
* Place holder for the input field
|
15
|
-
*/
|
16
|
-
placeholder?: string;
|
17
|
-
/**
|
18
|
-
* Function to handle input change
|
19
|
-
* @param value
|
20
|
-
* @returns
|
21
|
-
*/
|
22
|
-
onChange: (value: string) => void;
|
23
|
-
/**
|
24
|
-
* Function to handle create variable icon click
|
25
|
-
*/
|
26
|
-
onCreateVariableClick?: () => void;
|
27
|
-
/**
|
28
|
-
* Value of the input field
|
29
|
-
*/
|
30
|
-
value: string;
|
31
|
-
/**
|
32
|
-
* Width of the dropdown
|
33
|
-
*/
|
34
|
-
dropdownWidth?: string;
|
35
|
-
}
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import AttachImage from './AttachImage';
|
3
|
-
import { AttachImageProps } from './types';
|
4
|
-
declare const meta: Meta<typeof AttachImage>;
|
5
|
-
export default meta;
|
6
|
-
type Story = StoryObj<AttachImageProps>;
|
7
|
-
export declare const Default: Story;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import IconRadialChart from './IconRadialChart';
|
3
|
-
declare const meta: Meta<typeof IconRadialChart>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof IconRadialChart>;
|
6
|
-
export declare const Default: Story;
|
7
|
-
export declare const Mobile: Story;
|
8
|
-
export declare const WithoutIcon: Story;
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import LineChart from './LineChart';
|
3
|
-
import { LineChartProps } from './types';
|
4
|
-
declare const meta: Meta<typeof LineChart>;
|
5
|
-
export default meta;
|
6
|
-
export declare const DefaultLineChart: StoryObj<LineChartProps>;
|
7
|
-
export declare const StatusLineChart: StoryObj<LineChartProps>;
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import MultiRadialChart from './MultiRadialChart';
|
3
|
-
declare const meta: Meta<typeof MultiRadialChart>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof MultiRadialChart>;
|
6
|
-
export declare const Default: Story;
|
7
|
-
export declare const numberLegend: Story;
|
8
|
-
export declare const PillLegend: Story;
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import ConnectingBranch from './ConnectingBranch';
|
3
|
-
declare const meta: Meta<typeof ConnectingBranch>;
|
4
|
-
export default meta;
|
5
|
-
type Story = StoryObj<typeof ConnectingBranch>;
|
6
|
-
export declare const Default: Story;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import EditTextField from './EditTextField';
|
3
|
-
import '../../assets/styles/_colors.scss';
|
4
|
-
import './EditTextField.scss';
|
5
|
-
declare const meta: Meta<typeof EditTextField>;
|
6
|
-
type Story = StoryObj<typeof EditTextField>;
|
7
|
-
export declare const textFieldWithLabel: Story;
|
8
|
-
export declare const textFieldWithOutLabel: Story;
|
9
|
-
export declare const openTextField: Story;
|
10
|
-
export default meta;
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import { CellBase } from "./ExcelFile/Excel";
|
2
|
-
interface ChangeExcelStylesOptions {
|
3
|
-
sheetName: string;
|
4
|
-
styleType: string;
|
5
|
-
value: string;
|
6
|
-
selectedCell: {
|
7
|
-
row: number;
|
8
|
-
column: number;
|
9
|
-
}[];
|
10
|
-
}
|
11
|
-
export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
|
12
|
-
[key: string]: Matrix<CellBase>;
|
13
|
-
}>>, options: ChangeExcelStylesOptions): void;
|
14
|
-
export {};
|
@@ -1,24 +0,0 @@
|
|
1
|
-
interface CellStyle {
|
2
|
-
color?: string;
|
3
|
-
backgroundColor?: string;
|
4
|
-
bold?: boolean;
|
5
|
-
italic?: boolean;
|
6
|
-
name?: string;
|
7
|
-
border: {
|
8
|
-
top: string;
|
9
|
-
bottom: string;
|
10
|
-
left: string;
|
11
|
-
right: string;
|
12
|
-
};
|
13
|
-
alignment: {
|
14
|
-
horizontal?: string;
|
15
|
-
vertical?: string;
|
16
|
-
wrapText?: boolean;
|
17
|
-
};
|
18
|
-
}
|
19
|
-
interface CellData {
|
20
|
-
style?: CellStyle;
|
21
|
-
}
|
22
|
-
type ImportExcelStylesData = Array<Array<CellData>>;
|
23
|
-
export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
|
24
|
-
export {};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
2
|
-
import Card from './StatusCard';
|
3
|
-
import { CardProps } from './types';
|
4
|
-
declare const meta: Meta<typeof Card>;
|
5
|
-
export default meta;
|
6
|
-
type Story = StoryObj<CardProps>;
|
7
|
-
export declare const Passed: Story;
|
8
|
-
export declare const Failed: Story;
|
9
|
-
export declare const Warning: Story;
|
10
|
-
export declare const Skipped: Story;
|
11
|
-
export declare const Flaky: Story;
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
3
|
-
import { MachineExecutionInstanceDataSet } from './types';
|
4
|
-
declare const SequentialPayloadComponent: React.FC<{
|
5
|
-
machineInstances: MachineExecutionInstanceDataSet[];
|
6
|
-
}>;
|
7
|
-
declare const meta: Meta<typeof SequentialPayloadComponent>;
|
8
|
-
type Story = StoryObj<typeof SequentialPayloadComponent>;
|
9
|
-
export declare const Primary: Story;
|
10
|
-
export default meta;
|
package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss
DELETED
@@ -1,51 +0,0 @@
|
|
1
|
-
.ff-connecting-datalist-modal-header-wrapper,
|
2
|
-
.ff-connecting-modal-child-wrapper {
|
3
|
-
width: 534px;
|
4
|
-
padding: 0 4px;
|
5
|
-
}
|
6
|
-
|
7
|
-
.ff-connecting-datalist-modal-header-wrapper {
|
8
|
-
border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
|
9
|
-
margin-bottom: 4px;
|
10
|
-
}
|
11
|
-
|
12
|
-
.ff-connecting-modal-child-wrapper {
|
13
|
-
.ff-branch-select-input-wrapper {
|
14
|
-
display: flex;
|
15
|
-
align-items: center;
|
16
|
-
gap: 8px;
|
17
|
-
|
18
|
-
.ff-select-browser {
|
19
|
-
width: 263px;
|
20
|
-
}
|
21
|
-
|
22
|
-
.ff-branch-input-wrapper {
|
23
|
-
display: flex;
|
24
|
-
align-items: flex-end;
|
25
|
-
height: 38px;
|
26
|
-
|
27
|
-
.ff-input-browser {
|
28
|
-
width: 245px;
|
29
|
-
}
|
30
|
-
}
|
31
|
-
}
|
32
|
-
}
|
33
|
-
|
34
|
-
.ff-connecting-modal-footer-wrapper {
|
35
|
-
display: flex;
|
36
|
-
align-items: center;
|
37
|
-
justify-content: space-between;
|
38
|
-
padding: 0 8px;
|
39
|
-
margin-top: 8px;
|
40
|
-
border-top: 1px solid var(--ff-connecting-branch-modal-border);
|
41
|
-
|
42
|
-
.ff-branch-toggle-wrapper,
|
43
|
-
.ff-datalist-button-wrapper {
|
44
|
-
display: flex;
|
45
|
-
gap: 8px;
|
46
|
-
}
|
47
|
-
|
48
|
-
.ff-branch-toggle-wrapper {
|
49
|
-
gap: 4px;
|
50
|
-
}
|
51
|
-
}
|
package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx
DELETED
@@ -1,107 +0,0 @@
|
|
1
|
-
import { forwardRef, RefObject } from 'react';
|
2
|
-
import MiniModal from '../../../MiniModal';
|
3
|
-
import Typography from '../../../Typography';
|
4
|
-
import './AddBrowserModal.scss';
|
5
|
-
import Select from '../../../Select';
|
6
|
-
import Button from '../../../Button';
|
7
|
-
import Toggle from '../../../Toggle';
|
8
|
-
import Input from '../../../Input/Input';
|
9
|
-
import { AddBrowserModalProps } from './types';
|
10
|
-
|
11
|
-
const AddBrowserModal = forwardRef<HTMLButtonElement, AddBrowserModalProps>(
|
12
|
-
(props, ref) => {
|
13
|
-
// TODO: WILL BE REMOVE IN THE FUTURE
|
14
|
-
const selectOptions = [
|
15
|
-
{ label: 'Execution Environment', inputName: 'number of runs' },
|
16
|
-
{ label: 'Browser', inputName: 'Browser Version' },
|
17
|
-
{ label: 'Android Device', inputName: 'os version' },
|
18
|
-
{ label: 'IOS Device', inputName: 'os version-1' },
|
19
|
-
];
|
20
|
-
|
21
|
-
const renderSelectOptions = () => (
|
22
|
-
<div>
|
23
|
-
{selectOptions.map(({ label, inputName }, index) => (
|
24
|
-
<div className="ff-branch-select-input-wrapper" key={index}>
|
25
|
-
<Select
|
26
|
-
optionsList={[]}
|
27
|
-
onChange={() => {}}
|
28
|
-
label={label}
|
29
|
-
className="ff-select-browser"
|
30
|
-
/>
|
31
|
-
<div className="ff-branch-input-wrapper">
|
32
|
-
<Input
|
33
|
-
value="0"
|
34
|
-
label="Number of Runs"
|
35
|
-
type="number"
|
36
|
-
onChange={() => {}}
|
37
|
-
name={inputName}
|
38
|
-
className="ff-input-browser"
|
39
|
-
/>
|
40
|
-
</div>
|
41
|
-
</div>
|
42
|
-
))}
|
43
|
-
</div>
|
44
|
-
);
|
45
|
-
|
46
|
-
const renderFooterContent = () => (
|
47
|
-
<div className="ff-connecting-modal-footer-wrapper">
|
48
|
-
<div className="ff-branch-toggle-wrapper">
|
49
|
-
<Typography as="span" lineHeight="32px">
|
50
|
-
Run in Headless Mode
|
51
|
-
</Typography>
|
52
|
-
<Toggle />
|
53
|
-
</div>
|
54
|
-
<div className="ff-datalist-button-wrapper">
|
55
|
-
<Button label="Cancel" variant="tertiary" />
|
56
|
-
<Button label="Update" variant="primary" />
|
57
|
-
</div>
|
58
|
-
</div>
|
59
|
-
);
|
60
|
-
|
61
|
-
return (
|
62
|
-
<div>
|
63
|
-
<MiniModal
|
64
|
-
anchorRef={ref as RefObject<HTMLButtonElement>}
|
65
|
-
headerProps={
|
66
|
-
<div className="ff-connecting-datalist-modal-header-wrapper">
|
67
|
-
<Typography
|
68
|
-
as="span"
|
69
|
-
color="var(--ff-connecting-branch-modal-header)"
|
70
|
-
fontWeight="semi-bold"
|
71
|
-
fontSize={12}
|
72
|
-
lineHeight="38px"
|
73
|
-
>
|
74
|
-
Add Browser / Device
|
75
|
-
</Typography>
|
76
|
-
</div>
|
77
|
-
}
|
78
|
-
childContent={
|
79
|
-
<div className="ff-connecting-modal-child-wrapper">
|
80
|
-
{renderSelectOptions()}
|
81
|
-
</div>
|
82
|
-
}
|
83
|
-
footerContent={renderFooterContent()}
|
84
|
-
cancelButtonProps={{
|
85
|
-
text: 'Cancel',
|
86
|
-
|
87
|
-
// TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
|
88
|
-
onClick: props.onUpdateAddBrowser,
|
89
|
-
}}
|
90
|
-
proceedButtonProps={{
|
91
|
-
text: 'Proceed',
|
92
|
-
// TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
|
93
|
-
onClick: props.onUpdateAddBrowser,
|
94
|
-
}}
|
95
|
-
modalPosition="right"
|
96
|
-
isPopOver
|
97
|
-
leftTopArrow
|
98
|
-
extraRightSpace={{ leftTopArrow: 45 }}
|
99
|
-
extraLeftSpace={{ rightAlignModal: 115 }}
|
100
|
-
{...props}
|
101
|
-
/>
|
102
|
-
</div>
|
103
|
-
);
|
104
|
-
}
|
105
|
-
);
|
106
|
-
|
107
|
-
export default AddBrowserModal;
|
package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss
DELETED
@@ -1,31 +0,0 @@
|
|
1
|
-
.ff-datalist-modal-header-wrapper,
|
2
|
-
.ff-datalist-modal-child-wrapper,
|
3
|
-
.ff-datalist-modal-footer-wrapper {
|
4
|
-
margin: 0 8px;
|
5
|
-
}
|
6
|
-
|
7
|
-
.ff-datalist-modal-header-wrapper {
|
8
|
-
width: 255px;
|
9
|
-
border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
|
10
|
-
display: flex;
|
11
|
-
align-items: center;
|
12
|
-
}
|
13
|
-
|
14
|
-
.ff-datalist-modal-child-wrapper {
|
15
|
-
.variable {
|
16
|
-
margin: 8px 0;
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
|
-
.ff-datalist-modal-footer-wrapper {
|
21
|
-
display: flex;
|
22
|
-
justify-content: space-between;
|
23
|
-
border-top: 1px solid var(--ff-connecting-branch-modal-border);
|
24
|
-
|
25
|
-
.datalist-button-wrapper {
|
26
|
-
display: flex;
|
27
|
-
gap: 10px;
|
28
|
-
margin-top: 4px;
|
29
|
-
justify-content: flex-end;
|
30
|
-
}
|
31
|
-
}
|
package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx
DELETED
@@ -1,85 +0,0 @@
|
|
1
|
-
import { forwardRef, RefObject } from 'react';
|
2
|
-
import MiniModal from '../../../MiniModal';
|
3
|
-
import Typography from '../../../Typography';
|
4
|
-
import './DatasetListModal.scss';
|
5
|
-
import Select from '../../../Select';
|
6
|
-
import Checkbox from '../../../Checkbox';
|
7
|
-
import Button from '../../../Button';
|
8
|
-
import { DatasetListModalProps } from './types';
|
9
|
-
|
10
|
-
const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
|
11
|
-
(props, ref) => {
|
12
|
-
const selectOptions = [
|
13
|
-
{ label: 'Project Environment Variable' },
|
14
|
-
{ label: 'Global Variables' },
|
15
|
-
{ label: 'Test Data Set' },
|
16
|
-
];
|
17
|
-
|
18
|
-
const renderSelectOptions = () =>
|
19
|
-
selectOptions.map(({ label }, idx) => (
|
20
|
-
<Select
|
21
|
-
key={idx}
|
22
|
-
optionsList={[]}
|
23
|
-
onChange={() => {}}
|
24
|
-
label={label}
|
25
|
-
className="variable"
|
26
|
-
/>
|
27
|
-
));
|
28
|
-
|
29
|
-
const renderFooterContent = () => (
|
30
|
-
<div className="ff-datalist-modal-footer-wrapper">
|
31
|
-
<Checkbox checked={false} label="Set as Default" />
|
32
|
-
<div className="datalist-button-wrapper">
|
33
|
-
<Button label="Cancel" variant="tertiary" />
|
34
|
-
<Button label="Update" variant="primary" />
|
35
|
-
</div>
|
36
|
-
</div>
|
37
|
-
);
|
38
|
-
|
39
|
-
return (
|
40
|
-
<div>
|
41
|
-
<MiniModal
|
42
|
-
anchorRef={ref as RefObject<HTMLButtonElement>}
|
43
|
-
headerProps={
|
44
|
-
<div className="ff-datalist-modal-header-wrapper">
|
45
|
-
<Typography
|
46
|
-
as="span"
|
47
|
-
color="var(--ff-connecting-branch-modal-header)"
|
48
|
-
fontWeight="semi-bold"
|
49
|
-
fontSize={12}
|
50
|
-
lineHeight="38px"
|
51
|
-
>
|
52
|
-
Data Sets
|
53
|
-
</Typography>
|
54
|
-
</div>
|
55
|
-
}
|
56
|
-
childContent={
|
57
|
-
<div className="ff-datalist-modal-child-wrapper">
|
58
|
-
{renderSelectOptions()}
|
59
|
-
</div>
|
60
|
-
}
|
61
|
-
footerContent={renderFooterContent()}
|
62
|
-
cancelButtonProps={{
|
63
|
-
text: 'Cancel',
|
64
|
-
|
65
|
-
// TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
|
66
|
-
onClick: props?.onUpdateDatasetList,
|
67
|
-
}}
|
68
|
-
proceedButtonProps={{
|
69
|
-
text: 'Proceed',
|
70
|
-
// TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
|
71
|
-
onClick: props?.onUpdateDatasetList,
|
72
|
-
}}
|
73
|
-
modalPosition="right"
|
74
|
-
isPopOver
|
75
|
-
leftTopArrow
|
76
|
-
extraRightSpace={{ leftTopArrow: 40 }}
|
77
|
-
extraLeftSpace={{ rightAlignModal: 110 }}
|
78
|
-
{...props}
|
79
|
-
/>
|
80
|
-
</div>
|
81
|
-
);
|
82
|
-
}
|
83
|
-
);
|
84
|
-
|
85
|
-
export default DatasetListModal;
|
/package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts
RENAMED
File without changes
|