fix: Show correct 'no results' message on workspace filters

f0ssel · f0ssel · commit d487b08068a4 · 2022-06-06T20:40:59.000Z
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
@@ -23,7 +23,7 @@ describe("WorkspacesPage", () => {
     render(<WorkspacesPage />)
 
     // Then
-    await screen.findByText(Language.emptyMessage)
+    await screen.findByText(Language.emptyCreateWorkspaceMessage)
   })
 
   it("renders a filled workspaces page", async () => {
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -136,7 +136,11 @@ const WorkspacesPage: FC = () => {
           </Button>
         </Link>
       </Stack>
-      <WorkspacesPageView loading={workspacesState.hasTag("loading")} workspaces={workspacesState.context.workspaces} />
+      <WorkspacesPageView 
+        loading={workspacesState.hasTag("loading")} 
+        workspaces={workspacesState.context.workspaces}  
+        query={workspacesState.context.filter}
+      />
     </Margins>
   )
 }
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -22,17 +22,19 @@ import { getDisplayStatus } from "../../util/workspace"
 dayjs.extend(relativeTime)
 
 export const Language = {
-  createButton: "Create workspace",
-  emptyMessage: "Create your first workspace",
-  emptyDescription: "Start editing your source code and building your software",
+  createWorkspaceButton: "Create workspace",
+  emptyCreateWorkspaceMessage: "Create your first workspace",
+  emptyCreateWorkspaceDescription: "Start editing your source code and building your software",
+  emptyResultsMessage: "No results matched your search",
 }
 
 export interface WorkspacesPageViewProps {
   loading?: boolean
   workspaces?: TypesGen.Workspace[]
+  query?: string
 }
 
-export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, workspaces }) => {
+export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, workspaces, query }) => {
   useStyles()
   const theme: Theme = useTheme()
 
@@ -51,19 +53,31 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
         <TableBody>
           {!workspaces && loading && <TableLoader />}
           {workspaces && workspaces.length === 0 && (
-            <TableRow>
-              <TableCell colSpan={999}>
-                <EmptyState
-                  message={Language.emptyMessage}
-                  description={Language.emptyDescription}
-                  cta={
-                    <Link underline="none" component={RouterLink} to="/workspaces/new">
-                      <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
-                    </Link>
-                  }
-                />
-              </TableCell>
-            </TableRow>
+            <>
+              {query === "owner:me" || query === "" ? (
+                <TableRow>
+                  <TableCell colSpan={999}>
+                    <EmptyState
+                      message={Language.emptyCreateWorkspaceMessage}
+                      description={Language.emptyCreateWorkspaceDescription}
+                      cta={
+                        <Link underline="none" component={RouterLink} to="/workspaces/new">
+                          <Button startIcon={<AddCircleOutline />}>{Language.createWorkspaceButton}</Button>
+                        </Link>
+                      }
+                    />
+                  </TableCell>
+                </TableRow>
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={999}>
+                    <EmptyState
+                      message={Language.emptyResultsMessage}
+                    />
+                  </TableCell>
+                </TableRow>
+              )}
+            </>
           )}
           {workspaces &&
             workspaces.map((workspace) => {

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,11 @@ const WorkspacesPage: FC = () => {`
`136`	`136`	`</Button>`
`137`	`137`	`</Link>`
`138`	`138`	`</Stack>`
`139`		`- <WorkspacesPageView loading={workspacesState.hasTag("loading")} workspaces={workspacesState.context.workspaces} />`
	`139`	`+ <WorkspacesPageView`
	`140`	`+ loading={workspacesState.hasTag("loading")}`
	`141`	`+ workspaces={workspacesState.context.workspaces}`
	`142`	`+ query={workspacesState.context.filter}`
	`143`	`+ />`
`140`	`144`	`</Margins>`
`141`	`145`	`)`
`142`	`146`	`}`