diff --git a/src/components/Job/JobGitRefIcon.js b/src/components/Job/JobGitRefIcon.js
deleted file mode 100644
index f9042edaf9e15d06914456479a6dcaa0b23a5ce1..0000000000000000000000000000000000000000
--- a/src/components/Job/JobGitRefIcon.js
+++ /dev/null
@@ -1,43 +0,0 @@
-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}
- />
- );
-};
diff --git a/src/components/Job/JobGitRefIcon.tsx b/src/components/Job/JobGitRefIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..64dd1a0c56887db5ce06234d56b08cafeabf0665
--- /dev/null
+++ b/src/components/Job/JobGitRefIcon.tsx
@@ -0,0 +1,39 @@
+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}
+ />
+ )}
+ </>
+ );
+};
diff --git a/src/components/Job/JobGitRefLink.js b/src/components/Job/JobGitRefLink.js
deleted file mode 100644
index 6a252c194c3d4ae64a9862af9ab06293d0f00f64..0000000000000000000000000000000000000000
--- a/src/components/Job/JobGitRefLink.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useContext, useMemo } from "react";
-import { GitRefLink } from "../common/Git/GitRefLink";
-import { apiContext } from "../../api/DeployApi";
-import { useAPIMethod } from "@ess-ics/ce-ui-common";
-import { Skeleton } from "@mui/material";
-
-export const JobGitRefLink = ({
- gitReference,
- gitProjectId,
- disableExternalLinkIcon = false
-}) => {
- const client = useContext(apiContext);
- const projectParams = useMemo(
- () => ({
- project_id: gitProjectId
- }),
- [gitProjectId]
- );
-
- const { value: project } = useAPIMethod({
- fcn: client.apis.Git.gitProjectDetails,
- params: projectParams
- });
-
- const shortRefParams = useMemo(
- () => ({
- project_id: gitProjectId,
- reference: gitReference
- }),
- [gitProjectId, gitReference]
- );
- const { value: commits } = useAPIMethod({
- fcn: client.apis.Git.listTagsAndCommitIds,
- params: shortRefParams
- });
-
- if (!project || !commits) {
- return <Skeleton width={80} />;
- }
-
- const firstCommit = commits?.at(0);
- const gitRef = firstCommit?.shortReference ?? gitReference;
- const displayReference =
- firstCommit?.type === "TAG"
- ? firstCommit?.reference
- : firstCommit?.short_reference;
- const shortGitHashLength = 8;
-
- return (
- <>
- {displayReference ? (
- <GitRefLink
- url={project?.projectUrl}
- revision={gitRef}
- displayReference={displayReference}
- label={`External Git Link, project ${project.name}, revision ${gitRef}`}
- disableExternalLinkIcon={disableExternalLinkIcon}
- />
- ) : (
- <span>{gitRef.slice(0, shortGitHashLength)}</span>
- )}
- </>
- );
-};
diff --git a/src/components/Job/JobGitRefLink.tsx b/src/components/Job/JobGitRefLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3d24c93497c7e853972648ceda4ce6716aa89e25
--- /dev/null
+++ b/src/components/Job/JobGitRefLink.tsx
@@ -0,0 +1,55 @@
+import {
+ useGitProjectDetailsQuery,
+ useListTagsAndCommitIdsQuery
+} from "../../store/deployApi";
+import { GitRefLink } from "../common/Git/GitRefLink";
+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
+}: JobGitRefLinkProps) => {
+ const { data: projectDetails, isLoading: projectDetailsLoading } =
+ useGitProjectDetailsQuery({ projectId: gitProjectId });
+
+ const { data: tagsAndCommitsList, isLoading: tagsAndCommitsListLoading } =
+ useListTagsAndCommitIdsQuery({
+ projectId: gitProjectId,
+ reference: gitReference
+ });
+
+ if (projectDetailsLoading || tagsAndCommitsListLoading) {
+ return <Skeleton width={80} />;
+ }
+
+ const firstCommit = tagsAndCommitsList?.at(0);
+ const gitRef = firstCommit?.short_reference ?? gitReference;
+ const displayReference =
+ firstCommit?.type === "TAG"
+ ? firstCommit?.reference
+ : firstCommit?.short_reference;
+
+ return (
+ <>
+ {displayReference ? (
+ <GitRefLink
+ url={projectDetails?.projectUrl}
+ revision={gitRef}
+ displayReference={displayReference}
+ disableExternalLinkIcon={disableExternalLinkIcon}
+ />
+ ) : (
+ <span>{gitRef.slice(0, SHORT_GIT_HASH_LENGTH)}</span>
+ )}
+ </>
+ );
+};
diff --git a/src/components/Job/JobRevisionChip.tsx b/src/components/Job/JobRevisionChip.tsx
index 6c261398845566e396d6c0f4df60167776a6ad8f..b65a7f03783f7bba383e44a8119216bbda48ad21 100644
--- a/src/components/Job/JobRevisionChip.tsx
+++ b/src/components/Job/JobRevisionChip.tsx
@@ -4,7 +4,7 @@ import { JobGitRefLink } from "./JobGitRefLink";
interface JobRevisionChipProps {
gitReference: string;
- gitProjectId: string;
+ gitProjectId: number;
}
export const JobRevisionChip = ({
diff --git a/src/components/common/Git/GitRefLink.js b/src/components/common/Git/GitRefLink.tsx
similarity index 59%
rename from src/components/common/Git/GitRefLink.js
rename to src/components/common/Git/GitRefLink.tsx
index a38efe36b1dec0549164227b607bda0b0207c514..35551659cd65accdd0881dd39a2b8a8296f03908 100644
--- a/src/components/common/Git/GitRefLink.js
+++ b/src/components/common/Git/GitRefLink.tsx
@@ -1,20 +1,20 @@
-/**
- * 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;
diff --git a/src/components/common/Git/GitRefTypeIcon.tsx b/src/components/common/Git/GitRefTypeIcon.tsx
index 5a48e5a9d174e127d2a156d44a0860164edaefa4..5431b416449769869366b9ed5431fd9b97620439 100644
--- a/src/components/common/Git/GitRefTypeIcon.tsx
+++ b/src/components/common/Git/GitRefTypeIcon.tsx
@@ -1,22 +1,21 @@
+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"} />;
};
diff --git a/src/types/common.ts b/src/types/common.ts
index 4f06d5aa1d90b463cc89a81392f32b050189c11c..2451754677f166b0da19b3ce395b4ef46609e66b 100644
--- a/src/types/common.ts
+++ b/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";