fix: fix members page (harness#724)

apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx

@@ -1,13 +1,31 @@
-import { PropsWithChildren } from 'react'
+import { FC, PropsWithChildren } from 'react'
 import { Route } from 'react-router-dom'
 
+import { ProjectSettingsPage } from '@harnessio/ui/views'
+
 import RootViewWrapper from './root-view-wrapper'
 
-export const ProjectSettingsWrapper: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
+const Layout = () => {
+  return (
+    <div className="bg-background-1 sticky top-[55px] z-40">
+      <ProjectSettingsPage />
+    </div>
+  )
+}
+
+export const ProjectSettingsWrapper: FC<PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <>
       <RootViewWrapper asChild>
-        <Route path="*" element={children}></Route>
+        <Route
+          path="*"
+          element={
+            <>
+              <Layout />
+              {children}
+            </>
+          }
+        />
       </RootViewWrapper>
     </>
   )

apps/design-system/src/pages/view-preview/view-preview.tsx

@@ -25,9 +25,10 @@ import RepoListWrapper from '@subjects/views/repo-list/repo-list'
 import RepoSummaryViewWrapper from '@subjects/views/repo-summary/repo-summary'
 import { RepoWebhooksCreate } from '@subjects/views/repo-webhooks-create/repo-webhooks-list'
 import { RepoWebhooksList } from '@subjects/views/repo-webhooks-list/repo-webhooks-list'
+import { SpaceSettingsMembers } from '@subjects/views/space-settings-members/space-settings-members'
 import { useTranslationsStore } from '@utils/viewUtils'
 
-import { NotFoundPage, ProjectSettingsPage } from '@harnessio/ui/views'
+import { NotFoundPage } from '@harnessio/ui/views'
 
 import { CommitDetailsDiffViewWrapper } from './commit-details-diff-view-wrapper'
 import CommitDetailsViewWrapper from './commit-details-view-wrapper'
@@ -166,11 +167,15 @@ export const viewPreviews: Record<string, ReactNode> = {
       </RepoSettingsViewWrapper>
     </RepoViewWrapper>
   ),
-  'labels-list-page': (
+  'space-settings-labels': (
     <ProjectSettingsWrapper>
-      <ProjectSettingsPage />
       <ProjectLabelsList />
     </ProjectSettingsWrapper>
+  ),
+  'space-settings-members': (
+    <ProjectSettingsWrapper>
+      <SpaceSettingsMembers />
+    </ProjectSettingsWrapper>
   )
 }
 

apps/design-system/src/subjects/views/space-settings-members/space-settings-members.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+
+import { noop, useTranslationsStore } from '@utils/viewUtils'
+
+import { DeleteAlertDialog } from '@harnessio/ui/components'
+import { PrincipalData, ProjectMemberListView } from '@harnessio/ui/views'
+
+const usePrincipalListStore = () => {
+  return {
+    principalList: [
+      {
+        uid: 'test1',
+        display_name: 'Test 1',
+        email: '[email protected]',
+        avatar_url: ''
+      },
+      {
+        uid: 'test2',
+        display_name: 'Test 2',
+        email: '[email protected]',
+        avatar_url: ''
+      }
+    ],
+    setPrincipalList: (_principals: PrincipalData[]) => {}
+  }
+}
+
+const useMemberListStore = () => {
+  return {
+    memberList: [
+      {
+        display_name: 'Test 1',
+        role: 'space_owner',
+        email: '[email protected]',
+        avatarUrl: '',
+        timestamp: '2 hours ago',
+        uid: 'test1'
+      },
+      {
+        display_name: 'Test 2',
+        role: 'space_owner',
+        email: '[email protected]',
+        avatarUrl: '',
+        timestamp: 'Jan 14, 2025',
+        uid: 'test2'
+      }
+    ],
+    spaceId: '',
+    page: 1,
+    setPage: noop,
+    totalPages: 10
+  }
+}
+
+export const SpaceSettingsMembers = () => {
+  const [deleteMemberId, setDeleteMemberId] = useState<string | null>(null)
+  const [isInviteDialogOpen, setIsInviteDialogOpen] = useState(false)
+  const [principalsSearchQuery, setPrincipalsSearchQuery] = useState('')
+
+  const handleSetDeleteMember = (id: string) => {
+    setDeleteMemberId(id)
+  }
+
+  const handleResetDeleteMember = () => {
+    setDeleteMemberId(null)
+  }
+
+  return (
+    <>
+      <ProjectMemberListView
+        isLoading={false}
+        useTranslationStore={useTranslationsStore}
+        useMemberListStore={useMemberListStore}
+        usePrincipalListStore={usePrincipalListStore}
+        isInvitingMember={false}
+        onSubmit={() => {}}
+        onDeleteHandler={handleSetDeleteMember}
+        isInviteMemberDialogOpen={isInviteDialogOpen}
+        setIsInviteMemberDialogOpen={setIsInviteDialogOpen}
+        searchQuery={null}
+        setSearchQuery={() => {}}
+        onEditMember={() => {}}
+        setPrincipalsSearchQuery={setPrincipalsSearchQuery}
+        principalsSearchQuery={principalsSearchQuery}
+      />
+
+      <DeleteAlertDialog
+        open={deleteMemberId !== null}
+        onClose={handleResetDeleteMember}
+        deleteFn={() => {}}
+        error={null}
+        type="member"
+        identifier={deleteMemberId ?? undefined}
+        isLoading={false}
+        useTranslationStore={useTranslationsStore}
+        withForm
+      />
+    </>
+  )
+}

apps/gitness/src/hooks/use-pagination-query-state-with-store.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+
+import { parseAsInteger, useQueryState } from 'nuqs'
+
+export interface UsePaginationQueryStateWithStoreProps {
+  page: number
+  setPage: (val: number) => void
+}
+
+/**
+ * A hook for working with pagination, useQueryState, and updating entity store values based on pagination.
+ *
+ * @param page - page from store
+ * @param setPage - setPage from store
+ */
+const usePaginationQueryStateWithStore = ({ page, setPage }: UsePaginationQueryStateWithStoreProps) => {
+  const [queryPage, setQueryPage] = useQueryState('page', parseAsInteger.withDefault(1))
+
+  /**
+   * Update query state if store page change
+   */
+  useEffect(() => {
+    setQueryPage(page)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page])
+
+  /**
+   * Set page from query state to store
+   */
+  useEffect(() => {
+    setPage(queryPage)
+  }, [queryPage, setPage])
+
+  return {
+    queryPage,
+    setQueryPage
+  }
+}
+
+export default usePaginationQueryStateWithStore