shift import button to search row

Author: selfcontained

components/dashboard/src/components/Header.tsx

@@ -8,11 +8,10 @@ import { useLocation } from "react-router";
 import { useDocumentTitle } from "../hooks/use-document-title";
 import { Separator } from "./Separator";
 import TabMenuItem from "./TabMenuItem";
-import { Heading1, Subheading } from "@podkit/typography/Headings";
+import { PageHeading } from "@podkit/layout/PageHeading";
 
 export interface HeaderProps {
     title: string;
-    complexTitle?: React.ReactElement;
     subtitle: string | React.ReactElement;
     tabs?: TabEntry[];
 }
@@ -28,16 +27,8 @@ export default function Header(p: HeaderProps) {
     useDocumentTitle(`${p.title}`);
     return (
         <div className="app-container border-gray-200 dark:border-gray-800">
-            <div className="flex pb-8 pt-6">
-                <div className="w-full">
-                    {p.complexTitle ? p.complexTitle : <Heading1 tracking="tight">{p.title}</Heading1>}
-                    {typeof p.subtitle === "string" ? (
-                        <Subheading tracking="wide">{p.subtitle}</Subheading>
-                    ) : (
-                        p.subtitle
-                    )}
-                </div>
-            </div>
+            <PageHeading title={p.title} subtitle={p.subtitle} />
+
             <nav className="flex">
                 {p.tabs?.map((entry) => (
                     <TabMenuItem

components/dashboard/src/components/podkit/layout/PageHeading.tsx

@@ -8,18 +8,16 @@ import { Heading1, Subheading } from "@podkit/typography/Headings";
 import { FC, ReactNode } from "react";
 
 type PageHeadingProps = {
-    title: string;
-    subtitle?: string;
-    action?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
 };
-export const PageHeading: FC<PageHeadingProps> = ({ title, subtitle, action }) => {
+export const PageHeading: FC<PageHeadingProps> = ({ title, subtitle }) => {
     return (
         <div className="flex flex-row flex-wrap justify-between py-8 gap-2">
             <div>
                 <Heading1>{title}</Heading1>
                 {subtitle && <Subheading>{subtitle}</Subheading>}
             </div>
-            {action && action}
         </div>
     );
 };

components/dashboard/src/repositories/list/RepositoryList.tsx

@@ -8,7 +8,6 @@ import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { useListConfigurations } from "../../data/configurations/configuration-queries";
 import { PageHeading } from "@podkit/layout/PageHeading";
-import { Button } from "@podkit/buttons/Button";
 import { useDocumentTitle } from "../../hooks/use-document-title";
 import { ImportRepositoryModal } from "../create/ImportRepositoryModal";
 import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
@@ -88,9 +87,6 @@ const RepositoryListPage: FC = () => {
                 <PageHeading
                     title="Imported repositories"
                     subtitle="Configure and refine the experience of working with a repository in Gitpod"
-                    action={
-                        showTable && <Button onClick={() => setShowCreateProjectModal(true)}>Import Repository</Button>
-                    }
                 />
 
                 {isLoading && <LoadingState />}
@@ -106,6 +102,7 @@ const RepositoryListPage: FC = () => {
                         isFetchingNextPage={isFetchingNextPage}
                         hasNextPage={!!hasNextPage}
                         hasMoreThanOnePage={hasMoreThanOnePage}
+                        onImport={() => setShowCreateProjectModal(true)}
                         onLoadNextPage={() => fetchNextPage()}
                         onSearchTermChange={setSearchTerm}
                         onSort={handleSort}

components/dashboard/src/repositories/list/RepositoryTable.tsx

@@ -15,6 +15,7 @@ import { Subheading } from "@podkit/typography/Headings";
 import { cn } from "@podkit/lib/cn";
 import { SortableTableHead, TableSortOrder } from "@podkit/tables/SortableTable";
 import { LoadingState } from "@podkit/loading/LoadingState";
+import { Button } from "@podkit/buttons/Button";
 
 type Props = {
     configurations: Configuration[];
@@ -25,6 +26,7 @@ type Props = {
     hasMoreThanOnePage: boolean;
     isSearching: boolean;
     isFetchingNextPage: boolean;
+    onImport: () => void;
     onSearchTermChange: (val: string) => void;
     onLoadNextPage: () => void;
     onSort: (columnName: string, direction: TableSortOrder) => void;
@@ -39,6 +41,7 @@ export const RepositoryTable: FC<Props> = ({
     hasMoreThanOnePage,
     isSearching,
     isFetchingNextPage,
+    onImport,
     onSearchTermChange,
     onLoadNextPage,
     onSort,
@@ -47,7 +50,7 @@ export const RepositoryTable: FC<Props> = ({
         <>
             {/* Search/Filter bar */}
             <div className="flex flex-row flex-wrap justify-between items-center">
-                <div className="flex flex-row flex-wrap gap-2 items-center">
+                <div className="flex flex-row flex-wrap items-center">
                     {/* TODO: Add search icon on left and decide on pulling Inputs into podkit */}
                     <TextInput
                         className="w-80"
@@ -57,8 +60,10 @@ export const RepositoryTable: FC<Props> = ({
                     />
                     {/* TODO: Add prebuild status filter dropdown */}
                 </div>
+
+                <Button onClick={onImport}>Import Repository</Button>
             </div>
-            <div className="relative w-full overflow-auto mt-2">
+            <div className="relative w-full overflow-auto mt-4">
                 {configurations.length > 0 ? (
                     <Table>
                         <TableHeader>