diff --git a/frontend/public/markdown/nextcloud.md b/frontend/public/markdown/nextcloud.md
index 481d8ff67aa4f68e31cbb4de46eefe6fa2f463c5..0e7950eab12deb3c95be269ae6cf8e10e595c132 100644
--- a/frontend/public/markdown/nextcloud.md
+++ b/frontend/public/markdown/nextcloud.md
@@ -19,4 +19,4 @@ Learning about Nextcloud is best done through Nextcloud: for questions and commu
### Nextcloud Addons
-Nextcloud has many, many addons and "apps." They vary in quality and usefulness, and some are excellent additions to team collaboration. Stackspin adds a limited number of plugins/addons that we consider safe and tested, and commit to update and keep secure with the rest of Nextcloud. If you wish to add more
+Nextcloud has many, many addons and "apps." They vary in quality and usefulness, and some are excellent additions to team collaboration. Stackspin adds a limited number of plugins/addons that we consider safe and tested, and commit to update and keep secure with the rest of Nextcloud. If you wish to add more plugins, get in touch: info@stackspin.net.
diff --git a/frontend/public/markdown/wordpress.md b/frontend/public/markdown/wordpress.md
index 0ea8e81e06c96277b0d6365a79f59bd5df349b57..888e5bfcf4c09000f716e1f21a499c499b7cd053 100644
--- a/frontend/public/markdown/wordpress.md
+++ b/frontend/public/markdown/wordpress.md
@@ -9,9 +9,7 @@ If you spent any time on the internet in the past twenty years, chances are you
have used Wordpress. It is by far the most common website CMS (Content
Management System).
-Wordpress in Stackspin is usually set up to serve the website on the main
-stackspin URL. The Wordpress "Launch App" button on your Stackspin dashboard
-will take you directly to the wordpress admin (wp-admin) page.
+Wordpress in Stackspin is usually set up to serve the website on the main stackspin URL. The Wordpress "Go to app" button on your Stackspin dashboard will take you directly to the wordpress admin (wp-admin) page.
## Signing in
diff --git a/frontend/src/components/Modal/Modal/Modal.tsx b/frontend/src/components/Modal/Modal/Modal.tsx
index 679e9b8e9d4ddd545502570782177bc3fa15f84c..00e5ba031f395cca03cbb27744782169b01211b5 100644
--- a/frontend/src/components/Modal/Modal/Modal.tsx
+++ b/frontend/src/components/Modal/Modal/Modal.tsx
@@ -10,6 +10,7 @@ export const Modal: React.FC<ModalProps> = ({
saveButtonTitle = 'Save Changes',
children,
title,
+ img,
useCancelButton = false,
cancelButtonTitle = 'Cancel',
isLoading = false,
@@ -69,7 +70,10 @@ export const Modal: React.FC<ModalProps> = ({
{!useCancelButton && (
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
- {title}
+ <div className="flex items-center">
+ <img className="rounded-md" width={32} src={img} alt={title} />
+ <span className="ml-2 uppercase font-bold">{title}</span>
+ </div>
<button
type="button"
className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
diff --git a/frontend/src/components/Modal/Modal/types.ts b/frontend/src/components/Modal/Modal/types.ts
index 05a70310747048640b9131d001cc90ff0c5d9973..3c797a414ac20aae034c8a9402697c0ac4621fb3 100644
--- a/frontend/src/components/Modal/Modal/types.ts
+++ b/frontend/src/components/Modal/Modal/types.ts
@@ -3,7 +3,8 @@ import React from 'react';
export type ModalProps = {
open: boolean;
onClose: () => void;
- title?: any;
+ title?: string;
+ img?: string;
onSave?: () => void;
saveButtonTitle?: string;
useCancelButton?: boolean;
diff --git a/frontend/src/components/UserModal/UserModal.tsx b/frontend/src/components/UserModal/UserModal.tsx
index 296195fc9d5b42b621bf97f9b910fcf9daa63e7f..05679dcbf7cd6d56a362e42a0ce24e851bcb6618 100644
--- a/frontend/src/components/UserModal/UserModal.tsx
+++ b/frontend/src/components/UserModal/UserModal.tsx
@@ -6,6 +6,7 @@ import { Banner, Modal, ConfirmationModal, InfoModal } from 'src/components';
import { Input, Select } from 'src/components/Form';
import { User, UserRole, useUsers } from 'src/services/users';
import { useAuth } from 'src/services/auth';
+import { AppStatusEnum } from 'src/services/apps/types';
import { HIDDEN_APPS } from 'src/modules/dashboard/consts';
// import { initialUserForm } from './consts';
@@ -41,7 +42,7 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
const appList: AppListInt[] = [];
const initialAppRoleLatest = () => {
apps
- .filter((app) => app.status !== 'Not installed')
+ .filter((app) => app.status !== AppStatusEnum.NotInstalled)
.map((app) =>
app.slug === 'monitoring'
? appList.push({ name: app.slug, role: UserRole.NoAccess })
diff --git a/frontend/src/modules/dashboard/Dashboard.tsx b/frontend/src/modules/dashboard/Dashboard.tsx
index c33579609003d30777d1ac2c3bc2915a6e449459..45ce92b14e6703e4c223925201647fe641b1fdb8 100644
--- a/frontend/src/modules/dashboard/Dashboard.tsx
+++ b/frontend/src/modules/dashboard/Dashboard.tsx
@@ -61,10 +61,7 @@ export const Dashboard: React.FC = () => {
</div>
</div>
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
- {/* <div className="pb-4 border-b border-gray-200 sm:flex sm:items-center">
- <h3 className="text-lg leading-6 font-medium text-gray-900">Core Apps</h3>
- </div> */}
- <div className=" mt-5 grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
+ <div className=" mt-5 grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-3 mb-10">
{apps
.filter((app) => HIDDEN_APPS.concat(UTILITY_APPS).indexOf(app.slug) === -1)
.filter((app) => app.status !== AppStatusEnum.NotInstalled)
diff --git a/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx b/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
index b78fda67bf00d5fef9e6364940b9de321be20ca9..3e9ff5578bc8f41981a3f3ade83212c3b6222893 100644
--- a/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
+++ b/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
@@ -42,13 +42,13 @@ export const DashboardCard = ({ app, version }: DashboardCardProps) => {
const launchButton = app.external ? (
<>
- <span>Login With Stackspin</span>
- <img className="h-6" src="/assets/stackspin_white_logo_icon.svg" alt="Stackspin" />
+ <span>Go To App</span>
+ <ExternalLinkIcon className="w-4 h-4 ml-1" />
</>
) : (
<>
<span>Go to App</span>
- <ExternalLinkIcon className="w-4 h-4 ml-1" />
+ <img className="h-6" src="/assets/stackspin_white_logo_icon.svg" alt="Stackspin" />
</>
);
@@ -61,7 +61,9 @@ export const DashboardCard = ({ app, version }: DashboardCardProps) => {
<div className="upper-half">
<div className="flex justify-between">
{!app.external ? (
- <span className="inline-flex ml-3 items-center rounded-b-md bg-primary-100 px-2 py-1 text-xs font-medium text-primary-800 border border-t-0 ">
+ // Core tag is invisible for the time being. I am leaving it in here
+ // because we might want to re-use this ternary for a different tag, such as "custom"
+ <span className="inline-flex invisible ml-3 items-center rounded-b-md bg-primary-100 px-2 py-1 text-xs font-medium text-primary-800 border border-t-0 ">
Core
</span>
) : (
@@ -76,7 +78,7 @@ export const DashboardCard = ({ app, version }: DashboardCardProps) => {
</a>
) : null}
</div>
- <div className="px-4 py-5 sm:p-6">
+ <div className="px-4 pt-4 pb-2">
<div className="mr-4 flex items-center">
<img
className="h-16 w-16 rounded-md overflow-hidden mr-4 flex-shrink-0"
@@ -101,23 +103,14 @@ export const DashboardCard = ({ app, version }: DashboardCardProps) => {
href={app.slug === 'wordpress' ? `${app.url}/wp-admin/` : app.url}
target="_blank"
rel="noreferrer"
- className="inline-flex items-center px-2.5 py-1.5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+ className="inline-flex h-10 items-center px-2.5 py-1.5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
>
{launchButton}
</a>
</div>
</div>
- <Modal
- open={readMoreVisible}
- onClose={onReadMoreToggleClick}
- title={
- <div className="flex items-center">
- <img className="rounded-md" width={32} src={app.assetSrc} alt={app.name} />
- <span className="ml-2 uppercase font-bold">{app.name}</span>
- </div>
- }
- >
+ <Modal open={readMoreVisible} onClose={onReadMoreToggleClick} title={app.name} img={app.assetSrc}>
<ReactMarkdown className="prose prose-slate" remarkPlugins={[remarkGfm]}>
{appDescription.content}
</ReactMarkdown>
diff --git a/frontend/src/modules/dashboard/components/VersionInfo/VersionInfo.tsx b/frontend/src/modules/dashboard/components/VersionInfo/VersionInfo.tsx
index 254a97fc6b3e81d5dba01034f833b4ec88d090ef..60251d8cf309110cb3759ef333e1184bc643e187 100644
--- a/frontend/src/modules/dashboard/components/VersionInfo/VersionInfo.tsx
+++ b/frontend/src/modules/dashboard/components/VersionInfo/VersionInfo.tsx
@@ -36,7 +36,7 @@ export const VersionInfo = (sysInfo: SysInfoState) => {
<>
<div className="px-4 py-2 flex items-center gap-1">
<HomeIcon className="w-4 h-4 text-gray-500" />
- <span>Using main branch ({branch})</span>
+ <span>Latest stable branch ({branch})</span>
</div>
<div className="px-4 py-2 flex items-center gap-1">
<RefreshIcon className="w-4 h-4 text-gray-500" />
diff --git a/frontend/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx b/frontend/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
index 56e466350210da8d6272ae6513eb6752f2c7fcaf..65b92c7348b1854f7d399aacf52d63be2eaee1b4 100644
--- a/frontend/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
+++ b/frontend/src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx
@@ -5,7 +5,7 @@ import { useFieldArray, useForm, useWatch } from 'react-hook-form';
import { Banner, StepsModal, ProgressSteps } from 'src/components';
import { Select, TextArea } from 'src/components/Form';
import { MultipleUsersData, UserRole, useUsers } from 'src/services/users';
-// import { allAppAccessList } from 'src/components/UserModal/consts';
+import { AppStatusEnum } from 'src/services/apps';
import { ProgressStepInfo, ProgressStepStatus } from 'src/components/ProgressSteps/types';
import { MultipleUsersModalProps } from './types';
@@ -23,7 +23,7 @@ export const MultipleUsersModal = ({ open, onClose, apps }: MultipleUsersModalPr
const appList: AppListInt[] = [];
const initialAppRoleLatest = () => {
apps
- .filter((app) => app.status !== 'Not installed')
+ .filter((app) => app.status !== AppStatusEnum.NotInstalled)
.map((app) =>
app.slug === 'monitoring'
? appList.push({ name: app.slug, role: UserRole.NoAccess })
diff --git a/frontend/src/services/apps/transformations.ts b/frontend/src/services/apps/transformations.ts
index 99006ad68a99bb90baa599528d59e1ca187f3d62..cc8b2538ed39c909de12e1b6dad4b7508edb26fd 100644
--- a/frontend/src/services/apps/transformations.ts
+++ b/frontend/src/services/apps/transformations.ts
@@ -1,7 +1,7 @@
import { App, AppStatus, AppStatusEnum } from './types';
-const transformAppStatus = (status: AppStatus) => {
- if (status.message === 'App is external') return AppStatusEnum.External;
+const transformAppStatus = (ext: boolean, status: AppStatus) => {
+ if (ext) return AppStatusEnum.External;
if (status.installed && status.ready) return AppStatusEnum.Installed;
if (status.installed && !status.ready) return AppStatusEnum.Installing;
return AppStatusEnum.NotInstalled;
@@ -19,7 +19,7 @@ export const transformApp = (response: any): App => {
name: response.name ?? '',
slug: response.slug ?? '',
external: response.external ?? '',
- status: transformAppStatus(response.status),
+ status: transformAppStatus(response.external, response.status),
url: response.url,
automaticUpdates: response.automatic_updates,
assetSrc: assetSlug,