Merge pull request #28 from input-output-hk/fix/issues

[fix/issues] General issue fixes in revamped version
input-output-hk · Oct 2, 2023 · 6059ba7 · 6059ba7
2 parents 0d010d8 + 000b8cf
commit 6059ba7
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 50 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -14,6 +14,10 @@ const ComingSoon = () => (
   <Typography>Coming soon...</Typography>
 );
 
+const Support = () => (
+  <Typography><p>Contact us on your dedicated Slack channel for support or questions.</p></Typography>
+)
+
 const App = () => {
   return (
     <Suspense fallback={<CircularProgress color="secondary" size={100} />}>
@@ -24,7 +28,7 @@ const App = () => {
           <Route path="testing" element={<Certification />} />
           <Route path="history" element={<TestingHistory />} />
           <Route path="profile" element={<ComingSoon />} />
-          <Route path="support" element={<ComingSoon />} />
+          <Route path="support" element={<Support />} />
           <Route path="documentation" element={<ComingSoon />} />
           <Route path="audit-report-upload" element={<ReportUpload />} />
           <Route path="/report/:uuid" element={<CertificationResult />} />

diff --git a/src/components/RepoAccessStatus/RepoAccessStatus.tsx b/src/components/RepoAccessStatus/RepoAccessStatus.tsx
@@ -5,14 +5,16 @@ import { ACCESS_STATUS } from "./repoAccessStatus.config";
 const RepoAccessStatus: React.FC<{
   status: string;
   statusText?: string;
-}> = ({ status, statusText = "" }) => {
+  classes?: string;
+  onClick:() => void
+}> = ({ status, statusText = "", classes, onClick }) => {
   if (!status) {
     return null
   }
 
   const { color, className, ...imgProps } = ACCESS_STATUS[status];
   return (
-    <label className="info flex">
+    <label className={classNames("info flex", classes)} onClick={onClick}>
       <img style={{marginTop: "-4px"}} className={classNames("h-5 w-5 bg-white", className)} {...imgProps} />
       {statusText ? (
         <span style={{ color: color }} className="ml-2">

diff --git a/src/pages/certification/components/AuditorRunTestForm/AuditorRunTestForm.tsx b/src/pages/certification/components/AuditorRunTestForm/AuditorRunTestForm.tsx
@@ -77,7 +77,7 @@ const AuditorRunTestForm: React.FC<IAuditorRunTestForm> = ({
 
   const { repoUrl } = useAppSelector((state) => state.certification);
   const { profile } = useAppSelector((state) => state.auth);
-  const { showConfirmConnection, accessStatus, accessToken } = useAppSelector((state) => state.repoAccess);
+  const { showConfirmConnection, accessStatus, accessToken, verifying } = useAppSelector((state) => state.repoAccess);
   const confirm = useConfirm();
   const [submitting, setSubmitting] = useState(false);
   const [showError, setShowError] = useState("");
@@ -284,27 +284,27 @@ const AuditorRunTestForm: React.FC<IAuditorRunTestForm> = ({
           type="submit" 
           variant="contained" size="large"
           className="button block py-3 px-14 mt-10 mb-20 mx-auto w-[200px]"
-          disabled={!form.formState.isValid || submitting || disable || accessStatus !== "accessible"}
+          disabled={!form.formState.isValid || submitting || disable || accessStatus !== "accessible" || verifying}
         >
           Test
         </Button>
 
-        <div className={disable ? "disabled" : ""}>
+        <div className={disable || verifying ? "disabled" : ""}>
           <div className="relative input-wrapper">
             <Input
               label="GitHub Repository"
               type="text"
               id="repoURL"
               required={true}
-              disabled={submitting}
+              disabled={submitting || verifying}
               tooltipText="Github Repository URL entered should be in the format - https://github.com/<username>/<repository> (with an optional trailing backslash)."
               triggerOnBlur={checkRepoAccess}
               {...form.register("repoURL")}
             />
 
             {(accessStatus && !disable) ? (
               <div className="absolute right-[-25px] top-6">
-                <RepoAccessStatus status={accessStatus} />
+                <RepoAccessStatus status={accessStatus} classes={showConfirmConnection ? "cursor-pointer" : ""} onClick={() => {showConfirmConnection && confirmConnectModal()}} />
               </div>
             ) : null}
           </div>

diff --git a/src/pages/home/index.css b/src/pages/home/index.css
@@ -2,4 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {}
+@layer components {}
+
+@media (max-width: 1199px) {
+    #homeContentWrapper {
+        flex-flow: column;
+    }
+}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 
-import { Container, Grid, Paper, Box, Typography, CircularProgress } from "@mui/material";
+import { Container, Paper, Box, Typography, CircularProgress, Button } from "@mui/material";
 import SuccessIcon from "@mui/icons-material/Check";
 import FailedIcon from "@mui/icons-material/Close";
 import ProgressIcon from '@mui/icons-material/Schedule';
@@ -44,57 +45,38 @@ const Widget = (props: { title?: string, subtitle?: string, value?: number, colo
 );
 
 const Home = () => {
+
+  const navigate = useNavigate();
+
   return (
     <Container maxWidth="xl" className="pt-8">
       <Typography className="text-center font-bold tracking-[.2em] text-main text-4xl mb-16">
         Plutus Testing Tool
       </Typography>
-      <Grid container spacing={4}>
+      <div id="homeContentWrapper" className="flex justify-evenly gap-[10px]">
 
-        <Grid item xs={4}>
-          <Paper elevation={0} className="text-center rounded-none shadow p-4">
-            <Typography className="font-medium text-main text-xl text-ellipsis overflow-hidden whitespace-nowrap mb-5">
-              Ali-Hill/minimal-ptt-examples: 57538a3e1ddba14366b0e718107cef5ce9aabb61
-            </Typography>
-            <ProgressIndicator status="working" value={25} />
-            <Widget title="Running" subtitle="--/--" />
-            <Widget />
-          </Paper>
-        </Grid>
+        <Paper elevation={0} className="text-center rounded-none shadow p-4 flex justify-between items-center" style={{flexFlow: "column"}}>
+          <h2>Testing</h2>
+          <p>Test your Dapp using Plutus Testing Tool</p>
+          <Button variant="outlined" size="large" className="button-outlined w-[200px]"
+            onClick={() => {navigate('/testing')}}>Test here</Button>
+        </Paper>
 
-        <Grid item xs={4}>
-          <Paper elevation={0} className="text-center rounded-none shadow p-4">
-            <Typography className="font-medium text-main text-xl text-ellipsis overflow-hidden whitespace-nowrap mb-5">
-              Ali-Hill/minimal-ptt-examples: 57538a3e1ddba14366b0e718107cef5ce9aabb61
-            </Typography>
-            <ProgressIndicator status="success" value={100} />
-            <Widget
-              title="Code coverage"
-              subtitle="238/251"
-              color="#a78bfa"
-              value={45}
-            />
-            <Widget
-              title="Property Based Testing"
-              subtitle="500/1000"
-              color="#fbbf24"
-              value={75}
-            />
+        <Paper elevation={0} className="text-center rounded-none shadow p-4 flex justify-between items-center" style={{flexFlow: "column"}}>
+            <h2>Generate a certificate metadata</h2>
+            <p>Generate a CIP-96 compliant certificate for your audits</p>
+            <Button variant="outlined" size="large" className="button-outlined w-[200px]"
+            onClick={() => {navigate('/audit-report-upload')}}>Generate here</Button>
           </Paper>
-        </Grid>
 
-        <Grid item xs={4}>
-          <Paper elevation={0} className="text-center rounded-none shadow p-4">
-            <Typography className="font-medium text-main text-xl text-ellipsis overflow-hidden whitespace-nowrap mb-5">
-              Ali-Hill/minimal-ptt-examples: 57538a3e1ddba14366b0e718107cef5ce9aabb61
-            </Typography>
-            <ProgressIndicator status="failed" value={100} />
-            <Widget title="Build failed" subtitle="--/--" />
-            <Widget />
+          <Paper elevation={0} className="text-center rounded-none shadow p-4 flex justify-between items-center" style={{flexFlow: "column"}}>
+            <h2>Documentation</h2>
+            <p>Access the documentation</p>
+            <Button  variant="outlined" size="large" className="button-outlined w-[200px]"
+            onClick={() => {window.open('https://rsoulatiohk.github.io/docs/intro', '_blank', 'noreferrer')}}>Read here</Button>
           </Paper>
-        </Grid>
+      </div>
 
-      </Grid>
     </Container>
   );
 };