groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: auto format whole project

Browse Source
This commit is contained in:
Ali BARIN
2022-11-05 23:57:33 +01:00
parent e338770e57
commit 475f24f661
199 changed files with 2421 additions and 1839 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
packages/web/src/pages/Application/index.tsx
View File

@@ -1,6 +1,15 @@
import * as React from 'react';
import { useQuery } from '@apollo/client';
import { Link, Route, Navigate, Routes, useParams, useSearchParams, useMatch, useNavigate } from 'react-router-dom';
import {
Link,
Route,
Navigate,
Routes,
useParams,
useSearchParams,
useMatch,
useNavigate,
} from 'react-router-dom';
import type { LinkProps } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
@@ -38,13 +47,18 @@ const ReconnectConnection = (props: any): React.ReactElement => {
connectionId={connectionId}
/>
);
}
};
export default function Application(): React.ReactElement | null {
const theme = useTheme();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), {
noSsr: true,
});
const formatMessage = useFormatMessage();
const connectionsPathMatch = useMatch({ path: URLS.APP_CONNECTIONS_PATTERN, end: false });
const connectionsPathMatch = useMatch({
path: URLS.APP_CONNECTIONS_PATTERN,
end: false,
});
const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false });
const [searchParams] = useSearchParams();
const { appKey } = useParams() as ApplicationParams;
@@ -57,24 +71,37 @@ export default function Application(): React.ReactElement | null {
const NewConnectionLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function InlineLink(
linkProps,
ref,
) {
return <Link ref={ref} to={URLS.APP_ADD_CONNECTION(appKey)} {...linkProps} />;
}),
[appKey],
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return (
<Link
ref={ref}
to={URLS.APP_ADD_CONNECTION(appKey)}
{...linkProps}
/>
);
}
),
[appKey]
);
const NewFlowLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function InlineLink(
linkProps,
ref,
) {
return <Link ref={ref} to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(appKey, connectionId)} {...linkProps} />;
}),
[appKey, connectionId],
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return (
<Link
ref={ref}
to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
appKey,
connectionId
)}
{...linkProps}
/>
);
}
),
[appKey, connectionId]
);
if (loading) return null;
@@ -141,7 +168,10 @@ export default function Application(): React.ReactElement | null {
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
<Tabs
variant={matchSmallScreens ? 'fullWidth' : undefined}
value={connectionsPathMatch?.pattern?.path || flowsPathMatch?.pattern?.path}
value={
connectionsPathMatch?.pattern?.path ||
flowsPathMatch?.pattern?.path
}
>
<Tab
label={formatMessage('app.connections')}
@@ -161,15 +191,28 @@ export default function Application(): React.ReactElement | null {
</Box>
<Routes>
<Route path={`${URLS.FLOWS}/*`} element={<AppFlows appKey={appKey} />} />
<Route
path={`${URLS.FLOWS}/*`}
element={<AppFlows appKey={appKey} />}
/>
<Route path={`${URLS.CONNECTIONS}/*`} element={<AppConnections appKey={appKey} />} />
<Route
path={`${URLS.CONNECTIONS}/*`}
element={<AppConnections appKey={appKey} />}
/>
<Route
path="/"
element={(
<Navigate to={app.supportsConnections ? URLS.APP_CONNECTIONS(appKey) : URLS.APP_FLOWS(appKey)} replace />
)}
element={
<Navigate
to={
app.supportsConnections
? URLS.APP_CONNECTIONS(appKey)
: URLS.APP_FLOWS(appKey)
}
replace
/>
}
/>
</Routes>
</Grid>
@@ -181,18 +224,20 @@ export default function Application(): React.ReactElement | null {
<Route
path="/connections/add"
element={
<AddAppConnection
onClose={goToApplicationPage}
application={app}
/>
<AddAppConnection onClose={goToApplicationPage} application={app} />
}
/>
<Route
path="/connections/:connectionId/reconnect"
element={<ReconnectConnection application={app} onClose={goToApplicationPage} />}
element={
<ReconnectConnection
application={app}
onClose={goToApplicationPage}
/>
}
/>
</Routes>
</>
);
};
}

58
packages/web/src/pages/Applications/index.tsx
View File

