GitFOSS

// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[prisma:generate]
import type { Pipeline, Stage } from "@prisma/client";
// app
import type { CommonProps } from "../../types";
import { Layout } from "../../components/Layout";
import { PageWrapper } from "../../components/PageWrapper";
import { IslandWrapper } from "../../components/IslandWrapper.styled";
import { AppRoute } from "../../routes.defs";
import { buildRouteLink } from "../../utils/shared";
// app islands
import Code from "../../islands/Code";
import RepositoryHero from "../../islands/RepositoryHero";

export interface PipelineStageDetailsViewProps extends CommonProps {
  pipeline: Pipeline;
  stage: Stage | null;
  logs: Stage["logs"];
  orgSlug: string;
  repoSlug: string;
}

const PipelineStageDetailsView: ReactView<PipelineStageDetailsViewProps> = ({
  commonProps,
  pipeline,
  stage,
  logs,
  orgSlug,
  repoSlug,
}) => {
  return (
    <Layout
      {...commonProps}
      showDrawerPrimary
      orgSlug={orgSlug}
      repoSlug={repoSlug}
    >
      <PageWrapper style={{ gap: 8 }}>
        <IslandWrapper
          style={{ position: "sticky", top: 64 }}
          data-islandid={`${RepositoryHero.name}$$0`}
        >
          <RepositoryHero
            themeScheme={commonProps.themeScheme}
            // forkedFromRepo={repo.forkedFromRepo}
            // forksCount={repo.forks.length}
            // parentOrg={parentOrg}
            // repo={repo}
            path={`Pipeline > ${pipeline.name ?? "Unknown"} > #${stage?.order ?? 0} - ${stage?.name ?? "Unknown"}`}
            showForkButton={false}
            showNewButton
            newButtonText={"Download Artifacts"}
            newButtonUrl={buildRouteLink(
              AppRoute.REPOSITORY_PIPELINE_ARTEFACTS,
              {
                orgSlug: orgSlug,
                repoSlug: repoSlug,
                pipelineId: pipeline.id,
              },
            )}
            parentOrg={{
              id: "",
              createdAt: new Date(Date.now()),
              updatedAt: new Date(Date.now()),
              slug: orgSlug,
              ownerId: "",
              kind: "PERSONAL",
              visibility: "PUBLIC",
              avatarUri: null,
              displayName: orgSlug,
              websiteUrl: null,
            }}
            repo={{
              id: "",
              forkedFromRepoId: null,
              organizationId: "",
              slug: repoSlug,
              createdAt: new Date(Date.now()),
              updatedAt: new Date(Date.now()),
              lastPushedAt: null,
              visibility: "PUBLIC",
              isFork: false,
              keywords: [],
              avatarUri: null,
              displayName: repoSlug,
              shortDescription: null,
              websiteUrl: null,
            }}
          />
        </IslandWrapper>
        <IslandWrapper data-islandid={`${Code.name}$$0`}>
          <Code
            themeScheme={commonProps.themeScheme}
            code={logs || ""}
            language={"shell"}
            whiteSpace={"pre-wrap"}
            style={{
              minHeight: "70vh",
              overflowY: "scroll",
              // backgroundColor: "black !important",
              // color: "white",
            }}
          />
        </IslandWrapper>
      </PageWrapper>
    </Layout>
  );
};

PipelineStageDetailsView.displayName = "PipelineStageDetailsView";
export default PipelineStageDetailsView;