diff --git a/src/components/UserModal/consts.ts b/src/components/UserModal/consts.ts index 3d36fc7..38827fb 100644 --- a/src/components/UserModal/consts.ts +++ b/src/components/UserModal/consts.ts @@ -6,24 +6,28 @@ export const appAccessList = [ 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/AppSingle.tsx b/src/modules/apps/AppSingle.tsx index 92ea125..d65b825 100644 --- a/src/modules/apps/AppSingle.tsx +++ b/src/modules/apps/AppSingle.tsx @@ -1,13 +1,15 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import _ from 'lodash'; import { XCircleIcon } from '@heroicons/react/outline'; import { useApps } from 'src/services/apps'; -import { Tabs } from 'src/components'; +import { Modal, Tabs } from 'src/components'; import { appAccessList } from 'src/components/UserModal/consts'; import { AdvancedTab, GeneralTab } from './components'; export const AppSingle: React.FC = () => { + const [disableApp, setDisableApp] = useState(false); + const [removeAppData, setRemoveAppData] = useState(false); const params = useParams(); const appSlug = params.slug; const { app, loadApp } = useApps(); @@ -23,6 +25,11 @@ export const AppSingle: React.FC = () => { return null; } const appImageSrc = _.find(appAccessList, { name: appSlug })?.image; + const appDocumentationUrl = _.find(appAccessList, { name: appSlug })?.documentationUrl; + + const openDocumentationInNewTab = () => { + window.open(appDocumentationUrl, '_blank', 'noopener,noreferrer'); + }; const handleAutomaticUpdatesChange = () => { app.automaticUpdates = !app.automaticUpdates; @@ -36,6 +43,10 @@ export const AppSingle: React.FC = () => { { name: 'Advanced Configuration', component: }, ]; + const onDisableApp = () => { + // TODO: implement + }; + return (
{ @@ -71,6 +84,50 @@ export const AppSingle: React.FC = () => {
+ + {disableApp && ( + setDisableApp(false)} open={disableApp} onSave={onDisableApp} useCancelButton> +
+
+
+
+

Disable app

+
+
+ Are you sure you want to disable {app.name}? The app will get uninstalled and none of your users will + be able to access the app. +
+
+ Remove app data +
+
+ setRemoveAppData(!removeAppData)} + className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded" + /> +
+
+ +

+ {removeAppData + ? `The app's data will be removed. After this operation is done you will not be able to access the app, nor the app data. If you re-install the app, it will have none of the data it had before.` + : `The app's data does not get removed. If you install the app again, you will be able to access the data again.`} +

+
+
+
+
+
+
+
+ )} ); };