tracker/frontend/src/admin/AdminPanel.js at master · bankystack/tracker · GitHub

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
90
91
import React from 'react'
import { Divider, Stack, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
import { Trans } from '@lingui/macro'
import { array, bool, string } from 'prop-types'
import { ErrorBoundary } from 'react-error-boundary'

import { AdminDomains } from './AdminDomains'
import { UserList } from './UserList'

import { ErrorFallbackMessage } from '../components/ErrorFallbackMessage'
import { AuditLogTable } from './AuditLogTable'
import { TourComponent } from '../userOnboarding/components/TourComponent'
import { DomainTagsList } from './DomainTagsList'
import { ABTestVariant, ABTestWrapper } from '../app/ABTestWrapper'

export function AdminPanel({ activeMenu, orgSlug, permission, orgId, verified, availableTags }) {
  return (
    <Stack spacing={10}>
      <TourComponent />
      <Tabs isFitted variant="enclosed-colored">
        <TabList mb="2">
          <Tab borderTopWidth="4px" className="admin-domains-tab">
            <Trans>Domains</Trans>
          </Tab>
          <Tab borderTopWidth="4px" className="admin-users-tab">
            <Trans>Users</Trans>
          </Tab>
          <Tab borderTopWidth="4px" className="admin-activity-tab">
            <Trans>Activity</Trans>
          </Tab>
          <ABTestWrapper insiderVariantName="B">
            <ABTestVariant name="B">
              <Tab borderTopWidth="4px" className="admin-activity-tab">
                <Trans>Tags</Trans>
              </Tab>
            </ABTestVariant>
          </ABTestWrapper>
        </TabList>

        <TabPanels>
          <TabPanel>
            <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
              <AdminDomains
                orgSlug={orgSlug}
                orgId={orgId}
                verified={verified}
                permission={permission}
                availableTags={availableTags}
              />
            </ErrorBoundary>
          </TabPanel>
          <TabPanel>
            <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
              <UserList
                includePending={true}
                activeMenu={activeMenu}
                permission={permission}
                orgSlug={orgSlug}
                orgId={orgId}
              />
            </ErrorBoundary>
          </TabPanel>
          <TabPanel>
            <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
              <AuditLogTable orgId={orgId} />
            </ErrorBoundary>
          </TabPanel>
          <ABTestWrapper insiderVariantName="B">
            <ABTestVariant name="B">
              <TabPanel>
                <ErrorBoundary FallbackComponent={ErrorFallbackMessage}>
                  <Divider borderColor="gray.50" />
                  <DomainTagsList orgId={orgId} createOwnership="ORG" />
                </ErrorBoundary>
              </TabPanel>
            </ABTestVariant>
          </ABTestWrapper>
        </TabPanels>
      </Tabs>
    </Stack>
  )
}

AdminPanel.propTypes = {
  activeMenu: string,
  orgSlug: string.isRequired,
  permission: string.isRequired,
  availableTags: array,
  orgId: string,
  verified: bool,
}