chore: Use types from the web package
This commit is contained in:
Faruk AYDIN
@@ -1,4 +1,4 @@
|
||||
import type { IStep } from '@automatisch/types';
|
||||
import type { IStep } from 'types';
|
||||
import ExpandLess from '@mui/icons-material/ExpandLess';
|
||||
import ExpandMore from '@mui/icons-material/ExpandMore';
|
||||
import Box from '@mui/material/Box';
|
||||
@@ -20,7 +20,7 @@ type SuggestionsProps = {
|
||||
data: {
|
||||
id: string;
|
||||
name: string;
|
||||
output: Record<string, unknown>[]
|
||||
output: Record<string, unknown>[];
|
||||
}[];
|
||||
onSuggestionClick: (variable: any) => void;
|
||||
};
|
||||
@@ -31,69 +31,73 @@ const LIST_ITEM_HEIGHT = 64;
|
||||
const computeListHeight = (currentLength: number) => {
|
||||
const numberOfRenderedItems = Math.min(SHORT_LIST_LENGTH, currentLength);
|
||||
return LIST_ITEM_HEIGHT * numberOfRenderedItems;
|
||||
}
|
||||
};
|
||||
|
||||
const getPartialArray = (array: any[], length = array.length) => {
|
||||
return array.slice(0, length);
|
||||
};
|
||||
|
||||
const renderItemFactory = ({ onSuggestionClick }: Pick<SuggestionsProps, 'onSuggestionClick'>) => (props: ListChildComponentProps) => {
|
||||
const { index, style, data } = props;
|
||||
const renderItemFactory =
|
||||
({ onSuggestionClick }: Pick<SuggestionsProps, 'onSuggestionClick'>) =>
|
||||
(props: ListChildComponentProps) => {
|
||||
const { index, style, data } = props;
|
||||
|
||||
const suboption = data[index];
|
||||
const suboption = data[index];
|
||||
|
||||
return (
|
||||
<ListItemButton
|
||||
sx={{ pl: 4 }}
|
||||
divider
|
||||
onClick={() => onSuggestionClick(suboption)}
|
||||
data-test="power-input-suggestion-item"
|
||||
key={index}
|
||||
style={style}
|
||||
>
|
||||
<ListItemText
|
||||
primary={suboption.label}
|
||||
primaryTypographyProps={{
|
||||
variant: 'subtitle1',
|
||||
title: 'Property name',
|
||||
sx: { fontWeight: 700 },
|
||||
}}
|
||||
secondary={suboption.sampleValue || ''}
|
||||
secondaryTypographyProps={{
|
||||
variant: 'subtitle2',
|
||||
title: 'Sample value',
|
||||
noWrap: true,
|
||||
}}
|
||||
/>
|
||||
</ListItemButton>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ListItemButton
|
||||
sx={{ pl: 4 }}
|
||||
divider
|
||||
onClick={() => onSuggestionClick(suboption)}
|
||||
data-test="power-input-suggestion-item"
|
||||
key={index}
|
||||
style={style}
|
||||
>
|
||||
<ListItemText
|
||||
primary={suboption.label}
|
||||
primaryTypographyProps={{
|
||||
variant: 'subtitle1',
|
||||
title: 'Property name',
|
||||
sx: { fontWeight: 700 },
|
||||
}}
|
||||
secondary={suboption.sampleValue || ''}
|
||||
secondaryTypographyProps={{
|
||||
variant: 'subtitle2',
|
||||
title: 'Sample value',
|
||||
noWrap: true,
|
||||
}}
|
||||
/>
|
||||
</ListItemButton>
|
||||
);
|
||||
};
|
||||
|
||||
const Suggestions = (props: SuggestionsProps) => {
|
||||
const formatMessage = useFormatMessage();
|
||||
const {
|
||||
data,
|
||||
onSuggestionClick = () => null
|
||||
} = props;
|
||||
const { data, onSuggestionClick = () => null } = props;
|
||||
const [current, setCurrent] = React.useState<number | null>(0);
|
||||
const [listLength, setListLength] = React.useState<number>(SHORT_LIST_LENGTH);
|
||||
const [filteredData, setFilteredData] = React.useState<any[]>(
|
||||
data
|
||||
const [filteredData, setFilteredData] = React.useState<any[]>(data);
|
||||
|
||||
React.useEffect(
|
||||
function syncOptions() {
|
||||
setFilteredData((filteredData) => {
|
||||
if (filteredData.length === 0 && filteredData.length !== data.length) {
|
||||
return data;
|
||||
}
|
||||
|
||||
return filteredData;
|
||||
});
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
React.useEffect(function syncOptions() {
|
||||
setFilteredData((filteredData) => {
|
||||
if (filteredData.length === 0 && filteredData.length !== data.length) {
|
||||
return data;
|
||||
}
|
||||
|
||||
return filteredData;
|
||||
})
|
||||
}, [data]);
|
||||
|
||||
const renderItem = React.useMemo(() => renderItemFactory({
|
||||
onSuggestionClick
|
||||
}), [onSuggestionClick]);
|
||||
const renderItem = React.useMemo(
|
||||
() =>
|
||||
renderItemFactory({
|
||||
onSuggestionClick,
|
||||
}),
|
||||
[onSuggestionClick]
|
||||
);
|
||||
|
||||
const expandList = () => {
|
||||
setListLength(Infinity);
|
||||
@@ -122,12 +126,12 @@ const Suggestions = (props: SuggestionsProps) => {
|
||||
return {
|
||||
id: stepWithOutput.id,
|
||||
name: stepWithOutput.name,
|
||||
output: stepWithOutput.output
|
||||
.filter(option => `${option.label}\n${option.sampleValue}`
|
||||
output: stepWithOutput.output.filter((option) =>
|
||||
`${option.label}\n${option.sampleValue}`
|
||||
.toLowerCase()
|
||||
.includes(search.toLowerCase())
|
||||
)
|
||||
}
|
||||
),
|
||||
};
|
||||
})
|
||||
.filter((stepWithOutput) => stepWithOutput.output.length);
|
||||
|
||||
@@ -161,14 +165,27 @@ const Suggestions = (props: SuggestionsProps) => {
|
||||
(current === index ? <ExpandLess /> : <ExpandMore />)}
|
||||
</ListItemButton>
|
||||
|
||||
<Collapse in={current === index || filteredData.length === 1} timeout="auto" unmountOnExit>
|
||||
<Collapse
|
||||
in={current === index || filteredData.length === 1}
|
||||
timeout="auto"
|
||||
unmountOnExit
|
||||
>
|
||||
<FixedSizeList
|
||||
height={computeListHeight(getPartialArray((option.output as any) || [], listLength).length)}
|
||||
height={computeListHeight(
|
||||
getPartialArray((option.output as any) || [], listLength)
|
||||
.length
|
||||
)}
|
||||
width="100%"
|
||||
itemSize={LIST_ITEM_HEIGHT}
|
||||
itemCount={getPartialArray((option.output as any) || [], listLength).length}
|
||||
itemCount={
|
||||
getPartialArray((option.output as any) || [], listLength)
|
||||
.length
|
||||
}
|
||||
overscanCount={2}
|
||||
itemData={getPartialArray((option.output as any) || [], listLength)}
|
||||
itemData={getPartialArray(
|
||||
(option.output as any) || [],
|
||||
listLength
|
||||
)}
|
||||
data-test="power-input-suggestion-group"
|
||||
>
|
||||
{renderItem}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { IStep } from '@automatisch/types';
|
||||
import type { IStep } from 'types';
|
||||
|
||||
const joinBy = (delimiter = '.', ...args: string[]) =>
|
||||
args.filter(Boolean).join(delimiter);
|
||||
@@ -10,7 +10,12 @@ type TProcessPayload = {
|
||||
parentLabel?: string;
|
||||
};
|
||||
|
||||
const process = ({ data, parentKey, index, parentLabel = '' }: TProcessPayload): any[] => {
|
||||
const process = ({
|
||||
data,
|
||||
parentKey,
|
||||
index,
|
||||
parentLabel = '',
|
||||
}: TProcessPayload): any[] => {
|
||||
if (typeof data !== 'object') {
|
||||
return [
|
||||
{
|
||||
@@ -24,27 +29,19 @@ const process = ({ data, parentKey, index, parentLabel = '' }: TProcessPayload):
|
||||
const entries = Object.entries(data);
|
||||
|
||||
return entries.flatMap(([name, sampleValue]) => {
|
||||
const label = joinBy(
|
||||
'.',
|
||||
parentLabel,
|
||||
(index as number)?.toString(),
|
||||
name
|
||||
);
|
||||
const label = joinBy('.', parentLabel, (index as number)?.toString(), name);
|
||||
|
||||
const value = joinBy(
|
||||
'.',
|
||||
parentKey,
|
||||
(index as number)?.toString(),
|
||||
name
|
||||
);
|
||||
const value = joinBy('.', parentKey, (index as number)?.toString(), name);
|
||||
|
||||
if (Array.isArray(sampleValue)) {
|
||||
return sampleValue.flatMap((item, index) => process({
|
||||
data: item,
|
||||
parentKey: value,
|
||||
index,
|
||||
parentLabel: label
|
||||
}));
|
||||
return sampleValue.flatMap((item, index) =>
|
||||
process({
|
||||
data: item,
|
||||
parentKey: value,
|
||||
index,
|
||||
parentLabel: label,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof sampleValue === 'object' && sampleValue !== null) {
|
||||
@@ -77,8 +74,9 @@ export const processStepWithExecutions = (steps: IStep[]): any[] => {
|
||||
.map((step: IStep, index: number) => ({
|
||||
id: step.id,
|
||||
// TODO: replace with step.name once introduced
|
||||
name: `${index + 1}. ${(step.appKey || '').charAt(0)?.toUpperCase() + step.appKey?.slice(1)
|
||||
}`,
|
||||
name: `${index + 1}. ${
|
||||
(step.appKey || '').charAt(0)?.toUpperCase() + step.appKey?.slice(1)
|
||||
}`,
|
||||
output: process({
|
||||
data: step.executionSteps?.[0]?.dataOut || {},
|
||||
parentKey: `step.${step.id}`,
|
||||
|
||||
Reference in New Issue
Block a user