From 86192f28fdce1533844f82858a3c7da34ccfc4e5 Mon Sep 17 00:00:00 2001 From: Maarten de Waard Date: Thu, 29 Sep 2022 15:37:41 +0200 Subject: [PATCH] unfinished work that adds loading the list of apps dynamically --- public/assets/monitoring.svg | 57 +++++++++++++++++++ src/components/UserModal/consts.ts | 4 -- .../AppInstallModal/AppInstallModal.tsx | 15 +---- .../apps/components/AppInstallModal/consts.ts | 2 +- src/modules/dashboard/Dashboard.tsx | 49 ++++++---------- .../DashboardCard/DashboardCard.tsx | 2 +- src/services/apps/redux/reducers.ts | 12 ++-- src/services/apps/transformations.ts | 16 +++--- src/services/apps/types.ts | 4 +- yarn.lock | 5 ++ 10 files changed, 101 insertions(+), 65 deletions(-) create mode 100644 public/assets/monitoring.svg diff --git a/public/assets/monitoring.svg b/public/assets/monitoring.svg new file mode 100644 index 0000000..fa93808 --- /dev/null +++ b/public/assets/monitoring.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + diff --git a/src/components/UserModal/consts.ts b/src/components/UserModal/consts.ts index b0b0dea..8f2aa98 100644 --- a/src/components/UserModal/consts.ts +++ b/src/components/UserModal/consts.ts @@ -5,28 +5,24 @@ export const appAccessList = [ name: 'wekan', image: '/assets/wekan.svg', label: 'Wekan', - defaultSubdomain: 'wekan.{domain}', documentationUrl: 'https://github.com/wekan/wekan/wiki', }, { name: 'wordpress', image: '/assets/wordpress.svg', label: 'Wordpress', - defaultSubdomain: 'www.{domain}', documentationUrl: 'https://wordpress.org/support/', }, { name: 'nextcloud', image: '/assets/nextcloud.svg', label: 'Nextcloud', - defaultSubdomain: 'files.{domain}', documentationUrl: 'https://docs.nextcloud.com/server/latest/user_manual/en/', }, { name: 'zulip', image: '/assets/zulip.svg', label: 'Zulip', - defaultSubdomain: 'zulip.{domain}', documentationUrl: 'https://docs.zulip.com/help/', }, ]; diff --git a/src/modules/apps/components/AppInstallModal/AppInstallModal.tsx b/src/modules/apps/components/AppInstallModal/AppInstallModal.tsx index 57bca8a..14e0b1a 100644 --- a/src/modules/apps/components/AppInstallModal/AppInstallModal.tsx +++ b/src/modules/apps/components/AppInstallModal/AppInstallModal.tsx @@ -4,7 +4,6 @@ import _ from 'lodash'; import { App, useApps } from 'src/services/apps'; import { Modal } from 'src/components'; import { Input } from 'src/components/Form'; -import { appAccessList } from 'src/components/UserModal/consts'; import { AppInstallModalProps } from './types'; import { initialAppForm, initialCode } from './consts'; @@ -16,8 +15,6 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps defaultValues: initialAppForm, }); - const getDefaultSubdomain = () => _.get(_.find(appAccessList, ['name', appSlug]), 'defaultSubdomain', ''); - useEffect(() => { if (appSlug) { loadApp(appSlug); @@ -32,11 +29,11 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps useEffect(() => { if (!_.isEmpty(app)) { setAppName(app.name); - reset({ subdomain: getDefaultSubdomain(), configuration: initialCode, slug: appSlug ?? '' }); + reset({ url: app.url, configuration: initialCode, slug: appSlug ?? '' }); } return () => { - reset({ subdomain: getDefaultSubdomain(), configuration: initialCode, slug: appSlug ?? '' }); + reset({ url: initialAppForm.url, configuration: initialCode, slug: appSlug ?? '' }); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [app, reset, open]); @@ -73,13 +70,7 @@ export const AppInstallModal = ({ open, onClose, appSlug }: AppInstallModalProps
- +
diff --git a/src/modules/apps/components/AppInstallModal/consts.ts b/src/modules/apps/components/AppInstallModal/consts.ts index c3d5fa9..22a30bc 100644 --- a/src/modules/apps/components/AppInstallModal/consts.ts +++ b/src/modules/apps/components/AppInstallModal/consts.ts @@ -23,5 +23,5 @@ search: great: stomach`; export const initialAppForm = { - subdomain: '', + url: '', } as App; diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx index 959b99f..612cc39 100644 --- a/src/modules/dashboard/Dashboard.tsx +++ b/src/modules/dashboard/Dashboard.tsx @@ -1,13 +1,22 @@ -import React from 'react'; +/* eslint-disable react-hooks/exhaustive-deps */ +import React, { useEffect } from 'react'; import clsx from 'clsx'; -import { DASHBOARD_APPS, DASHBOARD_QUICK_ACCESS } from './consts'; +import { useApps } from 'src/services/apps'; +// import { DASHBOARD_QUICK_ACCESS } from './consts'; import { DashboardCard } from './components'; export const Dashboard: React.FC = () => { const host = window.location.hostname; const splitedDomain = host.split('.'); splitedDomain.shift(); - const rootDomain = splitedDomain.join('.'); + const { apps, appTableLoading, loadApps } = useApps(); + + // Tell React to load the apps + useEffect(() => { + loadApps(); + + return () => {}; + }, []); return (
@@ -19,37 +28,11 @@ export const Dashboard: React.FC = () => {
- {DASHBOARD_APPS(rootDomain!).map((app) => ( - - ))} -
- -
-
-

Utilities

-
- -
- {DASHBOARD_QUICK_ACCESS(rootDomain!).map((item) => ( - -
-
-
-
{item.name}
-
{item.description}
-
- + {apps + .filter((app) => app.slug !== 'dashboard') + .map((app) => ( + ))} -
diff --git a/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx b/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx index d8142e0..1b9b820 100644 --- a/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx +++ b/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx @@ -25,7 +25,7 @@ export const DashboardCard: React.FC = ({ app }: { app: any }) => { Nextcloud
diff --git a/src/services/apps/redux/reducers.ts b/src/services/apps/redux/reducers.ts index e303153..26736ae 100644 --- a/src/services/apps/redux/reducers.ts +++ b/src/services/apps/redux/reducers.ts @@ -1,13 +1,13 @@ import { AppActionTypes } from './actions'; -const initialUsersState: any = { - users: [], - user: {}, - userModalLoading: false, - usersLoading: false, +const initialAppsState: any = { + apps: [], + app: {}, + appModalLoading: false, + appsLoading: false, }; -const appsReducer = (state: any = initialUsersState, action: any) => { +const appsReducer = (state: any = initialAppsState, action: any) => { switch (action.type) { case AppActionTypes.FETCH_APPS: return { diff --git a/src/services/apps/transformations.ts b/src/services/apps/transformations.ts index aa4f0ed..6542336 100644 --- a/src/services/apps/transformations.ts +++ b/src/services/apps/transformations.ts @@ -2,14 +2,14 @@ import { App, AppStatus } from './types'; const transformAppStatus = (status: string) => { switch (status) { - case 'installed': + case 'App installed and running': return AppStatus.Installed; - case 'installing': - return AppStatus.Installing; - case 'not_installed': + case 'Not installed': return AppStatus.NotInstalled; + // For now default to "Installing" status for any app that isn't installed + // or not installed. Could also mean "upgrading", or "broken"... default: - return AppStatus.NotInstalled; + return AppStatus.Installing; } }; @@ -19,8 +19,10 @@ export const transformApp = (response: any): App => { name: response.name ?? '', slug: response.slug ?? '', status: transformAppStatus(response.status), - subdomain: response.subdomain, + url: response.url, automaticUpdates: response.automatic_updates, + assetSrc: `/assets/${response.slug}.svg`, + markdownSrc: `/markdown/${response.slug}.md`, }; }; @@ -33,7 +35,7 @@ export const transformAppRequest = (data: App) => { export const transformInstallAppRequest = (data: App) => { return { - subdomain: data.subdomain, + url: data.url, configuration: data.configuration, }; }; diff --git a/src/services/apps/types.ts b/src/services/apps/types.ts index 317f171..17708b1 100644 --- a/src/services/apps/types.ts +++ b/src/services/apps/types.ts @@ -3,9 +3,11 @@ export interface App { name: string; slug: string; status?: AppStatus; - subdomain?: string; + url: string; automaticUpdates: boolean; configuration?: string; + assetSrc?: string; + markdownSrc?: string; } export interface DisableAppForm { diff --git a/yarn.lock b/yarn.lock index 7eefd82..b8d82ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1862,6 +1862,11 @@ jest-diff "^26.0.0" pretty-format "^26.0.0" +"@types/js-yaml@^4.0.5": + version "4.0.5" + resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.5.tgz#738dd390a6ecc5442f35e7f03fa1431353f7e138" + integrity sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA== + "@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8": version "7.0.9" resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz"