Stop auto-start and show definitions

ls1intum · Sep 13, 2024 · 539dfb2 · 539dfb2
1 parent bc0a99f
commit 539dfb2
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 11 deletions.
diff --git a/node/common/src/config.ts b/node/common/src/config.ts
@@ -34,6 +34,7 @@ interface BaseTheiaCloudConfig {
 export interface AppDefinition {
   appId: string;
   appName: string;
+  logo: string | undefined;
 }
 
 export interface KeycloakConfig {

diff --git a/node/landing-page/src/App.css b/node/landing-page/src/App.css
@@ -54,6 +54,42 @@
   -webkit-transform: none;
 }
 
+.App__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 16px;
+  padding: 16px;
+  justify-items: center;
+}
+
+.App__grid-item {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+  width: 100px; /* Fixed width to maintain consistent size */
+  height: 100px; /* Fixed height to maintain consistent size */
+  display: flex; /* Changed to flex to properly align content */
+  flex-direction: column; /* Align content vertically within the button */
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.App__grid-item:hover {
+  background-color: #0056b3;
+}
+
+.App__grid-item-logo {
+  max-width: 50%;
+  max-height: 50%;
+  margin-bottom: 8px; /* Space between the image and the text */
+}
+
 .App__error-message {
   width: 60vw;
   line-height: 1.5em;

diff --git a/node/landing-page/src/App.tsx b/node/landing-page/src/App.tsx
@@ -10,6 +10,7 @@ import { Footer } from './components/Footer';
 import { Header } from './components/Header';
 import { Info } from './components/Info';
 import { LaunchApp } from './components/LaunchApp';
+import { SelectApp } from './components/SelectApp';
 import { Loading } from './components/Loading';
 import { LoginButton } from './components/LoginButton';
 
@@ -47,10 +48,15 @@ function App(): JSX.Element {
   const [token, setToken] = useState<string>();
   const [logoutUrl, setLogoutUrl] = useState<string>();
 
+  const [gitURL, setGitURL] = useState<string>();
+
+  const [autoStart, setAutoStart] = useState<boolean>(true);
+
   if (!initialized) {
-    initialized = true;
     const element = document.getElementById('selectapp');
     const urlParams = new URLSearchParams(window.location.search);
+
+    // Get appDef parameter from URL and set it as the default selection
     if (urlParams.has('appDef') || urlParams.has('appdef')) {
       const pathBlueprintSelection = urlParams.get('appDef') || urlParams.get('appdef');
       console.log('additionalApps: ' + JSON.stringify(config.additionalApps));
@@ -77,6 +83,15 @@ function App(): JSX.Element {
         console.error('Invalid default selection value: ' + pathBlueprintSelection);
       }
     }
+
+    // Get gitURL parameter from URL. This should be changed to a protected body-read in the future.
+    if (urlParams.has('gitURL')) {
+      const gitURL = urlParams.get('gitURL');
+      if (gitURL) {
+        setGitURL(gitURL);
+      }
+    }
+
     if (config.useKeycloak) {
       keycloakConfig = {
         url: config.keycloakAuthUrl,
@@ -105,6 +120,7 @@ function App(): JSX.Element {
           console.error('Authentication Failed');
         });
     }
+    initialized = true;
   }
 
   useEffect(() => {
@@ -113,14 +129,21 @@ function App(): JSX.Element {
     console.log('Selected app name: ' + selectedAppName);
     console.log('Configured app definition: ' + config.appDefinition);
     console.log('Initial app definition: ' + initialAppDefinition);
+    console.log('Git URL: ' + gitURL);
     console.log('-----------------------------------');
 
-    const urlParams = new URLSearchParams(window.location.search);
+    if (!initialized) {
+      console.log('Not initialized yet');
+      return;
+    }
 
-    // Try to start the app if the app definition was changed via URL parameter
-    if (!urlParams.has('no-start') && selectedAppDefinition) {
-      console.log('Starting session for ' + selectedAppDefinition);
+    if (selectedAppDefinition && gitURL) {
+      console.log('Setting autoStart to true and starting session');
+      setAutoStart(true);
       handleStartSession(selectedAppDefinition);
+    } else {
+      console.log('Setting autoStart to false');
+      setAutoStart(false);
     }
 
   }, [initialized]);
@@ -214,17 +237,22 @@ function App(): JSX.Element {
           <div>
             <div>
               <AppLogo fileExtension={logoFileExtension} />
-              <p>
-                {needsLogin ? (
-                  <LoginButton login={authenticate} />
-                ) : (
+              {needsLogin ? (
+                <LoginButton login={authenticate} />
+              ) : (
+                autoStart ? (
                   <LaunchApp
                     appName={selectedAppName}
                     appDefinition={selectedAppDefinition}
                     onStartSession={handleStartSession}
                   />
-                )}
-              </p>
+                ) : (
+                  <SelectApp
+                    appDefinitions={config.additionalApps}
+                    onStartSession={handleStartSession}
+                  />
+                )
+              )}
             </div>
           </div>
         )}

diff --git a/node/landing-page/src/components/SelectApp.tsx b/node/landing-page/src/components/SelectApp.tsx
@@ -0,0 +1,28 @@
+import { AppDefinition } from '../../../common/src/config.ts';
+
+interface SelectAppProps {
+  appDefinitions: AppDefinition[] | undefined;
+  onStartSession: (appDefinition: string) => void;
+}
+export const SelectApp: React.FC<SelectAppProps> = ({
+  appDefinitions,
+  onStartSession
+}: SelectAppProps) => (
+  <div className='App__grid'>
+    {appDefinitions && appDefinitions.map((app, index) => (
+      <button
+        key={index}
+        className='App__grid-item'
+        onClick={() => onStartSession(app.appId)}
+      >
+        {app.logo && (
+          <img src={`data:image/png;base64,${app.logo}`} alt={`${app.appName} logo`} className='App__grid-item-logo' />
+        )}
+        Launch
+        <br />
+        {app.appName}
+      </button>
+    ))}
+  </div>
+);
+