chore(release): Test v7.46.0 (#10188)

Signed-off-by: Matt Krick <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Matt Krick <[email protected]> Co-authored-by: parabol-release-bot[bot] <150284312+parabol-release-bot[bot]@users.noreply.github.com> Co-authored-by: Georg Bremer <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: snyk-bot <[email protected]> Co-authored-by: GitHub Action <[email protected]> Co-authored-by: Nick O'Ferrall <[email protected]> Co-authored-by: Bruce Tian <[email protected]> Co-authored-by: Rafa <[email protected]> Co-authored-by: Jordan Husney <[email protected]> Co-authored-by: Terry Acker <[email protected]> Co-authored-by: Rafael Romero <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: github-actions <[email protected]>
ParabolInc · Sep 5, 2024 · a9e1516 · a9e1516
1 parent 65192ad
commit a9e1516
Show file tree

Hide file tree

Showing 13 changed files with 224 additions and 90 deletions.
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,3 +1,3 @@
 {
-  ".": "7.45.2"
+  ".": "7.46.0"
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,19 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 This CHANGELOG follows conventions [outlined here](http://keepachangelog.com/).
 
+## [7.46.0](https://github.com/ParabolInc/parabol/compare/v7.45.2...v7.46.0) (2024-09-04)
+
+
+### Added
+
+* **orgAdmin:** search in org members page ([#10187](https://github.com/ParabolInc/parabol/issues/10187)) ([968452e](https://github.com/ParabolInc/parabol/commit/968452e28003b188f6706f10b005d84508e11634))
+* **orgAdmins:** Make org members view sortable ([#10146](https://github.com/ParabolInc/parabol/issues/10146)) ([97bb948](https://github.com/ParabolInc/parabol/commit/97bb948330e1e57a331113e267ec5965a84ea6e4))
+
+
+### Changed
+
+* **deps:** bump micromatch from 4.0.5 to 4.0.8 ([#10164](https://github.com/ParabolInc/parabol/issues/10164)) ([70f69ce](https://github.com/ParabolInc/parabol/commit/70f69ce039f9550c52f391c0f556919a7fe4589b))
+
 ## [7.45.2](https://github.com/ParabolInc/parabol/compare/v7.45.1...v7.45.2) (2024-08-29)
 
 

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "description": "An open-source app for building smarter, more agile teams.",
   "author": "Parabol Inc. <[email protected]> (http://github.com/ParabolInc)",
   "license": "AGPL-3.0",
-  "version": "7.45.2",
+  "version": "7.46.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ParabolInc/parabol"

diff --git a/packages/chronos/package.json b/packages/chronos/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chronos",
-  "version": "7.45.2",
+  "version": "7.46.0",
   "description": "A cron job scheduler",
   "author": "Matt Krick <[email protected]>",
   "homepage": "https://github.com/ParabolInc/parabol/tree/master/packages/chronos#readme",
@@ -25,6 +25,6 @@
   },
   "dependencies": {
     "cron": "^2.3.1",
-    "parabol-server": "7.45.2"
+    "parabol-server": "7.46.0"
   }
 }
diff --git a/packages/client/components/OrgAdminActionMenu.tsx b/packages/client/components/OrgAdminActionMenu.tsx
@@ -1,5 +1,4 @@
 import {MoreVert} from '@mui/icons-material'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
@@ -123,9 +122,14 @@ export const OrgAdminActionMenu = (props: Props) => {
         )}
         {isSelf &&
           ((isOrgAdmin && isViewerLastOrgAdmin) || (isBillingLeader && isViewerLastRole)) && (
-            <DropdownMenu.Label className='select-none p-2'>
+            <MenuItem
+              onClick={() => {
+                window.location.href =
+                  'mailto:[email protected]?subject=Request to be removed from organization'
+              }}
+            >
               {'Contact [email protected] to be removed'}
-            </DropdownMenu.Label>
+            </MenuItem>
           )}
       </MenuContent>
     </Menu>

diff --git a/packages/client/modules/userDashboard/components/OrgMembers/OrgMembers.tsx b/packages/client/modules/userDashboard/components/OrgMembers/OrgMembers.tsx
@@ -1,22 +1,16 @@
-import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
 import type {Parser as JSON2CSVParser} from 'json2csv'
 import Parser from 'json2csv/lib/JSON2CSVParser' // only grab the sync parser
-import React from 'react'
+import React, {useCallback, useMemo, useState} from 'react'
 import {PreloadedQuery, usePaginationFragment, usePreloadedQuery} from 'react-relay'
 import {OrgMembersPaginationQuery} from '~/__generated__/OrgMembersPaginationQuery.graphql'
 import {OrgMembersQuery} from '~/__generated__/OrgMembersQuery.graphql'
 import {OrgMembers_viewer$key} from '~/__generated__/OrgMembers_viewer.graphql'
+import User from '../../../../../server/database/types/User'
 import ExportToCSVButton from '../../../../components/ExportToCSVButton'
-import Panel from '../../../../components/Panel/Panel'
-import {ElementWidth} from '../../../../types/constEnums'
 import {APP_CORS_OPTIONS} from '../../../../types/cors'
 import OrgMemberRow from '../OrgUserRow/OrgMemberRow'
 
-const StyledPanel = styled(Panel)({
-  maxWidth: ElementWidth.PANEL_WIDTH
-})
-
 interface Props {
   queryRef: PreloadedQuery<OrgMembersQuery>
 }
@@ -50,6 +44,7 @@ const OrgMembers = (props: Props) => {
                   user {
                     preferredName
                     email
+                    lastSeenAt
                   }
                   ...OrgMemberRow_organizationUser
                 }
@@ -70,6 +65,59 @@ const OrgMembers = (props: Props) => {
   const {organization} = viewer
   if (!organization) return null
   const {organizationUsers, name: orgName, isBillingLeader} = organization
+  const billingLeaderCount = organizationUsers.edges.reduce(
+    (count, {node}) =>
+      ['BILLING_LEADER', 'ORG_ADMIN'].includes(node.role ?? '') ? count + 1 : count,
+    0
+  )
+  const orgAdminCount = organizationUsers.edges.reduce(
+    (count, {node}) => (['ORG_ADMIN'].includes(node.role ?? '') ? count + 1 : count),
+    0
+  )
+  const [sortBy, setSortBy] = useState<keyof User>('lastSeenAt')
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
+  const [searchInput, setSearchInput] = useState('')
+
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchInput(e.target.value)
+  }, [])
+
+  const filteredOrgUsers = useMemo(() => {
+    const cleanedSearchInput = searchInput.toLowerCase().trim()
+    return organizationUsers.edges
+      .map(({node}) => node)
+      .filter(
+        (user) =>
+          user.user.preferredName.toLowerCase().includes(cleanedSearchInput) ||
+          user.user.email.toLowerCase().includes(cleanedSearchInput)
+      )
+  }, [organizationUsers.edges, searchInput])
+
+  const finalOrgUsers = useMemo(() => {
+    return [...filteredOrgUsers].sort((a, b) => {
+      if (sortBy === 'lastSeenAt') {
+        const aDate = a.user.lastSeenAt ? new Date(a.user.lastSeenAt) : new Date(0)
+        const bDate = b.user.lastSeenAt ? new Date(b.user.lastSeenAt) : new Date(0)
+        return sortDirection === 'asc'
+          ? aDate.getTime() - bDate.getTime()
+          : bDate.getTime() - aDate.getTime()
+      } else if (sortBy === 'preferredName') {
+        return sortDirection === 'asc'
+          ? a.user.preferredName.localeCompare(b.user.preferredName)
+          : b.user.preferredName.localeCompare(a.user.preferredName)
+      }
+      return 0
+    })
+  }, [filteredOrgUsers, sortBy, sortDirection])
+
+  const handleSort = (column: keyof User) => {
+    if (sortBy === column) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortBy(column)
+      setSortDirection('asc')
+    }
+  }
 
   const exportToCSV = async () => {
     const rows = organizationUsers.edges.map((orgUser, idx) => {
@@ -99,24 +147,72 @@ const OrgMembers = (props: Props) => {
   }
 
   return (
-    <StyledPanel
-      label='Organization Members'
-      controls={
-        isBillingLeader && (
-          <ExportToCSVButton handleClick={exportToCSV} corsOptions={APP_CORS_OPTIONS} />
-        )
-      }
-    >
-      {organizationUsers.edges.map(({node: organizationUser}) => {
-        return (
-          <OrgMemberRow
-            key={organizationUser.id}
-            organizationUser={organizationUser}
-            organization={organization}
-          />
-        )
-      })}
-    </StyledPanel>
+    <div className='max-w-4xl pb-4'>
+      <div className='flex items-center justify-start py-1'>
+        <div>
+          <h1 className='text-2xl font-semibold leading-7'>Members</h1>
+        </div>
+        <div className='ml-auto'>
+          {isBillingLeader && (
+            <ExportToCSVButton handleClick={exportToCSV} corsOptions={APP_CORS_OPTIONS} />
+          )}
+        </div>
+      </div>
+
+      <div className='mb-4'>
+        <input
+          type='text'
+          placeholder='Search by name or email'
+          value={searchInput}
+          onChange={handleSearchChange}
+          className='focus:border-blue-500 focus:ring-blue-500 w-full rounded-md border border-slate-300 px-3 py-2 focus:outline-none focus:ring-1'
+        />
+      </div>
+
+      <div className='divide-y divide-slate-300 overflow-hidden rounded-md border border-slate-300 bg-white shadow-sm'>
+        <div className='bg-slate-100 px-4 py-2'>
+          <div className='flex w-full justify-between'>
+            <div className='flex items-center font-bold'>
+              {organizationUsers.edges.length} total
+            </div>
+          </div>
+        </div>
+        <div className='w-full overflow-x-auto px-4'>
+          <table className='w-full table-fixed border-collapse md:table-auto'>
+            <thead>
+              <tr className='border-b border-slate-300'>
+                <th
+                  className='w-[70%] cursor-pointer p-3 text-left font-semibold'
+                  onClick={() => handleSort('preferredName')}
+                >
+                  User
+                  {sortBy === 'preferredName' && (sortDirection === 'asc' ? ' ▲' : ' ▼')}
+                </th>
+                <th
+                  className='w-[20%] cursor-pointer p-3 text-left font-semibold'
+                  onClick={() => handleSort('lastSeenAt')}
+                >
+                  Last Seen
+                  {sortBy === 'lastSeenAt' && (sortDirection === 'asc' ? ' ▲' : ' ▼')}
+                </th>
+                <th className='w-[20%] p-3 text-left font-semibold'></th>
+              </tr>
+            </thead>
+            <tbody>
+              {finalOrgUsers.map((organizationUser) => (
+                <OrgMemberRow
+                  key={organizationUser.id}
+                  billingLeaderCount={billingLeaderCount}
+                  orgAdminCount={orgAdminCount}
+                  organizationUser={organizationUser}
+                  organization={organization}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
   )
 }