Skip to content

Commit 2fb87a9

Browse files
AhsanInvexionAhsanInvexion
authored
fix: connector table and sidepop update (#420)
1 parent 49c1721 commit 2fb87a9

File tree

18 files changed

+163
-51
lines changed

18 files changed

+163
-51
lines changed

‎src/ui/layouts/common/Table/index.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,11 @@ export const Table: React.FC<TableProps> = ({
178178
return (
179179
<FlexBox.Column
180180
fullWidth
181-
style={{ marginBottom: pagination ? '90px' : '0px' }}
181+
style={{
182+
// marginBottom: pagination ? '90px' : '0px',
183+
minWidth: '1250px',
184+
overflowX: 'auto',
185+
}}
182186
>
183187
<IfElse
184188
condition={tableRows.length > 0 && !loading}
@@ -517,7 +521,11 @@ export const Table: React.FC<TableProps> = ({
517521
)}
518522
renderWhenFalse={() => (
519523
<Box
520-
style={{ textAlign: 'center', maxWidth: '700px', margin: '0 auto' }}
524+
style={{
525+
textAlign: 'center',
526+
maxWidth: '700px',
527+
margin: '0 auto',
528+
}}
521529
paddingVertical="xxl"
522530
>
523531
<H3>

‎src/ui/layouts/connectors/ConnectorDetail/ConnectorComponents/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,12 @@ Props) => {
181181
};
182182

183183
return (
184-
<>
184+
<Box
185+
style={{
186+
overflowX: 'auto',
187+
marginBottom: connectorsPaginated.totalitem > 5 ? '90px' : '0px',
188+
}}
189+
>
185190
<CollapseTable
186191
renderAfterRow={(connector: any) => (
187192
<>
@@ -294,6 +299,6 @@ Props) => {
294299
</PrimaryButton>
295300
</Box>
296301
</FlexBox>
297-
</>
302+
</Box>
298303
);
299304
};

‎src/ui/layouts/connectors/ConnectorDetail/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export const StackDetail: React.FC = () => {
169169
breadcrumbs={breadcrumbs}
170170
title="Connectors"
171171
>
172-
<Box marginTop="lg">
172+
<Box marginTop="lg" style={{ overflowX: 'auto' }}>
173173
<CollapseTable
174174
pagination={false}
175175
renderAfterRow={(connector: any) => <></>}

‎src/ui/layouts/connectors/ConnectorTypes/SidePopup/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,11 @@ export const SidePopup: React.FC<{
9595

9696
<Box className={styles.sidePopup}>
9797
<OutsideClickHandler onOutsideClick={onClose}>
98-
<Box marginVertical="lg" marginHorizontal="xxxl">
98+
<Box
99+
marginVertical="lg"
100+
marginHorizontal="xxxl"
101+
style={{ paddingBottom: '300px' }}
102+
>
99103
<FlexBox>
100104
<Box className={styles.mainImage}>
101105
<img src={connectorType?.logoUrl} alt={connectorType?.name} />

‎src/ui/layouts/connectors/Connectors/List/getHeaderCols.tsx‎

Lines changed: 86 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import _ from 'lodash';
2-
import React from 'react';
2+
import React, { useState } from 'react';
33
import ReactTooltip from 'react-tooltip';
44
import { iconColors, iconSizes, ID_MAX_LENGTH } from '../../../../../constants';
55
import {
@@ -43,6 +43,9 @@ export const GetHeaderCols = ({
4343
filteredConnectors,
4444
});
4545

46+
const [showResourceTypes, setShowResourceTypes] = useState(false);
47+
const [connectorId, setConnectorId] = useState('');
48+
4649
return [
4750
// {
4851
// width: '3%',
@@ -236,25 +239,90 @@ export const GetHeaderCols = ({
236239
renderRow: (connector: any) => {
237240
return (
238241
<FlexBox alignItems="center">
239-
{connector?.connectorType?.resource_types?.map((e: any) => (
240-
<Box marginLeft="sm">
241-
<div data-tip data-for={e?.name}>
242-
<FlexBox alignItems="center">
243-
<img
244-
alt={e?.logo_url}
245-
src={e?.logo_url}
246-
style={{
247-
height: '28px',
248-
width: '28px',
249-
}}
250-
/>
242+
{connector?.connectorType?.resource_types
243+
?.slice(0, 2)
244+
?.map((e: any, index: number) => (
245+
<Box marginLeft={index !== 0 ? 'sm' : null}>
246+
<div data-tip data-for={e?.name}>
247+
<FlexBox alignItems="center">
248+
<img
249+
alt={e?.logo_url}
250+
src={e?.logo_url}
251+
style={{
252+
height: '28px',
253+
width: '28px',
254+
}}
255+
/>
256+
</FlexBox>
257+
</div>
258+
<ReactTooltip id={e?.name} place="top" effect="solid">
259+
<Paragraph color="white">{e?.name}</Paragraph>
260+
</ReactTooltip>
261+
</Box>
262+
))}
263+
264+
{connector?.connectorType?.resource_types?.length > 2 && (
265+
<Box marginLeft="sm" onClick={(e) => e.stopPropagation()}>
266+
<FlexBox
267+
alignItems="center"
268+
justifyContent="center"
269+
onClick={() => {
270+
setShowResourceTypes(!showResourceTypes);
271+
setConnectorId(connector?.id);
272+
}}
273+
style={{
274+
height: '28px',
275+
width: '28px',
276+
border: '1.5px solid #424240',
277+
borderRadius: '100%',
278+
cursor: 'pointer',
279+
}}
280+
>
281+
<Paragraph>
282+
+{connector?.connectorType?.resource_types?.length - 2}
283+
</Paragraph>
284+
</FlexBox>
285+
286+
{showResourceTypes && connectorId === connector?.id && (
287+
<FlexBox
288+
padding="sm"
289+
alignItems="center"
290+
justifyContent="center"
291+
style={{
292+
marginTop: '5px',
293+
backgroundColor: '#fff',
294+
position: 'absolute',
295+
border: '1px solid #e9eaec',
296+
borderRadius: '4px',
297+
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.05)',
298+
zIndex: 100,
299+
}}
300+
>
301+
{connector?.connectorType?.resource_types
302+
?.slice(2)
303+
?.map((e: any, index: number) => (
304+
<Box marginLeft={index !== 0 ? 'sm' : null}>
305+
<div data-tip data-for={e?.name}>
306+
<FlexBox alignItems="center">
307+
<img
308+
alt={e?.logo_url}
309+
src={e?.logo_url}
310+
style={{
311+
height: '28px',
312+
width: '28px',
313+
}}
314+
/>
315+
</FlexBox>
316+
</div>
317+
<ReactTooltip id={e?.name} place="top" effect="solid">
318+
<Paragraph color="white">{e?.name}</Paragraph>
319+
</ReactTooltip>
320+
</Box>
321+
))}
251322
</FlexBox>
252-
</div>
253-
<ReactTooltip id={e?.name} place="top" effect="solid">
254-
<Paragraph color="white">{e?.name}</Paragraph>
255-
</ReactTooltip>
323+
)}
256324
</Box>
257-
))}
325+
)}
258326
</FlexBox>
259327
);
260328
},

‎src/ui/layouts/connectors/Connectors/List/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,12 @@ Props) => {
168168
};
169169

170170
return (
171-
<>
171+
<Box
172+
style={{
173+
overflowX: 'auto',
174+
marginBottom: connectorsPaginated.totalitem > 5 ? '90px' : '0px',
175+
}}
176+
>
172177
<CollapseTable
173178
route={routePaths.connectors.connectorTypes(selectedWorkspace)}
174179
renderAfterRow={(connector: any) => (
@@ -290,6 +295,6 @@ Props) => {
290295
</PrimaryButton>
291296
</Box>
292297
</FlexBox>
293-
</>
298+
</Box>
294299
);
295300
};

‎src/ui/layouts/connectors/UpdateConnector/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export const StackDetail: React.FC = () => {
164164
breadcrumbs={breadcrumbs}
165165
title="Connector"
166166
>
167-
<Box marginTop="lg">
167+
<Box marginTop="lg" style={{ overflowX: 'auto' }}>
168168
<CollapseTable
169169
pagination={false}
170170
renderAfterRow={(secret: any) => <></>}

‎src/ui/layouts/pipelines/PipelineDetail/index.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -146,14 +146,16 @@ export const PipelineDetail: React.FC = () => {
146146
{locationPath.includes('configuration') && (
147147
<FilterWrapperForConfiguration />
148148
)}
149-
<CollapseTable
150-
pagination={false}
151-
renderAfterRow={(stack: TStack) => <></>}
152-
headerCols={headerCols}
153-
tableRows={filteredPipeline}
154-
emptyState={{ text: translate('emptyState.text') }}
155-
trOnClick={openDetailPage}
156-
/>
149+
<Box style={{ overflowX: 'auto' }}>
150+
<CollapseTable
151+
pagination={false}
152+
renderAfterRow={(stack: TStack) => <></>}
153+
headerCols={headerCols}
154+
tableRows={filteredPipeline}
155+
emptyState={{ text: translate('emptyState.text') }}
156+
trOnClick={openDetailPage}
157+
/>
158+
</Box>
157159
</Box>
158160
{/* <List filter={[]} pagination={false} isExpended id={pipeline.id}></List> */}
159161
{/* <Box style={boxStyle}>

‎src/ui/layouts/pipelines/Pipelines/List/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,12 @@ export const List: React.FC<Props> = ({
113113
};
114114

115115
return (
116-
<>
116+
<Box
117+
style={{
118+
overflowX: 'auto',
119+
marginBottom: pipelinesPaginated.totalitem > 5 ? '90px' : '0px',
120+
}}
121+
>
117122
<CollapseTable
118123
renderAfterRow={(pipeline: TPipeline) => (
119124
<RunsForPipelineTable
@@ -215,6 +220,6 @@ export const List: React.FC<Props> = ({
215220
</FlexBox>
216221
)}
217222
</If>
218-
</>
223+
</Box>
219224
);
220225
};

‎src/ui/layouts/runs/Stacks/List/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
2+
import { Box } from '../../../../components';
33
import { translate } from '../translate';
44
import { CollapseTable } from '../../../common/CollapseTable';
55
import { useHistory, useSelector } from '../../../../hooks';
@@ -29,7 +29,7 @@ export const List: React.FC = () => {
2929
};
3030

3131
return (
32-
<>
32+
<Box style={{ overflowX: 'auto' }}>
3333
<CollapseTable
3434
renderAfterRow={(stack: TStack) => (
3535
<RunsForStackTable
@@ -46,6 +46,6 @@ export const List: React.FC = () => {
4646
emptyState={{ text: translate('emptyState.text') }}
4747
trOnClick={openDetailPage}
4848
/>
49-
</>
49+
</Box>
5050
);
5151
};

0 commit comments

Comments
 (0)