Skip to content

Commit

Permalink
Made changes w.r.t bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@sivaramakrishnan-techconative
sivaramakrishnan-techconative committed Jan 8, 2024
1 parent a12195f commit b734981
Show file tree
Hide file tree
Showing 11 changed files with 168 additions and 66 deletions.
20 changes: 10 additions & 10 deletions dist/config-import-bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/config-import-bundle.js.map
View file

Large diffs are not rendered by default.

38 changes: 19 additions & 19 deletions dist/log.bundle-sizes.rest-import-ui.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,46 @@
@mui\base: 387.29 KB (3.40%)
lodash: 239.44 KB (2.10%)
core-js-pure: 165.03 KB (1.45%)
@mui\system: 162.12 KB (1.42%)
@mui\system: 161.76 KB (1.42%)
immutable: 139.01 KB (1.22%)
react-dom: 129.98 KB (1.14%)
js-yaml: 105.01 KB (0.923%)
react-redux: 90.92 KB (0.799%)
axios: 87.01 KB (0.765%)
js-yaml: 105.01 KB (0.922%)
react-redux: 90.92 KB (0.798%)
axios: 87.01 KB (0.764%)
@reduxjs\toolkit: 84.36 KB (0.741%)
i18next: 82.68 KB (0.727%)
i18next: 82.68 KB (0.726%)
@popperjs\core: 68.84 KB (0.605%)
buffer: 56.99 KB (0.501%)
buffer: 56.99 KB (0.500%)
react-transition-group: 55.52 KB (0.488%)
@emotion\cache: 40.02 KB (0.352%)
@emotion\cache: 40.02 KB (0.351%)
@mui\utils: 34.3 KB (0.301%)
redux: 28.94 KB (0.254%)
react-i18next: 25.61 KB (0.225%)
stylis: 23.54 KB (0.207%)
@emotion\react: 23.27 KB (0.205%)
@emotion\react: 23.27 KB (0.204%)
@emotion\styled: 19 KB (0.167%)
sha.js: 18.57 KB (0.163%)
immer: 17.99 KB (0.158%)
url-parse: 16.23 KB (0.143%)
@emotion\serialize: 13.35 KB (0.117%)
js-base64: 10.11 KB (0.0888%)
reselect: 8.85 KB (0.0778%)
react: 7.98 KB (0.0702%)
js-base64: 10.11 KB (0.0887%)
reselect: 8.85 KB (0.0777%)
react: 7.98 KB (0.0701%)
redux-immutable: 5.43 KB (0.0477%)
process: 5.29 KB (0.0465%)
@emotion\sheet: 4.66 KB (0.0410%)
scheduler: 4.33 KB (0.0381%)
scheduler: 4.33 KB (0.0380%)
@emotion\is-prop-valid: 4.33 KB (0.0380%)
deep-extend: 4.19 KB (0.0368%)
@babel\runtime: 3.93 KB (0.0346%)
@babel\runtime: 3.93 KB (0.0345%)
@babel\runtime-corejs3: 3.93 KB (0.0345%)
base64-js: 3.84 KB (0.0338%)
base64-js: 3.84 KB (0.0337%)
@mui\styled-engine: 3.55 KB (0.0312%)
@mui\private-theming: 3.5 KB (0.0308%)
css.escape: 3.08 KB (0.0271%)
css.escape: 3.08 KB (0.0270%)
serialize-error: 2.93 KB (0.0257%)
hoist-non-react-statics: 2.68 KB (0.0235%)
prop-types: 2.6 KB (0.0229%)
prop-types: 2.6 KB (0.0228%)
use-sync-external-store: 2.59 KB (0.0228%)
querystringify: 2.5 KB (0.0220%)
react-is: 2.4 KB (0.0211%)
Expand All @@ -51,17 +51,17 @@ html-parse-stringify: 2.09 KB (0.0184%)
@emotion\utils: 1.72 KB (0.0151%)
safe-buffer: 1.63 KB (0.0143%)
@emotion\hash: 1.62 KB (0.0142%)
clipboard-copy: 1.61 KB (0.0142%)
clipboard-copy: 1.61 KB (0.0141%)
dom-helpers: 1.57 KB (0.0138%)
randombytes: 1.54 KB (0.0135%)
@braintree\sanitize-url: 1.38 KB (0.0121%)
redux-thunk: 1.27 KB (0.0112%)
@emotion\unitless: 924 B (0.00793%)
@emotion\unitless: 924 B (0.00792%)
inherits: 753 B (0.00646%)
requires-port: 753 B (0.00646%)
@emotion\use-insertion-effect-with-fallbacks: 472 B (0.00405%)
@emotion\weak-memoize: 379 B (0.00325%)
clsx: 374 B (0.00321%)
void-elements: 338 B (0.00290%)
@emotion\memoize: 202 B (0.00173%)
<self>: 1.72 MB (15.5%)
<self>: 1.73 MB (15.6%)
20 changes: 10 additions & 10 deletions dist/rest-import-bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/rest-import-bundle.js.map
View file

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
{
"name": "rest-import-wavemaker",
"version": "0.1.1018",
"version": "0.1.1022",
"private": false,
"main": "./dist/core/components/RestImport.js",
"release": {
"branches": [
"main",
"next"
"main"
]
},
"dependencies": {
Expand Down
30 changes: 29 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,35 @@ export default function App() {
name: "new",
type: "DATE",
value: "vew"
}],
}, {
name: "ewf",
type: "DATE",
value: "vew"
}, {
name: "nefewwew",
type: "DATE",
value: "vew"
}, {
name: "newfwewe",
type: "DATE",
value: "vew"
}, {
name: "nfweew",
type: "DATE",
value: "vew"
}, {
name: "nfewew",
type: "DATE",
value: "vew"
}, {
name: "nfewww",
type: "DATE",
value: "vew"
}, {
name: "nefeww",
type: "DATE",
value: "vew"
},],
queryParams: [{
name: "jh",
type: "gwe",
Expand Down
12 changes: 9 additions & 3 deletions src/core/components/MonacoEditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { useEffect } from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';

declare const window: any;
const MonacoEditor = ({ editorRef, initialValue, url, monacoEditorHeight, initialLanguage }:
{ editorRef: any, initialValue: string | undefined, url: string, monacoEditorHeight: number, initialLanguage: string }) => {
const MonacoEditor = ({ editorRef, initialValue, url, initialLanguage, viewMode }:
{ editorRef: any, initialValue: string | undefined, url: string, initialLanguage: string, viewMode: boolean }) => {
const matches = useMediaQuery('(min-width:1600px)');

useEffect(() => {
const loadMonaco = async () => {
Expand Down Expand Up @@ -38,7 +40,11 @@ const MonacoEditor = ({ editorRef, initialValue, url, monacoEditorHeight, initia
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return <div ref={editorRef} style={{ height: monacoEditorHeight ? `${monacoEditorHeight / 0.8}px` : '200px', width: "100%" }} />;
return <>
<div style={{ height: matches ? "65vh" : viewMode ? "50vh" : '55vh', width: '99%' }}>
<div ref={editorRef} style={{ height: '100%' }} />
</div>
</>;
};

export default MonacoEditor;
12 changes: 7 additions & 5 deletions src/core/components/RestImport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React, { ChangeEvent, ReactNode, SyntheticEvent, useEffect, useRef, useSt
import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
import {
Box, FormControl, FormLabel, Grid, IconButton, MenuItem, Paper, Select, SelectChangeEvent, Stack, Switch, Tab, Table, TableBody, TableCell,
TableContainer, TableHead, TableRow, Tabs, TextField, Tooltip, Typography, Button, TextareaAutosize, Alert, createTheme, ThemeProvider
TableContainer, TableHead, TableRow, Tabs, TextField, Tooltip, Typography, Button, TextareaAutosize, Alert, createTheme, ThemeProvider,
useMediaQuery
} from '@mui/material'
import ProviderModal from './ProviderModal'
import { BodyParamsI, HeaderAndQueryTable, MultipartTable, HeaderAndQueryI, TableRowStyled, tableHeaderStyle, tableRowStyle } from './Table'
Expand Down Expand Up @@ -101,7 +102,7 @@ function CustomTabPanel(props: TabPanelProps) {
role="tabpanel"
hidden={value !== index}
{...other}
style={{ margin: "20px" }}
style={{ margin: "10px" }}
>
{value === index && (
<Box>
Expand Down Expand Up @@ -171,6 +172,7 @@ export default function RestImport({ language, restImportConfig }: { language: s
fontSize: 16, // Adjust the font size as needed
},
});
const matches = useMediaQuery('(min-width:1600px)');
const state_val = "eyJtb2RlIjoiZGVzaWduVGltZSIsInByb2plY3RJZCI6IldNUFJKMmM5MTgwODg4OWE5NjQwMDAxOGExYzE0YjBhNzI4YTQifQ=="
const httpMethods = ["GET", "POST", "DELETE", "HEAD", "PATCH", "PUT"]
const httpAuthTypes = ["NONE", 'BASIC', 'OAUTH2']
Expand Down Expand Up @@ -1099,7 +1101,7 @@ export default function RestImport({ language, restImportConfig }: { language: s
</Grid>}
</Grid>
</Grid>
<Grid sx={{ overflowY: 'auto' }} height={restImportConfig.responseBlockHeight ? `${restImportConfig.responseBlockHeight}px` : '300px'} item md={12}>
<Grid sx={{ overflowY: 'auto', overflowX: "hidden" }} height={matches ? "85vh" : '80vh'} item md={12}>
<Box data-testid="request-config-block" sx={{ width: '100%' }}>
<Box sx={{ borderColor: 'divider', backgroundColor: '#f3f5f6' }}>
<Tabs sx={{ minHeight: "30px", height: "45px" }} value={requestTabValue} onChange={handleChangeHeaderTabs}>
Expand Down Expand Up @@ -1282,8 +1284,8 @@ export default function RestImport({ language, restImportConfig }: { language: s
</Tabs>
</Box>
</Box>
<div style={{ display: responseTabValue === 0 ? 'block' : 'none', width: '100%' }}>
<MonacoEditor monacoEditorHeight={restImportConfig?.responseBlockHeight as number} url={restImportConfig.monacoEditorURL} editorRef={editorRef} initialValue={JSON.stringify(response.data, undefined, 2)} initialLanguage={editorLanguage} />
<div style={{ display: responseTabValue === 0 ? 'block' : 'none' }}>
<MonacoEditor viewMode={restImportConfig.viewMode} url={restImportConfig.monacoEditorURL} editorRef={editorRef} initialValue={JSON.stringify(response.data, undefined, 2)} initialLanguage={editorLanguage} />
</div>
{responseTabValue === 1 && <Stack overflow={'auto'} sx={{ backgroundColor: "rgb(40, 42, 54)", color: 'white' }} width={'100%'} direction={'row'}>
{response !== undefined && <TableContainer style={{ height: restImportConfig?.responseBlockHeight ? `${restImportConfig?.responseBlockHeight / 1.2}px` : '300px' }}>
Expand Down
91 changes: 79 additions & 12 deletions src/core/components/Table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { CSSProperties, ReactNode } from 'react';
import React, { CSSProperties, ReactNode, useEffect, useRef } from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
Expand All @@ -19,7 +19,7 @@ import styled from "@emotion/styled";
import { FileUploadOutlined } from '@mui/icons-material';
import { INotifyMessage, PathParamsI, defaultContentTypes, restImportConfigI } from './RestImport';
import { useTranslation } from 'react-i18next';
import { AxiosResponse } from 'axios';
import { AxiosResponse } from 'axios';

export interface HeaderAndQueryI {
name: string
Expand Down Expand Up @@ -65,6 +65,40 @@ export function HeaderAndQueryTable(
pathParams: PathParamsI[], handleToastError: (error: INotifyMessage, response?: AxiosResponse) => void, restImportConfig: restImportConfigI
}
) {
const tableRef = useRef<HTMLTableElement | null>(null)
useEffect(() => {
const updateStickyRow = () => {
const table = tableRef.current;
if (table) {
const tbody = table.querySelector('tbody');
if (tbody) {
const rows = tbody.getElementsByTagName('tr');
const lastRow = rows[rows.length - 1];
const tableRect = table.getBoundingClientRect();
const lastRowRect = lastRow.getBoundingClientRect();
if (lastRowRect.bottom < tableRect.bottom) {
lastRow.style.position = 'sticky';
lastRow.style.bottom = '0';
lastRow.style.background = rows.length % 2 === 0 ? "#f3f3f3" : 'white'; // Adjust as needed
} else {
lastRow.style.position = 'static';
lastRow.style.bottom = 'auto';
lastRow.style.background = rows.length % 2 === 0 ? 'white' : "#f3f3f3";;
}
}
}
};
// Initial update
updateStickyRow();
// Listen for scroll events on the table
tableRef.current?.addEventListener('scroll', updateStickyRow);
// Cleanup event listener on component unmount
return () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
tableRef.current?.removeEventListener('scroll', updateStickyRow);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
const { t: translate } = useTranslation();
const selectTypes =
{
Expand Down Expand Up @@ -281,8 +315,8 @@ export function HeaderAndQueryTable(
}

return (
<TableContainer component={Paper}>
<Table>
<TableContainer sx={{ maxHeight: '35vh' }} component={Paper}>
<Table ref={tableRef as React.RefObject<HTMLTableElement>}>
<TableHead>
<TableRow sx={{ backgroundColor: '#d4e6f1' }} data-testid="subheaders">
<TableCell style={tableHeaderStyle} align='left'>{translate("NAME")}</TableCell>
Expand All @@ -291,7 +325,7 @@ export function HeaderAndQueryTable(
<TableCell style={tableHeaderStyle} align='left'>{translate("ACTIONS")}</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableBody sx={{ maxHeight: '35vh', overflowY: 'auto' }}>
{value.map((data, index) =>
<TableRowStyled key={index}>
<TableCell style={tableRowStyle} width={"32.5%"} align='left'>
Expand All @@ -313,15 +347,14 @@ export function HeaderAndQueryTable(
</TableCell>
<TableCell style={tableRowStyle} width={"30%"} align='left'>
<FormControl size='small' fullWidth={true}>
<InputLabel>{translate("SELECT") + " " + translate("TYPE")}</InputLabel>
<Select
MenuProps={{
PaperProps: {
style: {
height: '300px', // Set the maximum height of the dropdown menu
},
},
}} name="wm-webservice-param-type" onChange={(e) => handleChangeType(e, index)} value={data.type} label={translate("Select Type")} data-testid="param-type">
}} name="wm-webservice-param-type" onChange={(e) => handleChangeType(e, index)} value={data.type} data-testid="param-type">
<ListSubheader sx={{ fontWeight: 700, color: 'black' }}>{translate("UI_TYPES")}</ListSubheader>
{selectTypes.UITypes.map((type) => <MenuItem title={type.label} key={type.value} value={type.value}>{type.label}</MenuItem>)}
<ListSubheader sx={{ fontWeight: 700, color: 'black' }}>{translate("SERVER") + " " + translate("SIDE") + ' ' + translate('PROPERTIES')}</ListSubheader>
Expand Down Expand Up @@ -354,7 +387,8 @@ export function HeaderAndQueryTable(
/>}
</TableCell>
<TableCell style={tableRowStyle} width={"5%"} align='center'>
{index === value.length - 1 ? <AddIcon name="wm-webservice-add-param" onClick={handleAddRow} sx={{ cursor: 'pointer' }} /> : <DeleteIcon name="wm-webservice-remove-param" onClick={() => handleDeleteRow(index)} sx={{ cursor: 'pointer' }} />}
{index === value.length - 1 ? <AddIcon name="wm-webservice-add-param" onClick={handleAddRow} sx={{ cursor: 'pointer' }} />
: <DeleteIcon name="wm-webservice-remove-param" onClick={() => handleDeleteRow(index)} sx={{ cursor: 'pointer' }} />}
</TableCell>
</TableRowStyled>
)}
Expand All @@ -370,7 +404,40 @@ export function MultipartTable(
value: BodyParamsI[], setValue: (data: BodyParamsI[]) => void,
handleToastError: (error: INotifyMessage, response?: AxiosResponse) => void,
}) {
const tableRef = useRef<HTMLTableElement | null>(null);

useEffect(() => {
const updateStickyRow = () => {
const table = tableRef.current;
if (table) {
const tbody = table.querySelector('tbody');
if (tbody) {
const rows = tbody.getElementsByTagName('tr');
const lastRow = rows[rows.length - 1];
const tableRect = table.getBoundingClientRect();
const lastRowRect = lastRow.getBoundingClientRect();
if (lastRowRect.bottom < tableRect.bottom) {
lastRow.style.position = 'sticky';
lastRow.style.bottom = '0';
lastRow.style.background = rows.length % 2 === 0 ? "#f3f3f3" : 'white'; // Adjust as needed
} else {
lastRow.style.position = 'static';
lastRow.style.bottom = 'auto';
lastRow.style.background = rows.length % 2 === 0 ? 'white' : "#f3f3f3";;
}
}
}
};
// Initial update
updateStickyRow();
// Listen for scroll events on the table
tableRef.current?.addEventListener('scroll', updateStickyRow);
// Cleanup event listener on component unmount
return () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
tableRef.current?.removeEventListener('scroll', updateStickyRow);
};
}, [value]);
const { t: translate } = useTranslation();
const handleChangeName = (name: string, currentIndex: number) => {
const valueClone = [...value]
Expand Down Expand Up @@ -451,8 +518,8 @@ export function MultipartTable(
}

return (
<TableContainer component={Paper}>
<Table data-testid="multipart-table">
<TableContainer sx={{ maxHeight: '35vh' }} component={Paper}>
<Table ref={tableRef as React.RefObject<HTMLTableElement>} data-testid="multipart-table">
<TableHead>
<TableRow sx={{ backgroundColor: '#d4e6f1' }}>
<TableCell style={tableHeaderStyle} align='left'>{translate('NAME')}</TableCell>
Expand All @@ -461,7 +528,7 @@ export function MultipartTable(
<TableCell style={tableHeaderStyle} align='left'>{translate('ACTIONS')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableBody sx={{ maxHeight: '35vh', overflowY: 'auto' }}>
{value.map((data, index) =>
<TableRowStyled key={index}>
<TableCell width={'32.5%'} style={tableRowStyle} align='left'>
Expand All @@ -476,7 +543,7 @@ export function MultipartTable(
<MenuItem title={translate("FILE")} value={'file'}>{translate("FILE")}</MenuItem>
<MenuItem title={translate("TEXT")} value={'text'}>{translate("TEXT")}</MenuItem>
<MenuItem title={translate("PLAINTEXT")} value={'plaintext'}>{translate("PLAINTEXT")}</MenuItem>
<MenuItem title={translate("APPLICATION/JSON")} value={'application/json'}>{translate("JSON") + " (" + translate("APPLICATION/JSON") + ")"}</MenuItem>
<MenuItem title={translate("JSON") + " (" + translate("APPLICATION/JSON") + ")"} value={'application/json'}>{translate("JSON") + " (" + translate("APPLICATION/JSON") + ")"}</MenuItem>
</Select>
</FormControl>
</TableCell>
Expand Down
2 changes: 1 addition & 1 deletion src/core/components/common/common.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,4 +227,4 @@ export function checkTypeForParameter(type: string): "SERVER" | "ENVIRONMENT" |
else if (ServerSideProperties.includes(type)) value = "SERVER"
else value = "ENVIRONMENT"
return value
}
}

0 comments on commit b734981

Please sign in to comment.