Merge pull request #47 from IQSS/deployment_fix

This change was required for the UI to be packed for production deployment.

Author: jp-tosca

dv-marketplace/src/components/UI/AppMessageDialog.tsx

@@ -14,7 +14,7 @@ interface CardDeckProps {
 export const MarketplaceLinkCard = ({ header, imageId, text, link, children }: CardDeckProps) => {
   return (
     <div className="col-12 col-sm-6 col-md-6 col-lg-3 mb-2 px-0">
-      <Link to={link} className="text-decoration-none">
+      <Link to={link ?? ""} className="text-decoration-none">
        <BaseCard header={header} imageId={imageId} text={text} link={link}>
          {children}
        </BaseCard>
@@ -44,7 +44,7 @@ export const RowCard = ({ header, imageId, text, link, children }: CardDeckProps
     );
 }
 
-export const BaseCard = ({ header, imageId, text, link, children }: CardDeckProps) => {
+export const BaseCard = ({ header, imageId, text, children }: CardDeckProps) => {
 
   const { getImageUrl } = useMarketplaceApiRepo();
   return (    
@@ -56,7 +56,8 @@ export const BaseCard = ({ header, imageId, text, link, children }: CardDeckProp
             </Card.Header>
           )}
           {imageId && (
-            <Card.Img variant="top" src={getImageUrl(imageId)} className="rounded-5 p-1" />
+            <Card.Img variant="top" src={getImageUrl(imageId)} className="rounded-5 p-1" 
+            style={{ maxHeight: '200px', minHeight: '100px', objectFit: 'scale-down' }}/>
           )}
           <Card.Body>
             {text && (

dv-marketplace/src/components/UI/MarketplaceCard.tsx

@@ -6,13 +6,7 @@ export const UserContext = createContext<UserContextType>({
     user: null,
     setUser: () => {},
     showLogin: false,
-    setShowLogin: () => {},
-    showMessage: false,
-    setShowMessage: () => {},
-    modalMessage: '',
-    setModalMessage: () => {},
-    modalTitle: '',
-    setModalTitle: () => {},
+    setShowLogin: () => {},   
     theme: Theme.AUTO,
     setTheme: () => {}
 
@@ -23,7 +17,7 @@ const UserContextProvider = ({ children }: { children: React.ReactNode }) => {
     const [user, setUser] = useState<User | null>(null);
     const [showLogin, setShowLogin] = useState(false);
     //App message dialog    
-    const [theme, setTheme] = useState<Theme>();
+    const [theme, setTheme] = useState<Theme>(Theme.AUTO);
 
     useEffect((): void => {
         const user = localStorage.getItem('user');

dv-marketplace/src/components/context/UserContextProvider.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import type { Manifest } from "../../../../types/MarketplaceTypes";
 import { createFormChangeHandler } from "../../../UI/FormInputFields";
+import useMarketplaceApiRepo from "../../../../repositories/useMarketplaceApiRepo";
 
 
 export default function useEditManifestForm(initialManifest?: Manifest, show?: boolean) {
@@ -34,7 +35,7 @@ export default function useEditManifestForm(initialManifest?: Manifest, show?: b
     const handleManifestChange = createFormChangeHandler(setFormManifest);
 
 
-    const BASE_URL = 'http://localhost:8081';
+    const { BASE_URL } = useMarketplaceApiRepo();
 
 
     const [scopes, setScopes] = useState<string[]>([]);

dv-marketplace/src/components/forms/EditExternalToolForm/EditVersionForm/useEditManifestForm.tsx

@@ -3,7 +3,6 @@ import UserContextProvider from "../context/UserContextProvider";
 import ErrorView from "../UI/ErrorView";
 import { Outlet } from "react-router-dom";
 import Navigation from '../UI/Navigation/NavigationBar';
-import AppMessageDialog from "../UI/AppMessageDialog";
 
 function ErrorFallback({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) {
   return <ErrorView error={error} resetErrorBoundary={resetErrorBoundary} />;
@@ -21,7 +20,6 @@ const AppIndex = () => {
             <ErrorBoundary FallbackComponent={ErrorFallback}>
               <Outlet />            
             </ErrorBoundary>
-            <AppMessageDialog />
           </UserContextProvider>
         </ErrorBoundary>
   );

dv-marketplace/src/components/pages/AppIndex.tsx

@@ -3,7 +3,7 @@ import axios from "axios";
 import type { ExternalTool, Manifest,Image } from "../../types/MarketplaceTypes";
 import { Alert } from "react-bootstrap";
 import { InnerCardDeck } from "../UI/CardDeck";
-import { RowCard, MarketplaceCard } from "../UI/MarketplaceCard";
+import { RowCard, MarketplaceCard, BaseCard } from "../UI/MarketplaceCard";
 import InstallExToolFrame from "./InstallExToolFrame";
 import useViewExternalTool from "./useViewExternalTool";
 import { useEffect } from "react";
@@ -39,34 +39,42 @@ const ViewExternalTool = () => {
 
     return (
         <div className="container" style={{ marginTop: "120px" }}>
-
-
-        <Alert variant='light'>
-        <div className='container '>
-            <div className='row'>
-                <h1 className='col-6'>{tool?.name}:</h1>
-                <div className='col-6 d-flex justify-content-end align-items-center'>
-                    {userContext.user && 
+         
+        {userContext.user && 
                     ( userContext.user.roles.includes("ADMIN") || tool?.ownerId == userContext.user.id)  &&
-                        <Link to ={`/edit/${id}`} className="btn btn-secondary bi-pen" > Edit</Link>
-                    }
+        <Alert variant='light' className="d-flex justify-content-end">
+            <Link to ={`/edit/${id}`} className="btn btn-secondary bi-pen" > Edit</Link>
+        </Alert>
+        }       
+
+             <div className="container-fluid" style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'left'}}>
+                <div className='row col-12'>
+                    <div className='col-3'>
+                    <BaseCard
+                    header={tool?.name}
+                    imageId={tool?.images[0]?.imageId}
+                    />
+                    </div>
+                    <p className="col-9 mb-2 py-10" style={{padding: '10px'}}>
+                        {tool?.description}
+                    </p>
                 </div>
             </div>
-        </div>
-        </Alert>
-
+            
             <div>
                 <p className='col-12 d-flex '>
-                    {tool?.description}
+                   
                 </p>
             </div>
-            <Alert variant='light'>
-                <div className='container '>
+            {/* <Alert variant='light'> */}
+
+                <div className='container'>
+                    <hr />
                     <div className='row'>
-                        <h3 className='col-6'>Releases:</h3>
+                        <h3 className='col-6'>Releases</h3>
                     </div>
                 </div>
-            </Alert>
+            {/* </Alert> */}
 
             <InnerCardDeck>
                 {tool?.versions.map((version) => (
@@ -114,15 +122,15 @@ const ViewExternalTool = () => {
 
             <br />
 
-            <Alert variant='light'>
                 <div className='container '>
+                    <hr />
                     <div className='row'>
-                        <h3 className='col-6'>Images:</h3>
+                        <h3 className='col-6'>Images</h3>
                         <div className='col-6 d-flex justify-content-end align-items-center'>
                         </div>
                     </div>
+                    
                 </div>
-            </Alert>
             <InnerCardDeck>
 
                 {tool?.images.map((image: Image) => (

dv-marketplace/src/components/pages/ViewExternalTool.tsx

@@ -4,12 +4,13 @@ import axios from "axios";
 import { toast } from "react-toastify";
 
 const BASE_URL = 'http://localhost:8081';
+// Change this for deployment
+// const BASE_URL = '';
 
 export default function useMarketplaceApiRepo() {
 
     const userContext = useContext(UserContext);
-    // Change this for deployment
-    // const BASE_URL = '';
+    
 
     const jwtToken = userContext.user ? userContext.user.accessToken : '';
 

dv-marketplace/src/repositories/useMarketplaceApiRepo.ts

@@ -66,13 +66,7 @@ export type UserContextType = {
   user: User | null;
   setUser: (user: User | null) => void;
   showLogin: boolean;
-  setShowLogin: (show: boolean) => void;
-  showMessage: boolean;
-  setShowMessage: (show: boolean) => void;
-  modalMessage: string;
-  setModalMessage: (message: string) => void;
-  modalTitle: string;
-  setModalTitle: (title: string) => void;
+  setShowLogin: (show: boolean) => void; 
   theme: Theme;
   setTheme: (theme: Theme) => void;
 };