All files / modules/70-pipeline/pages/pipelines/views PipelineGridView.tsx

100% Statements 8/8
76.92% Branches 20/26
100% Functions 3/3
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65              2x 2x   2x 2x                       2x                 21x               117x                 117x                              
/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import { Container, Layout, Pagination } from '@wings-software/uicore'
import React from 'react'
import type { PagePMSPipelineSummaryResponse, PMSPipelineSummaryResponse } from 'services/pipeline-ng'
import { PipelineCard } from './PipelineCard/PipelineCard'
import css from '../PipelinesPage.module.scss'
 
interface PipelineGridViewProps {
  data?: PagePMSPipelineSummaryResponse
  gotoPage: (pageNumber: number) => void
  goToPipelineDetail: (pipeline?: PMSPipelineSummaryResponse) => void
  goToPipelineStudio: (pipeline?: PMSPipelineSummaryResponse) => void
  refetchPipeline: () => void
  onDeletePipeline: (commitMsg: string) => Promise<void>
  onDelete: (pipeline: PMSPipelineSummaryResponse) => void
}
 
export function PipelineGridView({
  data,
  gotoPage,
  goToPipelineDetail,
  goToPipelineStudio,
  refetchPipeline,
  onDeletePipeline,
  onDelete
}: PipelineGridViewProps): React.ReactElement {
  return (
    <>
      <Container className={css.gridLayout}>
        <Layout.Masonry
          center
          gutter={25}
          items={data?.content || []}
          renderItem={(item: PMSPipelineSummaryResponse) => (
            <PipelineCard
              pipeline={item}
              goToPipelineDetail={goToPipelineDetail}
              goToPipelineStudio={goToPipelineStudio}
              refetchPipeline={refetchPipeline}
              onDeletePipeline={onDeletePipeline}
              onDelete={onDelete}
            />
          )}
          keyOf={(item: PMSPipelineSummaryResponse) => item.identifier}
        />
      </Container>
      <Container className={css.pagination}>
        <Pagination
          itemCount={data?.totalElements || /* istanbul ignore next */ 0}
          pageSize={data?.size || /* istanbul ignore next */ 10}
          pageCount={data?.totalPages || /* istanbul ignore next */ -1}
          pageIndex={data?.number || /* istanbul ignore next */ 0}
          gotoPage={gotoPage}
        />
      </Container>
    </>
  )
}