@@ -16,7 +16,7 @@ import AddNewAppConnection from 'components/AddNewAppConnection';
import PageTitle from 'components/PageTitle';
import AppRow from 'components/AppRow';
import SearchInput from 'components/SearchInput';
import useFormatMessage from 'hooks/useFormatMessage'
import useFormatMessage from 'hooks/useFormatMessage';
import { GET_CONNECTED_APPS } from 'graphql/queries/get-connected-apps';
import * as URLS from 'config/urls';
@@ -24,7 +24,9 @@ export default function Applications(): React.ReactElement {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [appName, setAppName] = React.useState(null);
const { data, loading } = useQuery(GET_CONNECTED_APPS, { variables: {name: appName } });
const { data, loading } = useQuery(GET_CONNECTED_APPS, {
variables: { name: appName },
});
const apps: IApp[] = data?.getConnectedApps;
const hasApps = apps?.length;
@@ -39,13 +41,12 @@ export default function Applications(): React.ReactElement {
const NewAppConnectionLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function InlineLink(
linkProps,
ref,
) {
return <Link ref={ref} to={URLS.NEW_APP_CONNECTION} {...linkProps} />;
}),
[],
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return <Link ref={ref} to={URLS.NEW_APP_CONNECTION} {...linkProps} />;
}
),
[]
);
return (
@@ -60,7 +61,14 @@ export default function Applications(): React.ReactElement {
<SearchInput onChange={onSearchChange} />
</Grid>
<Grid container item xs="auto" sm="auto" alignItems="center" order={{ xs: 1, sm: 2 }}>
<Grid
container
item
xs="auto"
sm="auto"
alignItems="center"
order={{ xs: 1, sm: 2 }}
>
<ConditionalIconButton
type="submit"
variant="contained"
@@ -78,22 +86,30 @@ export default function Applications(): React.ReactElement {
<Divider sx={{ mt: [2, 0], mb: 2 }} />
{loading && <CircularProgress data-test="apps-loader" sx={{ display: 'block', margin: '20px auto' }} />}
{loading && (
<CircularProgress
data-test="apps-loader"
sx={{ display: 'block', margin: '20px auto' }}
/>
)}
{!loading && !hasApps && (<NoResultFound
text={formatMessage('apps.noConnections')}
to={URLS.NEW_APP_CONNECTION}
/>)}
{!loading && !hasApps && (
<NoResultFound
text={formatMessage('apps.noConnections')}
to={URLS.NEW_APP_CONNECTION}
/>
)}
{!loading && apps?.map((app: IApp) => (
<AppRow key={app.name} application={app} />
))}
{!loading &&
apps?.map((app: IApp) => <AppRow key={app.name} application={app} />)}
<Routes>
<Route path="/new" element={<AddNewAppConnection onClose={goToApps} />} />
<Route
path="/new"
element={<AddNewAppConnection onClose={goToApps} />}
/>
</Routes>
</Container>
</Box>
);
};
}

4
packages/web/src/pages/Dashboard/index.tsx
View File

@@ -1,3 +1,3 @@
export default function Dashboard() {
return (<>Dashboard</>);
};
return <>Dashboard</>;
}

17
packages/web/src/pages/Editor/create.tsx
View File

@@ -33,8 +33,8 @@ export default function CreateFlow(): React.ReactElement {
const response = await createFlow({
variables: {
input: variables
}
input: variables,
},
});
const flowId = response.data?.createFlow?.id;
@@ -45,12 +45,21 @@ export default function CreateFlow(): React.ReactElement {
}, [createFlow, navigate, appKey, connectionId]);
return (
<Box sx={{ display: 'flex', flex: 1, height: '100vh', justifyContent: 'center', alignItems: 'center', gap: 2 }}>
<Box
sx={{
display: 'flex',
flex: 1,
height: '100vh',
justifyContent: 'center',
alignItems: 'center',
gap: 2,
}}
>
<CircularProgress size={16} thickness={7.5} />
<Typography variant="body2">
{formatMessage('createFlow.creating')}
</Typography>
</Box>
)
);
}

6
packages/web/src/pages/Editor/index.tsx
View File

@@ -2,7 +2,5 @@ import * as React from 'react';
import EditorLayout from 'components/EditorLayout';
export default function FlowEditor(): React.ReactElement {
return (
<EditorLayout />
)
}
return <EditorLayout />;
}

2
packages/web/src/pages/Editor/routes.tsx
View File

@@ -10,5 +10,5 @@ export default function EditorRoutes(): React.ReactElement {
<Route path="/:flowId" element={<EditorPage />} />
</Routes>
)
);
}

32
packages/web/src/pages/Execution/index.tsx
View File

