refactor(console): inline the search filter in the user table (#2486)

packages/console/src/pages/Users/index.module.scss

@@ -1,11 +1,20 @@
 @use '@/scss/underscore' as _;
 
 .filter {
-  margin: _.unit(4) 0;
+  padding: _.unit(3);
+  background-color: var(--color-layer-1);
+  border-bottom: 1px solid var(--color-divider);
+  border-radius: 12px 12px 0 0;
 }
 
-.tableContainer {
-  margin-top: 0;
+.tableLayout {
+  display: flex;
+  flex-direction: column;
+
+  .tableContainer {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 }
 
 .pagination {

packages/console/src/pages/Users/index.tsx

@@ -30,6 +30,8 @@ import * as styles from './index.module.scss';
 
 const pageSize = 20;
 
+const userTableColumn = 3;
+
 const Users = () => {
   const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -75,21 +77,22 @@ const Users = () => {
           />
         </Modal>
       </div>
-      <div className={styles.filter}>
-        <Search
-          defaultValue={keyword}
-          isClearable={Boolean(keyword)}
-          onSearch={(value) => {
-            setQuery(value ? { search: value } : {});
-          }}
-          onClearSearch={() => {
-            setQuery({});
-          }}
-        />
-      </div>
-      <div className={classNames(resourcesStyles.table, styles.tableContainer)}>
-        <div className={tableStyles.scrollable}>
-          <table className={classNames(!data && tableStyles.empty)}>
+
+      <div className={classNames(resourcesStyles.table, styles.tableLayout)}>
+        <div className={styles.filter}>
+          <Search
+            defaultValue={keyword}
+            isClearable={Boolean(keyword)}
+            onSearch={(value) => {
+              setQuery(value ? { search: value } : {});
+            }}
+            onClearSearch={() => {
+              setQuery({});
+            }}
+          />
+        </div>
+        <div className={classNames(tableStyles.scrollable, styles.tableContainer)}>
+          <table className={conditional(!data && tableStyles.empty)}>
             <colgroup>
               <col className={styles.userName} />
               <col />
@@ -105,14 +108,14 @@ const Users = () => {
             <tbody>
               {!data && error && (
                 <TableError
-                  columns={3}
+                  columns={userTableColumn}
                   content={error.body?.message ?? error.message}
                   onRetry={async () => mutate(undefined, true)}
                 />
               )}
-              {isLoading && <TableLoading columns={3} />}
+              {isLoading && <TableLoading columns={userTableColumn} />}
               {users?.length === 0 && (
-                <TableEmpty columns={3}>
+                <TableEmpty columns={userTableColumn}>
                   <Button
                     title="users.create"
                     type="outline"