fixed virtualization for groups and users tables

pluralsh · Jun 4, 2024 · 04ca49d · 04ca49d
1 parent d4a4647
commit 04ca49d
Show file tree

Hide file tree

Showing 19 changed files with 367 additions and 362 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -46,7 +46,7 @@
     "@nivo/pie": "0.83.0",
     "@nivo/radial-bar": "0.83.0",
     "@nivo/tooltip": "0.83.0",
-    "@pluralsh/design-system": "3.40.1",
+    "@pluralsh/design-system": "^3.41.0",
     "@react-hooks-library/core": "0.6.0",
     "@tanstack/react-virtual": "3.0.1",
     "anser": "2.1.1",

diff --git a/assets/src/components/account/Account.tsx b/assets/src/components/account/Account.tsx
@@ -15,13 +15,17 @@ import { ResponsiveLayoutSidenavContainer } from 'components/utils/layout/Respon
 import { LoginContext } from 'components/contexts'
 import { ResponsiveLayoutPage } from 'components/utils/layout/ResponsiveLayoutPage'
 import { useTheme } from 'styled-components'
+import { ConsoleConfiguration, User } from 'generated/graphql'
 
-const getDirectory = (me, configuration) => [
+const getDirectory = (
+  me: User,
+  configuration: Nullable<ConsoleConfiguration>
+) => [
   { path: 'users', label: 'Users', enabled: true },
   { path: 'groups', label: 'Groups', enabled: true },
-  { path: 'roles', label: 'Roles', enabled: true },
+  { path: 'roles', label: 'Roles', enabled: !configuration?.byok },
   { path: 'personas', label: 'Personas', enabled: true },
-  { path: 'webhooks', label: 'Webhooks', enabled: true },
+  { path: 'webhooks', label: 'Webhooks', enabled: !configuration?.byok },
   {
     path: 'vpn',
     label: 'VPN clients',
@@ -41,7 +45,7 @@ const breadcrumbs: Breadcrumb[] = [{ label: 'account', url: '/account' }]
 export default function Account() {
   const theme = useTheme()
   const tabStateRef = useRef<any>(null)
-  const { me, configuration } = useContext<any>(LoginContext)
+  const { me, configuration } = useContext(LoginContext)
   const { pathname } = useLocation()
   const pathPrefix = '/account'
 

diff --git a/assets/src/components/account/groups/Group.tsx b/assets/src/components/account/groups/Group.tsx
diff --git a/assets/src/components/account/groups/GroupEdit.tsx b/assets/src/components/account/groups/GroupEdit.tsx
@@ -140,6 +140,7 @@ export function EditGroupMembers({
         <GroupMembers
           group={group}
           edit
+          skip={!open}
         />
       </Flex>
     </Modal>

diff --git a/assets/src/components/account/groups/GroupMembers.tsx b/assets/src/components/account/groups/GroupMembers.tsx
@@ -9,11 +9,16 @@ import { List } from '../../utils/List'
 
 import GroupMember from './GroupMember'
 
-export default function GroupMembers({ group, edit = false }: any) {
+export default function GroupMembers({
+  group,
+  edit = false,
+  skip = false,
+}: any) {
   const [listRef, setListRef] = useState<any>(null)
   const { data, loading, fetchMore } = useGroupMembersQuery({
     variables: { id: group.id },
     fetchPolicy: 'network-only',
+    skip,
   })
 
   if (!data?.groupMembers) return null

diff --git a/assets/src/components/account/groups/GroupView.tsx b/assets/src/components/account/groups/GroupView.tsx
@@ -10,7 +10,10 @@ export default function GroupView({ group, open, onClose }: any) {
       onClose={onClose}
       portal
     >
-      <GroupMembers group={group} />
+      <GroupMembers
+        group={group}
+        skip={!open}
+      />
     </Modal>
   )
 }
diff --git a/assets/src/components/account/groups/Groups.tsx b/assets/src/components/account/groups/Groups.tsx
@@ -1,17 +1,19 @@
 import { useContext, useState } from 'react'
 import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
-import { Flex } from 'honorable'
 import BillingLegacyUserBanner from 'components/billing/BillingLegacyUserBanner'
 import BillingFeatureBlockBanner from 'components/billing/BillingFeatureBlockBanner'
 import SubscriptionContext from 'components/contexts/SubscriptionContext'
 
-import { List } from '../../utils/List'
+import { Card } from '@pluralsh/design-system'
+
+import { useTheme } from 'styled-components'
 
 import { GroupsList } from './GroupsList'
 import GroupCreate from './GroupCreate'
 import GroupSearchHeader from './GroupsSearchHeader'
 
 export function Groups() {
+  const theme = useTheme()
   const [q, setQ] = useState('')
   const { availableFeatures } = useContext(SubscriptionContext)
   const isAvailable = !!availableFeatures?.userManagement
@@ -22,27 +24,30 @@ export function Groups() {
       heading="Groups"
       headingContent={<GroupCreate q={q} />}
     >
-      <Flex
-        direction="column"
-        height="100%"
-      >
-        <BillingLegacyUserBanner feature="groups" />
-        {isAvailable ? (
-          <List height="100%">
+      <BillingLegacyUserBanner feature="groups" />
+      {isAvailable ? (
+        <div
+          css={{
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+          }}
+        >
+          <Card css={{ marginBottom: theme.spacing.small }}>
             <GroupSearchHeader
               q={q}
               setQ={setQ}
             />
-            <GroupsList q={q} />
-          </List>
-        ) : (
-          <BillingFeatureBlockBanner
-            feature="groups"
-            description="Organize your users into groups to more easily apply permissions to sub-sections of your team. e.g. ops, end-users, and admins."
-            placeholderImageURL="/placeholder-groups.png"
-          />
-        )}
-      </Flex>
+          </Card>
+          <GroupsList q={q} />
+        </div>
+      ) : (
+        <BillingFeatureBlockBanner
+          feature="groups"
+          description="Organize your users into groups to more easily apply permissions to sub-sections of your team. e.g. ops, end-users, and admins."
+          placeholderImageURL="/placeholder-groups.png"
+        />
+      )}
     </ScrollablePage>
   )
 }