New Pagination component (harness#1638)

* Initial implementation of pagination component

* Update pagination in component references

* Update portal and refactor

* Refactor and remove test values

* Fix type issues

* Fix lint error, Add container query and update pagination docs

* Fix lint error

Author: praneshg239

apps/design-system/src/subjects/stores/labels-store.tsx

@@ -46,7 +46,8 @@ export const LabelsListStore: RepoLabelsListStore = {
       }
     ],
 
-    totalPages: 1,
+    totalItems: 1,
+    pageSize: 10,
     page: 1,
     repo_ref: 'canary',
     space_ref: 'P1org',

apps/design-system/src/subjects/views/connectors/connector-details.tsx

@@ -90,7 +90,8 @@ const ConnectorsDetailsPageWrapper = (): JSX.Element => {
           isLoading={false}
           setSearchQuery={noop}
           currentPage={1}
-          totalPages={1}
+          totalItems={100}
+          pageSize={10}
           goToPage={noop}
         />
       </Tabs.Content>
@@ -100,7 +101,8 @@ const ConnectorsDetailsPageWrapper = (): JSX.Element => {
           isLoading={false}
           activities={mockConnectorActivityList}
           currentPage={1}
-          totalPages={1}
+          totalItems={100}
+          pageSize={10}
           goToPage={noop}
         />
       </Tabs.Content>

apps/design-system/src/subjects/views/connectors/connectors-list.tsx

@@ -57,7 +57,8 @@ const ConnectorsListPageWrapper = (): JSX.Element => {
         onTestConnection={noop}
         onToggleFavoriteConnector={noop}
         currentPage={1}
-        totalPages={5}
+        totalItems={filteredMockConnectorsList.length}
+        pageSize={10}
         goToPage={noop}
         onCreate={noop}
       />

apps/design-system/src/subjects/views/execution-list/execution-list.store.ts

@@ -39,6 +39,7 @@ export const useExecutionListStore = (): IExecutionListStore => ({
   page: 1,
   executions,
   setPage: noop,
-  totalPages: 10,
+  totalItems: 10,
+  pageSize: 10,
   setExecutionsData: noop
 })

apps/design-system/src/subjects/views/pipeline-list/pipeline-list.store.ts

@@ -60,5 +60,6 @@ export const usePipelineListStore = (): IPipelineListStore => ({
   pipelines,
   setPage: noop,
   setPipelinesData: noop,
-  totalPages: 10
+  totalItems: 10,
+  pageSize: 10
 })

apps/design-system/src/subjects/views/pull-request-list/pull-request-list-store.ts

@@ -31,7 +31,8 @@ export const pullRequestListStore: PullRequestListStore = {
       ]
     }
   ],
-  totalPages: 1,
+  totalItems: 10,
+  pageSize: 10,
   page: 1,
   openPullReqs: 1,
   closedPullReqs: 0,

apps/design-system/src/subjects/views/repo-list/repo-list.tsx

@@ -10,7 +10,10 @@ const RepoListWrapper: FC<Partial<RepoListProps>> = props => {
   const useRepoListStore = useCallback(
     () => ({
       ...repoListStore,
-      importToastId: null,
+      totalItems: 100,
+      pageSize: 10,
+      setPaginationFromHeaders: (_?: Headers) => {},
+      importToastId: '',
       setImportToastId: noop,
       updateRepository: noop,
       setPage: noop,
@@ -31,6 +34,7 @@ const RepoListWrapper: FC<Partial<RepoListProps>> = props => {
         isError={false}
         searchQuery=""
         setSearchQuery={noop}
+        setQueryPage={noop}
         {...props}
       />
     </>

apps/design-system/src/subjects/views/repo-webhooks-list/repo-webhooks-list-store.ts

@@ -49,6 +49,9 @@ export const repoWebhooksListStore: RepoWebhooksListStore = {
     setPreSetWebhookData: (_: CreateWebhookFormFields | null) => {},
     executionId: null,
     setExecutionId: (_: number | null) => {},
-    updateExecution: () => {}
+    updateExecution: () => {},
+    pageSize: 10,
+    setPaginationFromHeaders: (_?: Headers) => {},
+    totalItems: 10
   })
 }

apps/design-system/src/subjects/views/secrets/secrets-list.tsx

@@ -22,7 +22,8 @@ const SecretsListPage = (): JSX.Element => (
     onEditSecret={noop}
     onDeleteSecret={noop}
     currentPage={1}
-    totalPages={5}
+    totalItems={10}
+    pageSize={10}
     goToPage={noop}
     onCreate={noop}
   />

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

@@ -49,7 +49,8 @@ const useMemberListStore = () => {
     spaceId: '',
     page: 1,
     setPage: noop,
-    totalPages: 10
+    totalItems: 10,
+    pageSize: 10
   }
 }