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.
Files changed (133) hide show
  1. package/lib/components/Button/Button.d.ts +2 -2
  2. package/lib/components/Button/types.d.ts +17 -0
  3. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  4. package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
  5. package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
  6. package/lib/components/ChooseFile/types.d.ts +68 -0
  7. package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
  8. package/lib/components/ConnectingBranch/data.d.ts +19 -33
  9. package/lib/components/ConnectingBranch/types.d.ts +10 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
  11. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  12. package/lib/components/LabelEditTextField/types.d.ts +2 -0
  13. package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
  14. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  15. package/lib/components/Select/Select.stories.d.ts +0 -1
  16. package/lib/components/Select/types.d.ts +1 -1
  17. package/lib/components/StatusCard/types.d.ts +2 -0
  18. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  19. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  20. package/lib/components/TableTree/data.d.ts +74 -0
  21. package/lib/components/TableTree/types.d.ts +4 -0
  22. package/lib/components/TextArea/Textarea.d.ts +1 -1
  23. package/lib/components/TextArea/Types.d.ts +1 -0
  24. package/lib/index.d.ts +174 -63
  25. package/lib/index.esm.js +474 -286
  26. package/lib/index.esm.js.map +1 -1
  27. package/lib/index.js +474 -285
  28. package/lib/index.js.map +1 -1
  29. package/lib/tsconfig.tsbuildinfo +1 -1
  30. package/lib/utils/validateFile/validateFile.d.ts +2 -0
  31. package/package.json +1 -1
  32. package/src/assets/Themes/BaseTheme.scss +1 -0
  33. package/src/assets/Themes/BlueTheme.scss +44 -44
  34. package/src/assets/Themes/DarkTheme.scss +1 -0
  35. package/src/assets/icons/approval_pending.svg +8 -8
  36. package/src/assets/icons/configuration.svg +3 -3
  37. package/src/assets/icons/defects.svg +8 -8
  38. package/src/assets/icons/element.svg +4 -4
  39. package/src/assets/icons/failed_status_icon.svg +1 -1
  40. package/src/assets/icons/flaky_status_icon.svg +1 -1
  41. package/src/assets/icons/project_element.svg +4 -4
  42. package/src/assets/icons/settings.svg +3 -0
  43. package/src/assets/icons/skipped_status_icon.svg +1 -1
  44. package/src/assets/icons/step_group.svg +10 -10
  45. package/src/assets/icons/variable.svg +3 -3
  46. package/src/assets/icons/warning_status_icon.svg +1 -1
  47. package/src/assets/icons/web_service_icon.svg +3 -3
  48. package/src/components/Button/Button.scss +12 -0
  49. package/src/components/Button/Button.tsx +29 -11
  50. package/src/components/Button/types.ts +21 -0
  51. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
  52. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
  53. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
  54. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  55. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
  56. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
  57. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
  58. package/src/components/Charts/MultiRadialChart/types.ts +4 -1
  59. package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
  60. package/src/components/ChooseFile/ChooseFile.tsx +46 -0
  61. package/src/components/ChooseFile/types.ts +78 -0
  62. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
  63. package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
  64. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
  65. package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
  66. package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
  67. package/src/components/ConnectingBranch/types.ts +21 -0
  68. package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
  69. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
  70. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
  71. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
  72. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
  73. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
  74. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
  75. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
  76. package/src/components/Icon/iconList.ts +2 -0
  77. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
  78. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
  79. package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
  80. package/src/components/LabelEditTextField/types.ts +2 -0
  81. package/src/components/MachineInputField/MachineInputField.tsx +67 -70
  82. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
  83. package/src/components/Select/Select.tsx +4 -4
  84. package/src/components/Select/types.ts +1 -1
  85. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
  86. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
  87. package/src/components/StatusCard/StatusCard.scss +2 -1
  88. package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
  89. package/src/components/StatusCard/StatusCard.tsx +10 -2
  90. package/src/components/StatusCard/types.ts +2 -0
  91. package/src/components/TableTree/Components/TableBody.tsx +19 -15
  92. package/src/components/TableTree/Components/TableCell.tsx +47 -31
  93. package/src/components/TableTree/Components/TableRow.tsx +4 -0
  94. package/src/components/TableTree/TableTree.scss +122 -109
  95. package/src/components/TableTree/data.ts +16 -1
  96. package/src/components/TableTree/types.ts +4 -0
  97. package/src/components/TextArea/Textarea.tsx +2 -0
  98. package/src/components/TextArea/Types.ts +3 -0
  99. package/src/index.ts +3 -0
  100. package/src/utils/validateFile/validateFile.stories.tsx +49 -0
  101. package/src/utils/validateFile/validateFile.ts +39 -0
  102. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  103. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  104. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  105. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  106. package/lib/components/AddButton/AddButton.d.ts +0 -5
  107. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  108. package/lib/components/AddButton/index.d.ts +0 -1
  109. package/lib/components/AddButton/types.d.ts +0 -4
  110. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  111. package/lib/components/AddVariables/index.d.ts +0 -1
  112. package/lib/components/AddVariables/types.d.ts +0 -35
  113. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  114. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  115. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  116. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  117. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  118. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  119. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  120. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  121. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  122. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  123. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  124. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  125. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  126. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  127. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
  128. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
  129. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
  130. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
  131. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
  132. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
  133. /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
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import './AddButton.scss';
3
- import { AddButtonProps } from './types';
4
- declare const AddButton: React.FC<AddButtonProps>;
5
- export default AddButton;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import AddButton from './AddButton';
3
- declare const meta: Meta<typeof AddButton>;
4
- type Story = StoryObj<typeof AddButton>;
5
- export declare const PrimaryAddButton: Story;
6
- export default meta;
@@ -1 +0,0 @@
1
- export { default } from './AddButton';
@@ -1,4 +0,0 @@
1
- export interface AddButtonProps {
2
- name: string;
3
- onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
4
- }
@@ -1,5 +0,0 @@
1
- import { AddVariableProps } from './types';
2
- import './AddVariables.scss';
3
- import React from 'react';
4
- declare const AddVariables: React.FC<AddVariableProps>;
5
- export default AddVariables;
@@ -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,6 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import BarChart from './BarChart';
3
- declare const meta: Meta<typeof BarChart>;
4
- export default meta;
5
- type Story = StoryObj<typeof BarChart>;
6
- export declare const BarChartDashboard: 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,6 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import { EditorProps } from './types';
3
- declare const meta: Meta<EditorProps>;
4
- export default meta;
5
- type Story = StoryObj<EditorProps>;
6
- export declare const Default: Story;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import './ContextMenu.scss';
3
- declare const ContextMenu: React.FC<ContextMenuProps>;
4
- export default ContextMenu;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import ExcelFile from './ExcelFile/ExcelFile';
3
- declare const meta: Meta<typeof ExcelFile>;
4
- type Story = StoryObj<typeof ExcelFile>;
5
- export declare const Default: Story;
6
- 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;
@@ -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
- }
@@ -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;
@@ -1,5 +0,0 @@
1
- export interface AddBrowserModalProps {
2
-
3
- // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
4
- onUpdateAddBrowser: () => void;
5
- }
@@ -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
- }
@@ -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;
@@ -1,4 +0,0 @@
1
- export interface DatasetListModalProps {
2
- // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
3
- onUpdateDatasetList: () => void;
4
- }