Skip to content

Commit e646f09

Browse files
talhainvenxiontalhainvenxion
authored
fix: improve connectors (#425)
1 parent 23b6d30 commit e646f09

File tree

21 files changed

+543
-216
lines changed

21 files changed

+543
-216
lines changed

‎src/ui/components/forms/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export type FieldError = {
4141

4242
export const FormTextField = (props: {
4343
autoFocus?: any;
44+
onHandleFocus?: (s: string) => void;
4445
label: string;
4546
labelColor?: any;
4647
placeholder: string;
@@ -631,6 +632,7 @@ export const SearchInputField = (
631632

632633
export const FormPasswordFieldVerify = (
633634
props: {
635+
onHandleFocus?: any;
634636
label: string;
635637
labelColor: any;
636638
placeholder: string;

‎src/ui/components/inputs/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ export const BaseInput = ({
106106
onChange,
107107
defaultValue,
108108
inputRef,
109+
onHandleFocus,
109110
placeholder,
110111
type,
111112
hasError,
@@ -118,9 +119,11 @@ export const BaseInput = ({
118119
onChange: (e: any) => void;
119120
defaultValue?: string;
120121
inputRef?: any;
122+
onHandleFocus?: (e: any) => void;
121123
placeholder?: string;
122124
type: string;
123125
onRemoveFocus?: any;
126+
124127
hasError?: boolean;
125128
className?: string;
126129
style?: any;
@@ -129,6 +132,7 @@ export const BaseInput = ({
129132
{...props}
130133
ref={inputRef}
131134
onChange={onChange}
135+
onFocus={onHandleFocus}
132136
onBlur={onRemoveFocus}
133137
value={value}
134138
defaultValue={defaultValue}
@@ -198,6 +202,7 @@ export const TextInput = ({
198202
onChangeText,
199203
defaultValue,
200204
inputRef,
205+
onHandleFocus,
201206
placeholder,
202207
hasError,
203208
style,
@@ -213,6 +218,7 @@ export const TextInput = ({
213218
type?: string;
214219
inputRef?: any;
215220
onRemoveFocus?: any;
221+
onHandleFocus?: (s: string) => void;
216222
style?: any;
217223
onKeyDown?: (e: { key: string }) => void;
218224
}): JSX.Element => (
@@ -226,6 +232,7 @@ export const TextInput = ({
226232
value={value}
227233
defaultValue={defaultValue}
228234
onRemoveFocus={onRemoveFocus}
235+
onHandleFocus={onHandleFocus}
229236
placeholder={placeholder}
230237
type={type}
231238
style={style}

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

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -275,34 +275,38 @@ export const GetHeaderCols = ({
275275
activeSortingDirection={activeSortingDirection}
276276
>
277277
<Paragraph size="small" color="black" style={{ fontSize: '14px' }}>
278-
Resource Types
278+
Resource Type
279279
</Paragraph>
280280
</SortingHeader>
281281
),
282282
width: '10%',
283283
renderRow: (connector: any) => {
284284
return (
285285
<FlexBox alignItems="center">
286-
{connectorDetail?.connectorType?.resource_types?.map((e: any) => (
287-
<Box marginLeft="sm">
288-
<div data-tip data-for={e?.name}>
289-
<FlexBox alignItems="center">
290-
<img
291-
alt={e?.logo_url}
292-
src={e?.logo_url}
293-
style={{
294-
height: '28px',
295-
width: '28px',
296-
}}
297-
/>
298-
</FlexBox>
299-
</div>
286+
{connectorDetail?.connectorType?.resource_types?.map(
287+
(e: any) =>
288+
e.resource_type === connector.flavor.connectorResourceType && (
289+
// <>aasdasd</>
290+
<Box marginLeft="sm">
291+
<div data-tip data-for={e?.name}>
292+
<FlexBox alignItems="center">
293+
<img
294+
alt={e?.logo_url}
295+
src={e?.logo_url}
296+
style={{
297+
height: '28px',
298+
width: '28px',
299+
}}
300+
/>
301+
</FlexBox>
302+
</div>
300303

301-
<ReactTooltip id={e?.name} place="top" effect="solid">
302-
<Paragraph color="white">{e?.name}</Paragraph>
303-
</ReactTooltip>
304-
</Box>
305-
))}
304+
<ReactTooltip id={e?.name} place="top" effect="solid">
305+
<Paragraph color="white">{e?.name}</Paragraph>
306+
</ReactTooltip>
307+
</Box>
308+
),
309+
)}
306310
</FlexBox>
307311
);
308312
},
@@ -332,13 +336,17 @@ export const GetHeaderCols = ({
332336
width: '10%',
333337
renderRow: (connector: any) => (
334338
<FlexBox alignItems="center">
335-
<div data-tip data-for={connector.resource_id}>
339+
<div data-tip data-for={connector.connectorResourceId}>
336340
<Paragraph size="small" color="black">
337-
{connector.resource_id}
341+
{connector.connectorResourceId}
338342
</Paragraph>
339343
</div>
340-
<ReactTooltip id={connector.resource_id} place="top" effect="solid">
341-
<Paragraph color="white">{connector.resource_id}</Paragraph>
344+
<ReactTooltip
345+
id={connector.connectorResourceId}
346+
place="top"
347+
effect="solid"
348+
>
349+
<Paragraph color="white">{connector.connectorResourceId}</Paragraph>
342350
</ReactTooltip>
343351
</FlexBox>
344352
),

‎src/ui/layouts/connectors/ConnectorDetail/ConnectorComponents/useService.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,13 +81,17 @@ export const useService = ({
8181
// }, [connectors, filter]);
8282
useEffect(() => {
8383
const mappedConnectorComponent = connectorComponent.map((item: any) => {
84-
const temp: any = flavourList.find((fl: any) => fl.name === item.flavor);
84+
const temp: any = flavourList.find(
85+
(fl: any) => fl.name === item.flavor && fl.type === item.type,
86+
);
87+
8588
if (temp) {
8689
return {
8790
...item,
8891
flavor: {
8992
logoUrl: temp.logo_url,
9093
name: item.flavor,
94+
connectorResourceType: temp.connector_resource_type,
9195
},
9296
};
9397
}
@@ -96,7 +100,7 @@ export const useService = ({
96100
});
97101

98102
setFilteredConnectors(mappedConnectorComponent as TStack[]);
99-
// debugger;
103+
// console.log(mappedConnectorComponent, 'mappedConnectorComponent');
100104
}, [connectorComponent, filter, flavourList]);
101105

102106
useEffect(() => {

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

Lines changed: 97 additions & 22 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 {
@@ -15,6 +15,9 @@ export const GetHeaderCols = ({
1515
}: {
1616
filteredConnector: any[];
1717
}): HeaderCol[] => {
18+
const [showResourceTypes, setShowResourceTypes] = useState(false);
19+
const [connectorId, setConnectorId] = useState('');
20+
1821
return [
1922
// {
2023
// width: '3%',
@@ -151,29 +154,101 @@ export const GetHeaderCols = ({
151154
</Box>
152155
),
153156
width: '10%',
154-
renderRow: (connector: any) => (
155-
<FlexBox alignItems="center">
156-
{connector?.connectorType?.resource_types?.map((e: any) => (
157-
<Box marginLeft="sm">
158-
<div data-tip data-for={e?.name}>
159-
<FlexBox alignItems="center">
160-
<img
161-
alt={e?.logo_url}
162-
src={e?.logo_url}
157+
renderRow: (connector: any) => {
158+
const filteredResourceTypes = connector?.connectorType?.resource_types?.filter(
159+
(e: any) => {
160+
if (connector.resourceTypes.includes(e.resource_type)) return e;
161+
},
162+
);
163+
164+
return (
165+
<FlexBox alignItems="center">
166+
{filteredResourceTypes.slice(0, 2)?.map(
167+
(e: any, index: number) =>
168+
connector.resourceTypes.includes(e.resource_type) && (
169+
<Box marginLeft={index !== 0 ? 'sm' : null}>
170+
<div data-tip data-for={e?.name}>
171+
<FlexBox alignItems="center">
172+
<img
173+
alt={e?.logo_url}
174+
src={e?.logo_url}
175+
style={{
176+
height: '28px',
177+
width: '28px',
178+
}}
179+
/>
180+
</FlexBox>
181+
</div>
182+
<ReactTooltip id={e?.name} place="top" effect="solid">
183+
<Paragraph color="white">{e?.name}</Paragraph>
184+
</ReactTooltip>
185+
</Box>
186+
),
187+
)}
188+
189+
{filteredResourceTypes?.length > 2 && (
190+
<Box marginLeft="sm" onClick={(e) => e.stopPropagation()}>
191+
<FlexBox
192+
alignItems="center"
193+
justifyContent="center"
194+
onClick={() => {
195+
setShowResourceTypes(!showResourceTypes);
196+
setConnectorId(connector?.id);
197+
}}
198+
style={{
199+
height: '28px',
200+
width: '28px',
201+
border: '1.5px solid #424240',
202+
borderRadius: '100%',
203+
cursor: 'pointer',
204+
}}
205+
>
206+
<Paragraph>+{filteredResourceTypes?.length - 2}</Paragraph>
207+
</FlexBox>
208+
209+
{showResourceTypes && connectorId === connector?.id && (
210+
<FlexBox
211+
padding="sm"
212+
alignItems="center"
213+
justifyContent="center"
163214
style={{
164-
height: '28px',
165-
width: '28px',
215+
marginTop: '5px',
216+
backgroundColor: '#fff',
217+
position: 'absolute',
218+
border: '1px solid #e9eaec',
219+
borderRadius: '4px',
220+
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.05)',
221+
zIndex: 100,
166222
}}
167-
/>
168-
</FlexBox>
169-
</div>
170-
<ReactTooltip id={e?.name} place="top" effect="solid">
171-
<Paragraph color="white">{e?.name}</Paragraph>
172-
</ReactTooltip>
173-
</Box>
174-
))}
175-
</FlexBox>
176-
),
223+
>
224+
{filteredResourceTypes
225+
?.slice(2)
226+
?.map((e: any, index: number) => (
227+
<Box marginLeft={index !== 0 ? 'sm' : null}>
228+
<div data-tip data-for={e?.name}>
229+
<FlexBox alignItems="center">
230+
<img
231+
alt={e?.logo_url}
232+
src={e?.logo_url}
233+
style={{
234+
height: '28px',
235+
width: '28px',
236+
}}
237+
/>
238+
</FlexBox>
239+
</div>
240+
<ReactTooltip id={e?.name} place="top" effect="solid">
241+
<Paragraph color="white">{e?.name}</Paragraph>
242+
</ReactTooltip>
243+
</Box>
244+
))}
245+
</FlexBox>
246+
)}
247+
</Box>
248+
)}
249+
</FlexBox>
250+
);
251+
},
177252
},
178253

179254
{

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

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -237,31 +237,38 @@ export const GetHeaderCols = ({
237237
),
238238
width: '10%',
239239
renderRow: (connector: any) => {
240+
const filteredResourceTypes = connector?.connectorType?.resource_types?.filter(
241+
(e: any) => {
242+
if (connector.resourceTypes.includes(e.resource_type)) return e;
243+
},
244+
);
245+
240246
return (
241247
<FlexBox alignItems="center">
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-
))}
248+
{filteredResourceTypes.slice(0, 2)?.map(
249+
(e: any, index: number) =>
250+
connector.resourceTypes.includes(e.resource_type) && (
251+
<Box marginLeft={index !== 0 ? 'sm' : null}>
252+
<div data-tip data-for={e?.name}>
253+
<FlexBox alignItems="center">
254+
<img
255+
alt={e?.logo_url}
256+
src={e?.logo_url}
257+
style={{
258+
height: '28px',
259+
width: '28px',
260+
}}
261+
/>
262+
</FlexBox>
263+
</div>
264+
<ReactTooltip id={e?.name} place="top" effect="solid">
265+
<Paragraph color="white">{e?.name}</Paragraph>
266+
</ReactTooltip>
267+
</Box>
268+
),
269+
)}
263270

264-
{connector?.connectorType?.resource_types?.length > 2 && (
271+
{filteredResourceTypes?.length > 2 && (
265272
<Box marginLeft="sm" onClick={(e) => e.stopPropagation()}>
266273
<FlexBox
267274
alignItems="center"
@@ -278,9 +285,7 @@ export const GetHeaderCols = ({
278285
cursor: 'pointer',
279286
}}
280287
>
281-
<Paragraph>
282-
+{connector?.connectorType?.resource_types?.length - 2}
283-
</Paragraph>
288+
<Paragraph>+{filteredResourceTypes?.length - 2}</Paragraph>
284289
</FlexBox>
285290

286291
{showResourceTypes && connectorId === connector?.id && (
@@ -298,7 +303,7 @@ export const GetHeaderCols = ({
298303
zIndex: 100,
299304
}}
300305
>
301-
{connector?.connectorType?.resource_types
306+
{filteredResourceTypes
302307
?.slice(2)
303308
?.map((e: any, index: number) => (
304309
<Box marginLeft={index !== 0 ? 'sm' : null}>

0 commit comments

Comments
 (0)