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

feat: Replace all apps with connected apps on /apps

Browse Source
This commit is contained in:
Ali BARIN
2021-10-17 16:40:09 +02:00
parent 8de65e52ab
commit 93df78b5b3
7 changed files with 40 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/components/AppRow/index.tsx
View File

@@ -8,7 +8,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
import AppIcon from 'components/AppIcon'; import AppIcon from 'components/AppIcon';
import * as URLS from 'config/urls'; import * as URLS from 'config/urls';
import type { App } from 'types/app'; import type { App } from 'types/app';
import { CardContent, Typography, DesktopOnlyBreakline } from './style'; import { CardContent, Typography } from './style';
type AppRowProps = { type AppRowProps = {
application: App; application: App;
@@ -18,7 +18,7 @@ const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong>
function AppRow(props: AppRowProps) { function AppRow(props: AppRowProps) {
const formatMessage = useFormatMessage(); const formatMessage = useFormatMessage();
const { name, primaryColor, iconUrl } = props.application; const { name, primaryColor, iconUrl, connectionCount } = props.application;
return ( return (
<Link to={URLS.APP(name.toLowerCase())}> <Link to={URLS.APP(name.toLowerCase())}>
@@ -37,13 +37,13 @@ function AppRow(props: AppRowProps) {
<Box sx={{ px: 2 }}> <Box sx={{ px: 2 }}>
<Typography variant="body2"> <Typography variant="body2">
{formatMessage('app.connectionCount', { count: countTranslation(Math.round(Math.random() * 100)) })} {formatMessage('app.connectionCount', { count: countTranslation(connectionCount) })}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ px: 2 }}> <Box sx={{ px: 2 }}>
<Typography variant="body2"> <Typography variant="body2">
{formatMessage('app.flowCount', { count: countTranslation(Math.round(Math.random() * 100)) })} {formatMessage('app.flowCount', { count: countTranslation(0) })}
</Typography> </Typography>
</Box> </Box>

16
packages/web/src/config/urls.ts
View File

@@ -2,13 +2,13 @@ export const DASHBOARD = '/dashboard';
export const APPS = '/apps'; export const APPS = '/apps';
export const FLOWS = '/flows'; export const FLOWS = '/flows';
export const EXPLORE = '/explore'; export const EXPLORE = '/explore';
export const APP = (appSlug: string) => `/app/${appSlug}`; export const APP = (appKey: string) => `/app/${appKey}`;
export const APP_PATTERN = '/app/:slug'; export const APP_PATTERN = '/app/:key';
export const APP_CONNECTIONS = (appSlug: string) => `/app/${appSlug}/connections`; export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`;
export const APP_CONNECTIONS_PATTERN = '/app/:slug/connections'; export const APP_CONNECTIONS_PATTERN = '/app/:key/connections';
export const APP_ADD_CONNECTION = (appSlug: string) => `/app/${appSlug}/connections/add`; export const APP_ADD_CONNECTION = (appKey: string) => `/app/${appKey}/connections/add`;
export const APP_ADD_CONNECTION_PATTERN = '/app/:slug/connections/add'; export const APP_ADD_CONNECTION_PATTERN = '/app/:key/connections/add';
export const APP_FLOWS = (appSlug: string) => `/app/${appSlug}/flows`; export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
export const APP_FLOWS_PATTERN = '/app/:slug/flows'; export const APP_FLOWS_PATTERN = '/app/:key/flows';
export const NEW_APP_CONNECTION = '/apps/new'; export const NEW_APP_CONNECTION = '/apps/new';

4
packages/web/src/graphql/queries/get-app.ts
View File

@@ -1,8 +1,8 @@
import { gql } from '@apollo/client'; import { gql } from '@apollo/client';
export const GET_APP = gql` export const GET_APP = gql`
query GetApp($name: String!) { query GetApp($key: String!) {
getApp (name: $name) { getApp (key: $key) {
name name
key key
iconUrl iconUrl

14
packages/web/src/graphql/queries/get-connected-apps.ts Normal file
View File

@@ -0,0 +1,14 @@
import { gql } from '@apollo/client';
export const GET_CONNECTED_APPS = gql`
query GetConnectedApps($name: String) {
getConnectedApps(name: $name) {
key
name
iconUrl
docUrl
primaryColor
connectionCount
}
}
`;

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

@@ -18,19 +18,19 @@ import Container from 'components/Container';
import PageTitle from 'components/PageTitle'; import PageTitle from 'components/PageTitle';
type ApplicationParams = { type ApplicationParams = {
slug: string; key: string;
}; };
export default function Application() { export default function Application() {
const formatMessage = useFormatMessage(); const formatMessage = useFormatMessage();
const routeMatch = useRouteMatch([URLS.APP_CONNECTIONS_PATTERN, URLS.APP_FLOWS_PATTERN, URLS.APP_PATTERN]); const routeMatch = useRouteMatch([URLS.APP_CONNECTIONS_PATTERN, URLS.APP_FLOWS_PATTERN, URLS.APP_PATTERN]);
const { slug } = useParams<ApplicationParams>(); const { key } = useParams<ApplicationParams>();
const history = useHistory(); const history = useHistory();
const { data } = useQuery(GET_APP, { variables: { name: slug } }); const { data } = useQuery(GET_APP, { variables: { key } });
const app = data?.getApp || {}; const app = data?.getApp || {};
const goToApplicationPage = () => history.push(URLS.APP(slug)); const goToApplicationPage = () => history.push(URLS.APP(key));
return ( return (
<> <>
@@ -50,7 +50,7 @@ export default function Application() {
<SettingsIcon /> <SettingsIcon />
</IconButton> </IconButton>
<Button variant="contained" component={Link} to={URLS.APP_ADD_CONNECTION(slug)}> <Button variant="contained" component={Link} to={URLS.APP_ADD_CONNECTION(key)}>
{formatMessage('app.addConnection')} {formatMessage('app.addConnection')}
</Button> </Button>
</Grid> </Grid>
@@ -62,14 +62,14 @@ export default function Application() {
<Tabs value={routeMatch?.path}> <Tabs value={routeMatch?.path}>
<Tab <Tab
label={formatMessage('app.connections')} label={formatMessage('app.connections')}
to={URLS.APP_CONNECTIONS(slug)} to={URLS.APP_CONNECTIONS(key)}
value={URLS.APP_CONNECTIONS_PATTERN} value={URLS.APP_CONNECTIONS_PATTERN}
component={Link} component={Link}
/> />
<Tab <Tab
label={formatMessage('app.flows')} label={formatMessage('app.flows')}
to={URLS.APP_FLOWS(slug)} to={URLS.APP_FLOWS(key)}
value={URLS.APP_FLOWS_PATTERN} value={URLS.APP_FLOWS_PATTERN}
component={Link} component={Link}
/> />
@@ -86,7 +86,7 @@ export default function Application() {
</Route> </Route>
<Route exact path={URLS.APP_PATTERN}> <Route exact path={URLS.APP_PATTERN}>
<Redirect to={URLS.APP_CONNECTIONS(slug)} /> <Redirect to={URLS.APP_CONNECTIONS(key)} />
</Route> </Route>
</Switch> </Switch>
</Grid> </Grid>

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

@@ -11,7 +11,7 @@ import PageTitle from 'components/PageTitle';
import AppRow from 'components/AppRow'; import AppRow from 'components/AppRow';
import SearchInput from 'components/SearchInput'; import SearchInput from 'components/SearchInput';
import useFormatMessage from 'hooks/useFormatMessage' import useFormatMessage from 'hooks/useFormatMessage'
import { GET_APPS } from 'graphql/queries/get-apps'; import { GET_CONNECTED_APPS } from 'graphql/queries/get-connected-apps';
import * as URLS from 'config/urls'; import * as URLS from 'config/urls';
import type { App } from 'types/app'; import type { App } from 'types/app';
@@ -19,7 +19,7 @@ export default function Applications() {
const history = useHistory(); const history = useHistory();
const formatMessage = useFormatMessage(); const formatMessage = useFormatMessage();
const [appName, setAppName] = useState(null); const [appName, setAppName] = useState(null);
const { data } = useQuery(GET_APPS, { variables: {name: appName } }); const { data } = useQuery(GET_CONNECTED_APPS, { variables: {name: appName } });
const onSearchChange = useCallback((event) => { const onSearchChange = useCallback((event) => {
setAppName(event.target.value); setAppName(event.target.value);
@@ -57,7 +57,7 @@ export default function Applications() {
</Grid> </Grid>
</Grid> </Grid>
{data?.getApps?.map((app: App) => ( {data?.getConnectedApps?.map((app: App) => (
<AppRow key={app.name} application={app} /> <AppRow key={app.name} application={app} />
))} ))}

1
packages/web/src/types/app.ts
View File

@@ -13,6 +13,7 @@ type AppFields = {
type App = { type App = {
key: string; key: string;
name: string; name: string;
connectionCount: number;
iconUrl: string; iconUrl: string;
docUrl: string; docUrl: string;
primaryColor: string; primaryColor: string;