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

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

@@ -2,13 +2,13 @@ export const DASHBOARD = '/dashboard';
export const APPS = '/apps';
export const FLOWS = '/flows';
export const EXPLORE = '/explore';
export const APP = (appSlug: string) => `/app/${appSlug}`;
export const APP_PATTERN = '/app/:slug';
export const APP_CONNECTIONS = (appSlug: string) => `/app/${appSlug}/connections`;
export const APP_CONNECTIONS_PATTERN = '/app/:slug/connections';
export const APP_ADD_CONNECTION = (appSlug: string) => `/app/${appSlug}/connections/add`;
export const APP_ADD_CONNECTION_PATTERN = '/app/:slug/connections/add';
export const APP_FLOWS = (appSlug: string) => `/app/${appSlug}/flows`;
export const APP_FLOWS_PATTERN = '/app/:slug/flows';
export const APP = (appKey: string) => `/app/${appKey}`;
export const APP_PATTERN = '/app/:key';
export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`;
export const APP_CONNECTIONS_PATTERN = '/app/:key/connections';
export const APP_ADD_CONNECTION = (appKey: string) => `/app/${appKey}/connections/add`;
export const APP_ADD_CONNECTION_PATTERN = '/app/:key/connections/add';
export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
export const APP_FLOWS_PATTERN = '/app/:key/flows';
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';
export const GET_APP = gql`
query GetApp($name: String!) {
getApp (name: $name) {
query GetApp($key: String!) {
getApp (key: $key) {
name
key
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';
type ApplicationParams = {
slug: string;
key: string;
};
export default function Application() {
const formatMessage = useFormatMessage();
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 { data } = useQuery(GET_APP, { variables: { name: slug } });
const { data } = useQuery(GET_APP, { variables: { key } });
const app = data?.getApp || {};
const goToApplicationPage = () => history.push(URLS.APP(slug));
const goToApplicationPage = () => history.push(URLS.APP(key));
return (
<>
@@ -50,7 +50,7 @@ export default function Application() {
<SettingsIcon />
</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')}
</Button>
</Grid>
@@ -62,14 +62,14 @@ export default function Application() {
<Tabs value={routeMatch?.path}>
<Tab
label={formatMessage('app.connections')}
to={URLS.APP_CONNECTIONS(slug)}
to={URLS.APP_CONNECTIONS(key)}
value={URLS.APP_CONNECTIONS_PATTERN}
component={Link}
/>
<Tab
label={formatMessage('app.flows')}
to={URLS.APP_FLOWS(slug)}
to={URLS.APP_FLOWS(key)}
value={URLS.APP_FLOWS_PATTERN}
component={Link}
/>
@@ -86,7 +86,7 @@ export default function Application() {
</Route>
<Route exact path={URLS.APP_PATTERN}>
<Redirect to={URLS.APP_CONNECTIONS(slug)} />
<Redirect to={URLS.APP_CONNECTIONS(key)} />
</Route>
</Switch>
</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 SearchInput from 'components/SearchInput';
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 type { App } from 'types/app';
@@ -19,7 +19,7 @@ export default function Applications() {
const history = useHistory();
const formatMessage = useFormatMessage();
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) => {
setAppName(event.target.value);
@@ -57,7 +57,7 @@ export default function Applications() {
</Grid>
</Grid>
{data?.getApps?.map((app: App) => (
{data?.getConnectedApps?.map((app: App) => (
<AppRow key={app.name} application={app} />
))}

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

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