fix(OpenScanHub): Schema not reflecting API data

There was a discrepancy between what the API should return and what is
being returned. This fixes some of the fields that can be null and
handles the case where that occurs.

Author: Venefilyn

frontend/src/apiDefinitions.ts

@@ -482,9 +482,9 @@ export interface OSHScan {
   release: string | null;
   repo_name: string;
   repo_namespace: string;
-  scan_results_url: string;
-  status: string;
+  scan_results_url: string | null;
+  status: string | null;
   submitted_time: number | null;
-  task_id: number;
-  url: string;
+  task_id: number | null;
+  url: string | null;
 }

frontend/src/components/osh/OSHScan.tsx

@@ -83,13 +83,13 @@ export const OSHScan = () => {
                 <DescriptionListTerm>Status</DescriptionListTerm>
                 <DescriptionListDescription>
                   <StatusLabel
-                    status={data.status}
+                    status={data.status ?? "unknown"}
                     target={"rawhide"}
                     link={data.url}
                   />
                 </DescriptionListDescription>
 
-                {data.status === "succeeded" ? (
+                {data.status === "succeeded" && data.scan_results_url ? (
                   <>
                     <DescriptionListTerm>New findings</DescriptionListTerm>
                     <DescriptionListDescription>

frontend/src/components/statusLabels/StatusLabel.tsx

@@ -16,16 +16,16 @@ import { BaseStatusLabel, BaseStatusLabelProps } from "./BaseStatusLabel";
 
 export interface StatusLabelProps {
   status: string;
-  link?: string;
+  link?: string | null;
   target?: string;
 }
 
 /**
  * Status label component that is used from other components.
  */
 export const StatusLabel: React.FC<StatusLabelProps> = (props) => {
-  const [color, setColor] = useState<BaseStatusLabelProps["color"]>("purple");
-  const [icon, setIcon] = useState(<InfoCircleIcon />);
+  const [color, setColor] = useState<BaseStatusLabelProps["color"]>("grey");
+  const [icon, setIcon] = useState(<QuestionCircleIcon />);
 
   useEffect(() => {
     switch (props.status) {
@@ -45,7 +45,7 @@ export const StatusLabel: React.FC<StatusLabelProps> = (props) => {
         setIcon(<ExclamationTriangleIcon />);
         break;
       case "pending":
-        setColor("cyan");
+        setColor("teal");
         setIcon(<HourglassHalfIcon />);
         break;
       case "running":