feat(platform): artifact selector name filter

perfsee · Oct 13, 2022 · 30662fd · 30662fd
1 parent 73585d2
commit 30662fd
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/packages/platform/src/modules/bundle/detail/index.tsx b/packages/platform/src/modules/bundle/detail/index.tsx
@@ -117,6 +117,7 @@ export const BundleReportContainer = memo<RouteComponentProps<{ name: string; bu
 
               {artifactSelectVisible && (
                 <ArtifactSelect
+                  defaultArtifactName={state.current.name}
                   currentArtifactId={state.current.id}
                   onSelect={handleSelectArtifact}
                   onDismiss={hideArtifactSelect}

diff --git a/packages/platform/src/modules/components/artifact-select/index.tsx b/packages/platform/src/modules/components/artifact-select/index.tsx
@@ -23,6 +23,7 @@ import { FC, useState, useEffect, useMemo, useCallback } from 'react'
 import { Pagination, Table, TableColumnProps } from '@perfsee/components'
 
 import { useProject } from '../../shared'
+import { ArtifactNameSelector } from '../bundle-property'
 
 import { ArtifactSelectModule, Artifact } from './module'
 import {
@@ -39,6 +40,7 @@ import {
 type Props = {
   currentArtifactId?: number
   description?: React.ReactNode
+  defaultArtifactName?: string
   onSelect?: (payload: ArtifactSelectEventPayload) => void
   onDismiss?: () => void
 }
@@ -50,11 +52,12 @@ export type ArtifactSelectEventPayload = {
 const PAGE_SIZE = 12
 
 export const ArtifactSelect: FC<Props> = (props) => {
-  const { currentArtifactId, description, onSelect, onDismiss } = props
+  const { currentArtifactId, description, defaultArtifactName, onSelect, onDismiss } = props
 
   const [state, dispatcher] = useModule(ArtifactSelectModule)
   const project = useProject()
   const [page, setPage] = useState(1)
+  const [artifactName, setArtifactName] = useState(defaultArtifactName)
 
   const handleSelect = useCallback(
     (artifact: Artifact) => () => {
@@ -128,21 +131,24 @@ export const ArtifactSelect: FC<Props> = (props) => {
 
   useEffect(() => {
     if (project) {
-      dispatcher.fetchArtifacts({ projectId: project.id, pageNumber: page - 1, pageSize: PAGE_SIZE })
+      dispatcher.fetchArtifacts({ projectId: project.id, pageNumber: page - 1, pageSize: PAGE_SIZE, artifactName })
     }
-  }, [dispatcher, page, project])
+  }, [artifactName, dispatcher, page, project])
 
   useEffect(() => dispatcher.reset(), [dispatcher])
 
   return (
     <Modal isOpen={true} styles={{ scrollableContent: { overflow: 'visible' } }} onDismiss={onDismiss}>
       <Header>
         <span>Select baseline</span>
+
+        <ArtifactNameSelector defaultArtifactName={defaultArtifactName} onChange={setArtifactName} />
         <IconWrapper onClick={onDismiss}>
           <CloseOutlined />
         </IconWrapper>
       </Header>
       {description && <Description>{description}</Description>}
+
       <TableWrap>
         <Table
           columns={columns}

diff --git a/packages/platform/src/modules/components/artifact-select/module.ts b/packages/platform/src/modules/components/artifact-select/module.ts
@@ -48,14 +48,17 @@ export class ArtifactSelectModule extends EffectModule<State> {
   }
 
   @Effect()
-  fetchArtifacts(payload$: Observable<{ projectId: string; pageNumber: number; pageSize: number }>) {
+  fetchArtifacts(
+    payload$: Observable<{ projectId: string; pageNumber: number; pageSize: number; artifactName?: string }>,
+  ) {
     return payload$.pipe(
-      switchMap(({ projectId, pageNumber, pageSize }) =>
+      switchMap(({ projectId, pageNumber, pageSize, artifactName }) =>
         this.client
           .query({
             query: artifactsQuery,
             variables: {
               projectId,
+              name: artifactName,
               pagination: {
                 first: pageSize,
                 skip: pageNumber * pageSize,

diff --git a/packages/platform/src/modules/components/artifact-select/style.tsx b/packages/platform/src/modules/components/artifact-select/style.tsx
@@ -26,6 +26,10 @@ export const Header = styled.div(({ theme }) => ({
   fontSize: '24px',
   fontWeight: 500,
   minWidth: '500px',
+  gap: '16px',
+  '> *:first-child': {
+    flexGrow: 1,
+  },
 }))
 
 export const Description = styled.div({