All files / modules/20-rbac/components/UserGroupsRenderer UserGroupsResourceModalBody.tsx

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/*
 * 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 React, { useState } from 'react'
import { Container, Layout, Text, Icon } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import type { Renderer, CellProps } from 'react-table'
import ResourceHandlerTable from '@rbac/components/ResourceHandlerTable/ResourceHandlerTable'
import { PageSpinner } from '@common/components'
import type { RbacResourceModalProps } from '@rbac/factories/RbacFactory'
import { useStrings } from 'framework/strings'
import { useGetUserGroupAggregateList, UserGroupAggregateDTO } from 'services/cd-ng'
import { UserGroupColumn } from '@rbac/pages/UserGroups/views/UserGroupsListView'
 
type UserGroupAggregate = UserGroupAggregateDTO & { identifier: string }
 
const RenderColumnUserGroup: Renderer<CellProps<UserGroupAggregate>> = ({ row }) => {
  const data = row.original.userGroupDTO
  return UserGroupColumn(data)
}
 
const UserGroupsResourceModalBody: React.FC<RbacResourceModalProps> = ({
  searchTerm,
  onSelectChange,
  selectedData,
  resourceScope
}) => {
  const { accountIdentifier, orgIdentifier, projectIdentifier } = resourceScope
  const [page, setPage] = useState(0)
  const { getString } = useStrings()
  const { data, loading } = useGetUserGroupAggregateList({
    queryParams: {
      accountIdentifier,
      orgIdentifier,
      projectIdentifier,
      pageIndex: page,
      pageSize: 10,
      searchTerm
    },
    debounce: 300
  })
 
  const userGroups = data?.data?.content?.map(resource => ({
    ...resource,
    identifier: resource.userGroupDTO.identifier
  }))
 
  if (loading) return <PageSpinner />
  return userGroups?.length ? (
    <Container>
      <ResourceHandlerTable<UserGroupAggregate>
        data={userGroups}
        selectedData={selectedData}
        columns={[
          {
            Header: getString('common.userGroup'),
            id: 'name',
            accessor: row => row.userGroupDTO.name,
            width: '95%',
            Cell: RenderColumnUserGroup,
            disableSortBy: true
          }
        ]}
        pagination={{
          itemCount: data?.data?.totalItems || 0,
          pageSize: data?.data?.pageSize || 10,
          pageCount: data?.data?.totalPages || -1,
          pageIndex: data?.data?.pageIndex || 0,
          gotoPage: pageNumber => setPage(pageNumber)
        }}
        onSelectChange={onSelectChange}
      />
    </Container>
  ) : (
    <Layout.Vertical flex={{ align: 'center-center' }} spacing="small">
      <Icon name="resources-icon" size={20} />
      <Text font="medium" color={Color.BLACK}>
        {getString('noData')}
      </Text>
    </Layout.Vertical>
  )
}
 
export default UserGroupsResourceModalBody