migrated to typescript

src/components/Job/JobGitRefIcon.js

-import { useContext, useMemo } from "react";
-import { apiContext } from "../../api/DeployApi";
-import { useAPIMethod } from "@ess-ics/ce-ui-common";
-import { Skeleton } from "@mui/material";
-import { GitRefTypeIcon } from "../common/Git/GitRefTypeIcon";
-
-export const JobGitRefIcon = ({
-  gitReference,
-  gitProjectId,
-  fontSize = null
-}) => {
-  const client = useContext(apiContext);
-  const params = useMemo(
-    () => ({
-      project_id: gitProjectId,
-      git_reference: gitReference
-    }),
-    [gitReference, gitProjectId]
-  );
-
-  const { value: referenceTypeResponse } = useAPIMethod({
-    fcn: client.apis.Git.gitReferenceType,
-    params: params
-  });
-
-  if (!referenceTypeResponse) {
-    return (
-      <Skeleton
-        sx={{ marginLeft: "4px" }}
-        variant="circular"
-        width={20}
-        height={20}
-      />
-    );
-  }
-
-  return (
-    <GitRefTypeIcon
-      type={referenceTypeResponse.reference_type}
-      fontSize={fontSize}
-    />
-  );
-};

src/components/Job/JobGitRefIcon.tsx

+import { useGitReferenceTypeQuery } from "../../store/deployApi";
+import { IconFontType } from "../../types/common";
+import { Skeleton } from "@mui/material";
+import { GitRefTypeIcon } from "../common/Git/GitRefTypeIcon";
+
+interface JobGitRefIconProps {
+  gitReference: string;
+  gitProjectId: number;
+  fontSize?: IconFontType | undefined | null;
+}
+
+export const JobGitRefIcon = ({
+  gitReference,
+  gitProjectId,
+  fontSize = null
+}: JobGitRefIconProps) => {
+  const { data: gitReferenceType, isLoading } = useGitReferenceTypeQuery({
+    projectId: gitProjectId,
+    gitReference
+  });
+
+  return (
+    <>
+      {isLoading ? (
+        <Skeleton
+          sx={{ marginLeft: "4px" }}
+          variant="circular"
+          width={20}
+          height={20}
+        />
+      ) : (
+        <GitRefTypeIcon
+          type={gitReferenceType?.reference_type}
+          fontSize={fontSize}
+        />
+      )}
+    </>
+  );
+};

src/components/Job/JobGitRefLink.js → src/components/Job/JobGitRefLink.tsx

-import { useContext, useMemo } from "react";
+import {
+  useGitProjectDetailsQuery,
+  useListTagsAndCommitIdsQuery
+} from "../../store/deployApi";
 import { GitRefLink } from "../common/Git/GitRefLink";
-import { apiContext } from "../../api/DeployApi";
-import { useAPIMethod } from "@ess-ics/ce-ui-common";
 import { Skeleton } from "@mui/material";
 