@@ -28,31 +28,43 @@ const getLimitAndOffset = (page: number) => ({
export default function Execution(): React.ReactElement {
const { executionId } = useParams() as ExecutionParams;
const formatMessage = useFormatMessage();
const { data: execution } = useQuery(GET_EXECUTION, { variables: { executionId } });
const { data, loading } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
const { data: execution } = useQuery(GET_EXECUTION, {
variables: { executionId },
});
const { data, loading } = useQuery(GET_EXECUTION_STEPS, {
variables: { executionId, ...getLimitAndOffset(1) },
});
const { edges } = data?.getExecutionSteps || {};
const executionSteps: IExecutionStep[] = edges?.map((edge: { node: IExecutionStep }) => edge.node);
const executionSteps: IExecutionStep[] = edges?.map(
(edge: { node: IExecutionStep }) => edge.node
);
return (
<Container sx={{ py: 3 }}>
<ExecutionHeader
execution={execution?.getExecution}
/>
<ExecutionHeader execution={execution?.getExecution} />
<Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
{!loading && !executionSteps?.length && (
<Alert severity="warning" sx={{ flex: 1 }}>
<AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('execution.noDataTitle')}</AlertTitle>
<AlertTitle sx={{ fontWeight: 700 }}>
{formatMessage('execution.noDataTitle')}
</AlertTitle>
<Box sx={{ fontWeight: 400 }}>{formatMessage('execution.noDataMessage')}</Box>
<Box sx={{ fontWeight: 400 }}>
{formatMessage('execution.noDataMessage')}
</Box>
</Alert>
)}
{executionSteps?.map((executionStep) => (
<ExecutionStep key={executionStep.id} executionStep={executionStep} step={executionStep.step} />
<ExecutionStep
key={executionStep.id}
executionStep={executionStep}
step={executionStep.step}
/>
))}
</Grid>
</Container>
);
};
}

69
packages/web/src/pages/Executions/index.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { Link, useSearchParams } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
@@ -13,7 +13,7 @@ import NoResultFound from 'components/NoResultFound';
import ExecutionRow from 'components/ExecutionRow';
import Container from 'components/Container';
import PageTitle from 'components/PageTitle';
import useFormatMessage from 'hooks/useFormatMessage'
import useFormatMessage from 'hooks/useFormatMessage';
import { GET_EXECUTIONS } from 'graphql/queries/get-executions';
const EXECUTION_PER_PAGE = 10;
@@ -38,44 +38,65 @@ export default function Executions(): React.ReactElement {
React.useEffect(() => {
refetch(getLimitAndOffset(page));
}, [refetch, page])
}, [refetch, page]);
const executions: IExecution[] = edges?.map(({ node }: { node: IExecution }) => node);
const executions: IExecution[] = edges?.map(
({ node }: { node: IExecution }) => node
);
const hasExecutions = executions?.length;
return (
<Box sx={{ py: 3 }}>
<Container>
<Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
<Grid container item xs sm alignItems="center" order={{ xs: 0, height: 80 }}>
<Grid
container
item
xs
sm
alignItems="center"
order={{ xs: 0, height: 80 }}
>
<PageTitle>{formatMessage('executions.title')}</PageTitle>
</Grid>
</Grid>
<Divider sx={{ mt: [2, 0], mb: 2 }} />
{loading && <CircularProgress data-test="executions-loader" sx={{ display: 'block', margin: '20px auto' }} />}
{loading && (
<CircularProgress
data-test="executions-loader"
sx={{ display: 'block', margin: '20px auto' }}
/>
)}
{!loading && !hasExecutions && (<NoResultFound
text={formatMessage('executions.noExecutions')}
/>)}
{!loading && !hasExecutions && (
<NoResultFound text={formatMessage('executions.noExecutions')} />
)}
{!loading && executions?.map((execution) => (<ExecutionRow key={execution.id} execution={execution} />))}
{!loading &&
executions?.map((execution) => (
<ExecutionRow key={execution.id} execution={execution} />
))}
{pageInfo && pageInfo.totalPages > 1 && <Pagination
sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}
page={pageInfo?.currentPage}
count={pageInfo?.totalPages}
onChange={(event, page) => setSearchParams({ page: page.toString() })}
renderItem={(item) => (
<PaginationItem
component={Link}
to={`${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
)}
/>}
{pageInfo && pageInfo.totalPages > 1 && (
<Pagination
sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}
page={pageInfo?.currentPage}
count={pageInfo?.totalPages}
onChange={(event, page) =>
setSearchParams({ page: page.toString() })
}
renderItem={(item) => (
<PaginationItem
component={Link}
to={`${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
)}
/>
)}
</Container>
</Box>
);
};
}

