modifed css on AppSingle

src/App.tsx

@@ -4,7 +4,7 @@ import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 
 import { useAuth } from 'src/services/auth';
-import { Dashboard, Users, Login, Apps } from './modules';
+import { Dashboard, Users, Login, Apps, AppSingle } from './modules';
 import { Layout } from './components';
 import { LoginCallback } from './modules/login/LoginCallback';
 
@@ -46,6 +46,7 @@ function App() {
                 <Route index element={<Users />} />
               </Route>
               <Route path="/apps" element={<ProtectedRoute />}>
+                <Route path=":slug" element={<AppSingle />} />
                 <Route index element={<Apps />} />
               </Route>
               <Route path="*" element={<Navigate to="/dashboard" />} />

src/modules/apps/AppSingle.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { ChevronRightIcon } from '@heroicons/react/solid';
+import { useParams } from 'react-router-dom';
+import _ from 'lodash';
 import { XCircleIcon } from '@heroicons/react/outline';
-import { Tabs, Banner } from 'src/components';
-import { Link } from 'react-router-dom';
+import { Tabs } from 'src/components';
+import { appAccessList } from 'src/components/UserModal/consts';
 import { AdvancedTab, GeneralTab } from './components';
 
 const pages = [
@@ -16,81 +17,46 @@ const tabs = [
 ];
 
 export const AppSingle: React.FC = () => {
+  const params = useParams();
+  const appSlug = params.slug;
+
+  const appInfo = _.find(appAccessList, { name: appSlug });
+
   return (
-    <>
-      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 flex-grow">
-        <nav className="flex" aria-label="Breadcrumb">
-          <ol className="flex items-center space-x-4">
-            <li>
-              <div className="flex items-center">
-                <Link to="/dashboard" className="text-sm font-medium text-gray-500 hover:text-gray-700">
-                  <span>Dashboard</span>
-                </Link>
-              </div>
-            </li>
-            {pages.map((page) => (
-              <li key={page.name}>
-                <div className="flex items-center">
-                  <ChevronRightIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
-                  <Link
-                    to={page.to}
-                    className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
-                    aria-current={page.current ? 'page' : undefined}
-                  >
-                    {page.name}
-                  </Link>
-                </div>
-              </li>
-            ))}
-          </ol>
-        </nav>
-      </div>
-
-      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden">
-        <Banner title="Managing single app instances coming soon." titleSm="Comming soon!" />
-      </div>
-
-      <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden opacity-40 cursor-default pointer-events-none select-none">
-        <div className="bg-white overflow-hidden shadow rounded-sm mb-5">
-          <div className="px-4 py-5 sm:p-6 flex justify-between items-center">
-            <div className="mr-4 flex items-center">
-              <img
-                className="h-24 w-24 rounded-md overflow-hidden mr-4"
-                src="./../assets/nextcloud.svg"
-                alt="Nextcloud"
-              />
-
-              <div>
-                <h2 className="text-2xl leading-8 font-bold">Nextcloud</h2>
-                <div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
-              </div>
-            </div>
-
-            <div className="flex flex-col">
-              <button
-                type="button"
-                className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
-              >
-                <XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
-                Disable App
-              </button>
-
-              <button
-                type="button"
-                className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
-              >
-                View Documentation
-              </button>
-            </div>
+    <div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 overflow-hidden lg:flex lg:flex-row">
+      <div
+        className="block bg-white overflow-hidden shadow rounded-sm basis-4/12 mx-auto sm:px-6 lg:px-8 overflow-hidden block lg:flex-none"
+        style={{ height: 'fit-content' }}
+      >
+        <div className="px-4 py-5 sm:p-6 flex flex-col">
+          <img className="h-24 w-24 rounded-md overflow-hidden mr-4 mb-3" src={appInfo?.image} alt={appInfo?.label} />
+          <div className="mb-3">
+            <h2 className="text-2xl leading-8 font-bold">{appInfo?.label}</h2>
+            <div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
           </div>
+          <button
+            type="button"
+            className="mb-3 inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md text-yellow-900 bg-yellow-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
+          >
+            <XCircleIcon className="-ml-0.5 mr-2 h-4 w-4 text-yellow-900" aria-hidden="true" />
+            Disable App
+          </button>
+          <button
+            type="button"
+            className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 justify-center"
+          >
+            View Documentation
+          </button>
         </div>
+      </div>
 
-        <div className="bg-white shadow rounded-sm">
+      <div className="mx-auto sm:mt-8 lg:mt-0 lg:px-8 overflow-hidden block">
+        <div className="bg-white sm:px-6 shadow rounded-sm basis-8/12">
           <div className="px-4 py-5 sm:p-6">
             <Tabs tabs={tabs} />
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };

src/modules/apps/components/GeneralTab/GeneralTab.tsx

@@ -1,159 +1,40 @@
 import React, { useState } from 'react';
-import { RadioGroup } from '@headlessui/react';
+import { Switch } from '@headlessui/react';
 
 function classNames(...classes: any) {
   return classes.filter(Boolean).join(' ');
 }
 
-const settings = [
-  { name: 'Public access', description: 'This project would be available to anyone who has the link' },
-  { name: 'Private to Project Members', description: 'Only members of this project would be able to access' },
-  { name: 'Private to you', description: 'You are the only one able to access this project' },
-];
-
 export const GeneralTab = () => {
-  const [selected, setSelected] = useState(settings[0]);
+  const [enabled, setEnabled] = useState(false);
 
   return (
     <div className="py-4">
-      <div>
-        <div className="md:grid md:grid-cols-3 md:gap-6">
-          <div className="md:col-span-1">
-            <h3 className="text-lg font-medium leading-6 text-gray-900">Privacy</h3>
-            <p className="mt-1 text-sm text-gray-500">Change your app privacy</p>
-          </div>
-
-          <div className="mt-5 md:mt-0 md:col-span-2">
-            <div className="mt-1">
-              <RadioGroup value={selected} onChange={setSelected}>
-                <RadioGroup.Label className="sr-only">Privacy setting</RadioGroup.Label>
-                <div className="bg-white rounded-md -space-y-px">
-                  {settings.map((setting, settingIdx) => (
-                    <RadioGroup.Option
-                      key={setting.name}
-                      value={setting}
-                      className={({ checked }) =>
-                        classNames(
-                          settingIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '',
-                          settingIdx === settings.length - 1 ? 'rounded-bl-md rounded-br-md' : '',
-                          checked ? 'bg-primary-50 border-primary-400 z-10' : 'border-gray-200',
-                          'relative border p-4 flex cursor-pointer focus:outline-none',
-                        )
-                      }
-                    >
-                      {({ active, checked }) => (
-                        <>
-                          <span
-                            className={classNames(
-                              checked ? 'bg-primary-600 border-transparent' : 'bg-white border-gray-300',
-                              active ? 'ring-2 ring-offset-2 ring-primary-100' : '',
-                              'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
-                            )}
-                            aria-hidden="true"
-                          >
-                            <span className="rounded-full bg-white w-1.5 h-1.5" />
-                          </span>
-                          <div className="ml-3 flex flex-col">
-                            <RadioGroup.Label
-                              as="span"
-                              className={classNames(
-                                checked ? 'text-primary-900' : 'text-gray-900',
-                                'block text-sm font-medium',
-                              )}
-                            >
-                              {setting.name}
-                            </RadioGroup.Label>
-                            <RadioGroup.Description
-                              as="span"
-                              className={classNames(checked ? 'text-primary-900' : 'text-gray-500', 'block text-sm')}
-                            >
-                              {setting.description}
-                            </RadioGroup.Description>
-                          </div>
-                        </>
-                      )}
-                    </RadioGroup.Option>
-                  ))}
-                </div>
-              </RadioGroup>
-            </div>
-          </div>
+      <div className="md:grid md:grid-cols-3 md:gap-6">
+        <div className="md:col-span-2">
+          <h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
+          <p className="mt-1 text-sm text-gray-500">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nibh sit amet mauris faucibus molestie
+            gravida at orci.
+          </p>
         </div>
-      </div>
-
-      <div className="mt-10">
-        <div className="md:grid md:grid-cols-3 md:gap-6">
-          <div className="md:col-span-1">
-            <h3 className="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
-            <p className="mt-1 text-sm text-gray-500">Change you notifications settings</p>
-          </div>
-
-          <div className="mt-5 md:mt-0 md:col-span-2">
-            <fieldset className="space-y-5 -mt-4">
-              <legend className="sr-only">Notifications</legend>
-              <div className="relative flex items-start">
-                <div className="flex items-center h-5">
-                  <input
-                    id="comments"
-                    aria-describedby="comments-description"
-                    name="comments"
-                    type="checkbox"
-                    className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
-                  />
-                </div>
-                <div className="ml-3 text-sm">
-                  <label htmlFor="comments" className="font-medium text-gray-700">
-                    Comments
-                  </label>
-                  <p id="comments-description" className="text-gray-500">
-                    Get notified when someones posts a comment on a posting.
-                  </p>
-                </div>
-              </div>
-              <div>
-                <div className="relative flex items-start">
-                  <div className="flex items-center h-5">
-                    <input
-                      id="candidates"
-                      aria-describedby="candidates-description"
-                      name="candidates"
-                      type="checkbox"
-                      className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
-                    />
-                  </div>
-                  <div className="ml-3 text-sm">
-                    <label htmlFor="candidates" className="font-medium text-gray-700">
-                      Candidates
-                    </label>
-                    <p id="candidates-description" className="text-gray-500">
-                      Get notified when a candidate applies for a job.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div>
-                <div className="relative flex items-start">
-                  <div className="flex items-center h-5">
-                    <input
-                      id="offers"
-                      aria-describedby="offers-description"
-                      name="offers"
-                      type="checkbox"
-                      className="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"
-                    />
-                  </div>
-                  <div className="ml-3 text-sm">
-                    <label htmlFor="offers" className="font-medium text-gray-700">
-                      Offers
-                    </label>
-                    <p id="offers-description" className="text-gray-500">
-                      Get notified when a candidate accepts or rejects an offer.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-          </div>
+        <div className="my-auto ml-auto">
+          <Switch
+            checked={enabled}
+            onChange={setEnabled}
+            className={classNames(
+              enabled ? 'bg-primary-600' : 'bg-gray-200',
+              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none',
+            )}
+          >
+            <span
+              aria-hidden="true"
+              className={classNames(
+                enabled ? 'translate-x-5' : 'translate-x-0',
+                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
+              )}
+            />
+          </Switch>
         </div>
       </div>
     </div>

src/modules/apps/consts.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CogIcon, PlusCircleIcon } from '@heroicons/react/outline';
 import _ from 'lodash';
+import { useNavigate } from 'react-router';
 
 export const initialEditorYaml = () => {
   return `luck: except
@@ -93,14 +94,16 @@ export const columns: any = [
   {
     Header: ' ',
     Cell: (e: any) => {
+      const navigate = useNavigate();
       const appStatus = e.cell.row.original.status as AppStatus;
+      const appSlug = e.cell.row.original.slug;
       if (appStatus === AppStatus.Installing) {
         return null;
       }
       return (
         <div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
           <button
-            onClick={() => {}}
+            onClick={() => navigate(`/apps/${appSlug}`)}
             type="button"
             className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
           >
@@ -118,25 +121,29 @@ export const data: any[] = [
   {
     id: 1,
     name: 'Nextcloud',
+    slug: 'nextcloud',
     status: AppStatus.Installed,
     assetSrc: './assets/nextcloud.svg',
   },
   {
     id: 2,
     name: 'Wekan',
+    slug: 'wekan',
     status: AppStatus.Installing,
     assetSrc: './assets/wekan.svg',
   },
   {
     id: 3,
     name: 'Zulip',
+    slug: 'zulip',
     status: AppStatus.NotInstalled,
     assetSrc: './assets/zulip.svg',
   },
   {
     id: 4,
     name: 'Wordpress',
-    status: AppStatus.NotInstalled,
+    slug: 'wordpress',
+    status: AppStatus.Installed,
     assetSrc: './assets/wordpress.svg',
   },
 ];
@@ -144,6 +151,7 @@ export const data: any[] = [
 export interface AppInfo {
   id: number;
   name: string;
+  slug: string;
   status: AppStatus;
   assetSrc: string;
 }