+interface JobGitRefLinkProps {
+  gitReference: string;
+  gitProjectId: number;
+  disableExternalLinkIcon: boolean;
+}
+
+const SHORT_GIT_HASH_LENGTH = 8;
+
 export const JobGitRefLink = ({
   gitReference,
   gitProjectId,
   disableExternalLinkIcon = false
-}) => {
-  const client = useContext(apiContext);
-  const projectParams = useMemo(
-    () => ({
-      project_id: gitProjectId
-    }),
-    [gitProjectId]
-  );
+}: JobGitRefLinkProps) => {
+  const { data: projectDetails, isLoading: projectDetailsLoading } =
+    useGitProjectDetailsQuery({ projectId: gitProjectId });
 
-  const { value: project } = useAPIMethod({
-    fcn: client.apis.Git.gitProjectDetails,
-    params: projectParams
-  });
-
-  const shortRefParams = useMemo(
-    () => ({
-      project_id: gitProjectId,
+  const { data: tagsAndCommitsList, isLoading: tagsAndCommitsListLoading } =
+    useListTagsAndCommitIdsQuery({
+      projectId: gitProjectId,
       reference: gitReference
-    }),
-    [gitProjectId, gitReference]
-  );
-  const { value: commits } = useAPIMethod({
-    fcn: client.apis.Git.listTagsAndCommitIds,
-    params: shortRefParams
-  });
+    });
 
-  if (!project || !commits) {
+  if (projectDetailsLoading || tagsAndCommitsListLoading) {
     return <Skeleton width={80} />;
   }
 
-  const firstCommit = commits?.at(0);
-  const gitRef = firstCommit?.shortReference ?? gitReference;
+  const firstCommit = tagsAndCommitsList?.at(0);
+  const gitRef = firstCommit?.short_reference ?? gitReference;
   const displayReference =
     firstCommit?.type === "TAG"
       ? firstCommit?.reference
       : firstCommit?.short_reference;
-  const shortGitHashLength = 8;
 
   return (
     <>
       {displayReference ? (
         <GitRefLink
-          url={project?.projectUrl}
+          url={projectDetails?.projectUrl}
           revision={gitRef}
           displayReference={displayReference}
-          label={`External Git Link, project ${project.name}, revision ${gitRef}`}
           disableExternalLinkIcon={disableExternalLinkIcon}
         />
       ) : (
-        <span>{gitRef.slice(0, shortGitHashLength)}</span>
+        <span>{gitRef.slice(0, SHORT_GIT_HASH_LENGTH)}</span>
       )}
     </>
   );

src/components/Job/JobRevisionChip.tsx

@@ -4,7 +4,7 @@ import { JobGitRefLink } from "./JobGitRefLink";
 
 interface JobRevisionChipProps {
   gitReference: string;
-  gitProjectId: string;
+  gitProjectId: number;
 }
 
 export const JobRevisionChip = ({

src/components/common/Git/GitRefLink.js → src/components/common/Git/GitRefLink.tsx

-/**
- * GitRefLink
- * Component providing link (and tag) to gitlab
- */
-import { string } from "prop-types";
 import { ExternalLink } from "@ess-ics/ce-ui-common";
 
-const propTypes = {
-  /** String containing url to gitlab template */
-  url: string,
-  /**  String containing gitlab tag */
-  revision: string
-};
+interface GitRefLinkProps {
+  url: string | undefined;
+  revision: string;
+  displayReference: string;
+  disableExternalLinkIcon: boolean;
+}
 
-export const GitRefLink = ({ url, revision, displayReference, ...props }) => {
+export const GitRefLink = ({
+  url,
+  revision,
+  displayReference,
+  disableExternalLinkIcon
+}: GitRefLinkProps) => {
   // if no git reference has been entered
-  if (!url || url.trim === "") {
+  if (!url) {
     return <></>;
   }
 
@@ -35,11 +35,9 @@ export const GitRefLink = ({ url, revision, displayReference, ...props }) => {
     <ExternalLink
       href={url}
       label={`External Git Link, revision ${revision}`}
-      {...props}
+      disableExternalLinkIcon={disableExternalLinkIcon}
     >
       {displayReference}
     </ExternalLink>
   );
 };
-
-GitRefLink.propTypes = propTypes;

src/components/common/Git/GitRefTypeIcon.tsx

+import { IconFontType } from "../../../types/common";
 import CommitIcon from "@mui/icons-material/Commit";
 import LabelOutlinedIcon from "@mui/icons-material/LabelOutlined";
 import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
 
-type FontType = "small" | "inherit" | "medium" | "large";
-
 interface GitRefTypeIconProps {
-  type: string;
-  fontSize?: FontType;
+  type: string | undefined;
+  fontSize?: IconFontType | undefined | null;
 }
 
 export const GitRefTypeIcon = ({ type, fontSize }: GitRefTypeIconProps) => {
   if (type === "TAG") {
-    return <LabelOutlinedIcon fontSize={fontSize ? fontSize : "small"} />;
+    return <LabelOutlinedIcon fontSize={fontSize || "small"} />;
   }
 
   if (type === "COMMIT") {
-    return <CommitIcon fontSize={fontSize ? fontSize : "medium"} />;
+    return <CommitIcon fontSize={fontSize || "medium"} />;
   }
 
-  return <QuestionMarkIcon fontSize={fontSize ? fontSize : "small"} />;
+  return <QuestionMarkIcon fontSize={fontSize || "small"} />;
 };

src/types/common.ts

@@ -47,3 +47,5 @@ export interface ApiResult<T> {
 
 export type FormElements<U extends string> = HTMLFormControlsCollection &
   Record<U, HTMLInputElement>;
+
+export type IconFontType = "small" | "medium" | "large" | "inherit";