2
packages/web/src/pages/Flow/index.tsx
View File

@@ -23,4 +23,4 @@ export default function Flow(): React.ReactElement {
</Container>
</Box>
);
};
}

121
packages/web/src/pages/Flows/index.tsx
View File

@@ -18,7 +18,7 @@ import ConditionalIconButton from 'components/ConditionalIconButton';
import Container from 'components/Container';
import PageTitle from 'components/PageTitle';
import SearchInput from 'components/SearchInput';
import useFormatMessage from 'hooks/useFormatMessage'
import useFormatMessage from 'hooks/useFormatMessage';
import { GET_FLOWS } from 'graphql/queries/get-flows';
import * as URLS from 'config/urls';
@@ -36,37 +36,47 @@ export default function Flows(): React.ReactElement {
const [flowName, setFlowName] = React.useState('');
const [loading, setLoading] = React.useState(false);
const [getFlows, { data }] = useLazyQuery(GET_FLOWS, {
onCompleted: () => { setLoading(false); },
onCompleted: () => {
setLoading(false);
},
});
const fetchData = React.useMemo(
() => debounce((name) => getFlows(
{
variables: {
...getLimitAndOffset(page),
name
}
}),
300
),
() =>
debounce(
(name) =>
getFlows({
variables: {
...getLimitAndOffset(page),
name,
},
}),
300
),
[page, getFlows]
);
React.useEffect(function fetchFlowsOnSearch() {
setLoading(true);
React.useEffect(
function fetchFlowsOnSearch() {
setLoading(true);
fetchData(flowName);
}, [fetchData, flowName]);
fetchData(flowName);
},
[fetchData, flowName]
);
React.useEffect(function resetPageOnSearch() {
// reset search params which only consists of `page`
setSearchParams({})
}, [flowName]);
React.useEffect(
function resetPageOnSearch() {
// reset search params which only consists of `page`
setSearchParams({});
},
[flowName]
);
React.useEffect(function cancelDebounceOnUnmount() {
return () => {
fetchData.cancel();
}
};
}, []);
const { pageInfo, edges } = data?.getFlows || {};
@@ -80,13 +90,12 @@ export default function Flows(): React.ReactElement {
const CreateFlowLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function InlineLink(
linkProps,
ref,
) {
return <Link ref={ref} to={URLS.CREATE_FLOW} {...linkProps} />;
}),
[],
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return <Link ref={ref} to={URLS.CREATE_FLOW} {...linkProps} />;
}
),
[]
);
return (
@@ -101,7 +110,14 @@ export default function Flows(): React.ReactElement {
<SearchInput onChange={onSearchChange} />
</Grid>
<Grid container item xs="auto" sm="auto" alignItems="center" order={{ xs: 1, sm: 2 }}>
<Grid
container
item
xs="auto"
sm="auto"
alignItems="center"
order={{ xs: 1, sm: 2 }}
>
<ConditionalIconButton
type="submit"
variant="contained"
@@ -119,29 +135,38 @@ export default function Flows(): React.ReactElement {
<Divider sx={{ mt: [2, 0], mb: 2 }} />
{loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />}
{loading && (
<CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
)}
{!loading && flows?.map((flow) => (<FlowRow key={flow.id} flow={flow} />))}
{!loading &&
flows?.map((flow) => <FlowRow key={flow.id} flow={flow} />)}
{!loading && !hasFlows && (<NoResultFound
text={formatMessage('flows.noFlows')}
to={URLS.CREATE_FLOW}
/>)}
{!loading && !hasFlows && (
<NoResultFound
text={formatMessage('flows.noFlows')}
to={URLS.CREATE_FLOW}
/>
)}
{!loading && pageInfo && pageInfo.totalPages > 1 && <Pagination
sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}
page={pageInfo?.currentPage}
count={pageInfo?.totalPages}
onChange={(event, page) => setSearchParams({ page: page.toString() })}
renderItem={(item) => (
<PaginationItem
component={Link}
to={`${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
)}
/>}
{!loading && pageInfo && pageInfo.totalPages > 1 && (
<Pagination
sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}
page={pageInfo?.currentPage}
count={pageInfo?.totalPages}
onChange={(event, page) =>
setSearchParams({ page: page.toString() })
}
renderItem={(item) => (
<PaginationItem
component={Link}
to={`${item.page === 1 ? '' : `?page=${item.page}`}`}
{...item}
/>
)}
/>
)}
</Container>
</Box>
);
};
}

2
packages/web/src/pages/Login/index.tsx
View File

@@ -11,4 +11,4 @@ export default function Login(): React.ReactElement {
</Container>
</Box>
);
};
}

6
packages/web/src/pages/Notifications/index.tsx
View File

@@ -26,9 +26,7 @@ export default function Updates(): React.ReactElement {
{formatMessage('notifications.title')}
</PageTitle>
<Stack
gap={2}
>
<Stack gap={2}>
{notifications.map((notification: INotification) => (
<NotificationCard
key={notification.name}
@@ -42,4 +40,4 @@ export default function Updates(): React.ReactElement {
</Container>
</Box>
);
};
}

75
packages/web/src/pages/ProfileSettings/index.tsx
View File

@@ -15,14 +15,21 @@ import { UPDATE_USER } from 'graphql/mutations/update-user';
import useFormatMessage from 'hooks/useFormatMessage';
import useCurrentUser from 'hooks/useCurrentUser';
const emailValidationSchema = yup.object({
email: yup.string().email().required(),
}).required();
const emailValidationSchema = yup
.object({
email: yup.string().email().required(),
})
.required();
const passwordValidationSchema = yup.object({
password: yup.string().required(),
confirmPassword: yup.string().required().oneOf([yup.ref('password')], 'Passwords must match'),
}).required();
const passwordValidationSchema = yup
.object({
password: yup.string().required(),
confirmPassword: yup
.string()
.required()
.oneOf([yup.ref('password')], 'Passwords must match'),
})
.required();
const StyledForm = styled(Form)`
display: flex;
@@ -44,18 +51,20 @@ function ProfileSettings() {
variables: {
input: {
email,
}
},
},
optimisticResponse: {
updateUser: {
__typename: 'User',
email,
}
}
},
},
});
enqueueSnackbar(formatMessage('profileSettings.updatedEmail'), { variant: 'success' });
}
enqueueSnackbar(formatMessage('profileSettings.updatedEmail'), {
variant: 'success',
});
};
const handlePasswordUpdate = async (data: any) => {
const password = data.password;
@@ -63,26 +72,26 @@ function ProfileSettings() {
setPasswordDefaultValues({
password,
confirmPassword: data.confirmPassword,
})
});
await updateUser({
variables: {
input: {
password,
}
},
},
});
enqueueSnackbar(formatMessage('profileSettings.updatedPassword'), { variant: 'success' });
}
enqueueSnackbar(formatMessage('profileSettings.updatedPassword'), {
variant: 'success',
});
};
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={9} md={8} lg={6}>
<Grid item xs={12} sx={{ mb: [2, 5] }} >
<PageTitle>
{formatMessage('profileSettings.title')}
</PageTitle>
<Grid item xs={12} sx={{ mb: [2, 5] }}>
<PageTitle>{formatMessage('profileSettings.title')}</PageTitle>
</Grid>
<Grid item xs={12} justifyContent="flex-end">
@@ -92,9 +101,17 @@ function ProfileSettings() {
resolver={yupResolver(emailValidationSchema)}
mode="onChange"
sx={{ mb: 2 }}
render={({ formState: { errors, touchedFields, isDirty, isValid, isSubmitting } }) => (
render={({
formState: {
errors,
touchedFields,
isDirty,
isValid,
isSubmitting,
},
}) => (
<>
<TextField
<TextField
fullWidth
name="email"
label={formatMessage('profileSettings.email')}
@@ -119,7 +136,15 @@ function ProfileSettings() {
onSubmit={handlePasswordUpdate}
resolver={yupResolver(passwordValidationSchema)}
mode="onChange"
render={({ formState: { errors, touchedFields, isDirty, isValid, isSubmitting } }) => (
render={({
formState: {
errors,
touchedFields,
isDirty,
isValid,
isSubmitting,
},
}) => (
<>
<TextField
fullWidth
@@ -137,7 +162,9 @@ function ProfileSettings() {
label={formatMessage('profileSettings.confirmNewPassword')}
margin="normal"
type="password"
error={touchedFields.confirmPassword && !!errors?.confirmPassword}
error={
touchedFields.confirmPassword && !!errors?.confirmPassword
}
helperText={errors?.confirmPassword?.message || ' '}
/>