From f622b1787c3264fe1aefc2c312b312d7f0023430 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 7 Jul 2023 16:23:06 +0800
Subject: [PATCH] refactor: data list filter components (#4182)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.8.x

#### What this PR does / why we need it:

重构 Console 端数据列表的筛选项 UI，并提供全局的筛选列表组件和搜索输入框组件。

> 在此 PR 同时重构了插件列表和用户列表用于验证，其他页面后续提 PR 修改。

<img width="1657" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/ffa42184-46e6-4cb0-b39f-bd7b18869697">

重构之后可以获得：

1. 更好的代码组织。
2. 更好的使用体验。
3. UI 更加容易适配移动端。

#### Which issue(s) this PR fixes:

Fixes #4181

#### Special notes for your reviewer:

需要测试：

1. 测试插件管理和用户管理的数据列表筛选和关键词搜索功能是否正常。

#### Does this PR introduce a user-facing change?

```release-note
重构 Console 端数据列表的筛选项 UI，并提供全局的筛选列表组件和搜索输入框组件。
```
---
 .../src/components/filter/FilterDropdown.vue  |  67 +++++
 console/src/components/input/SearchInput.vue  |  55 +++++
 console/src/locales/en.yaml                   |   4 +-
 console/src/locales/zh-CN.yaml                |   4 +-
 console/src/locales/zh-TW.yaml                |   4 +-
 .../contents/attachments/AttachmentList.vue   |   1 -
 .../modules/contents/comments/CommentList.vue |   1 -
 .../modules/contents/pages/SinglePageList.vue |   1 -
 .../src/modules/contents/posts/PostList.vue   |   1 -
 .../src/modules/system/plugins/PluginList.vue | 231 +++++-------------
 console/src/modules/system/users/UserList.vue | 220 +++++------------
 console/src/setup/setupComponents.ts          |   8 +
 12 files changed, 262 insertions(+), 335 deletions(-)
 create mode 100644 console/src/components/filter/FilterDropdown.vue
 create mode 100644 console/src/components/input/SearchInput.vue

diff --git a/console/src/components/filter/FilterDropdown.vue b/console/src/components/filter/FilterDropdown.vue
new file mode 100644
index 000000000..bc8921297
--- /dev/null
+++ b/console/src/components/filter/FilterDropdown.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { IconArrowDown, VDropdown, VDropdownItem } from "@halo-dev/components";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    items: {
+      label: string;
+      value?: string | boolean | number;
+    }[];
+    label: string;
+    modelValue?: string | boolean | number;
+  }>(),
+  {
+    modelValue: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (
+    event: "update:modelValue",
+    modelValue: string | boolean | number | undefined
+  ): void;
+}>();
+
+const selectedItem = computed(() => {
+  return props.items.find((item) => item.value === props.modelValue);
+});
+
+function handleSelect(item: {
+  label: string;
+  value?: string | boolean | number;
+}) {
+  if (item.value === props.modelValue) {
+    emit("update:modelValue", undefined);
+    return;
+  }
+  emit("update:modelValue", item.value);
+}
+</script>
+
+<template>
+  <VDropdown>
+    <div
+      class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
+      :class="{ 'font-semibold text-gray-700': modelValue !== undefined }"
+    >
+      <span v-if="!selectedItem" class="mr-0.5">
+        {{ label }}
+      </span>
+      <span v-else> {{ label }}：{{ selectedItem.label }} </span>
+      <span>
+        <IconArrowDown />
+      </span>
+    </div>
+    <template #popper>
+      <VDropdownItem
+        v-for="(item, index) in items"
+        :key="index"
+        :selected="item.value === modelValue"
+        @click="handleSelect(item)"
+      >
+        {{ item.label }}
+      </VDropdownItem>
+    </template>
+  </VDropdown>
+</template>
diff --git a/console/src/components/input/SearchInput.vue b/console/src/components/input/SearchInput.vue
new file mode 100644
index 000000000..94eff2dd8
--- /dev/null
+++ b/console/src/components/input/SearchInput.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { getNode, reset } from "@formkit/core";
+import { IconCloseCircle } from "@halo-dev/components";
+
+withDefaults(
+  defineProps<{
+    placeholder?: string;
+    modelValue: string;
+  }>(),
+  {
+    placeholder: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:modelValue", modelValue: string): void;
+}>();
+
+const id = `search-input-${crypto.randomUUID()}`;
+
+function handleReset() {
+  emit("update:modelValue", "");
+  reset(id);
+}
+
+function onKeywordChange() {
+  const keywordNode = getNode(id);
+  if (keywordNode) {
+    emit("update:modelValue", keywordNode._value as string);
+  }
+}
+</script>
+
+<template>
+  <FormKit
+    :id="id"
+    outer-class="!p-0"
+    :placeholder="placeholder || $t('core.common.placeholder.search')"
+    type="text"
+    name="keyword"
+    :model-value="modelValue"
+    @keyup.enter="onKeywordChange"
+  >
+    <template v-if="modelValue" #suffix>
+      <div
+        class="group flex h-full cursor-pointer items-center bg-white px-2 transition-all hover:bg-gray-50"
+        @click="handleReset"
+      >
+        <IconCloseCircle
+          class="h-4 w-4 text-gray-500 group-hover:text-gray-700"
+        />
+      </div>
+    </template>
+  </FormKit>
+</template>
diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml
index 3269b8e7f..e7a8eeb76 100644
--- a/console/src/locales/en.yaml
+++ b/console/src/locales/en.yaml
@@ -748,7 +748,6 @@ core:
     filters:
       status:
         items:
-          all: All
           active: Active
           inactive: Inactive
       sort:
@@ -1190,6 +1189,9 @@ core:
       labels:
         sort: Sort
         status: Status
+      item_labels:
+        all: All
+        default: Default
     status:
       deleting: Deleting
       loading: Loading
diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml
index 95d3b9642..5afe68719 100644
--- a/console/src/locales/zh-CN.yaml
+++ b/console/src/locales/zh-CN.yaml
@@ -748,7 +748,6 @@ core:
     filters:
       status:
         items:
-          all: 全部
           active: 已启用
           inactive: 未启用
       sort:
@@ -1190,6 +1189,9 @@ core:
       labels:
         sort: 排序
         status: 状态
+      item_labels:
+        all: 全部
+        default: 默认
     status:
       deleting: 删除中
       loading: 加载中
diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml
index c7d7f3446..3b05e6214 100644
--- a/console/src/locales/zh-TW.yaml
+++ b/console/src/locales/zh-TW.yaml
@@ -748,7 +748,6 @@ core:
     filters:
       status:
         items:
-          all: 全部
           active: 已啟用
           inactive: 未啟用
       sort:
@@ -1190,6 +1189,9 @@ core:
       labels:
         sort: 排序
         status: 狀態
+      item_labels:
+        all: 全部
+        default: 預設
     status:
       deleting: 刪除中
       loading: 加載中
diff --git a/console/src/modules/contents/attachments/AttachmentList.vue b/console/src/modules/contents/attachments/AttachmentList.vue
index 6f0e5cec3..ecc7b5ab4 100644
--- a/console/src/modules/contents/attachments/AttachmentList.vue
+++ b/console/src/modules/contents/attachments/AttachmentList.vue
@@ -44,7 +44,6 @@ import { useRouteQuery } from "@vueuse/router";
 import { useFetchAttachmentGroup } from "./composables/use-attachment-group";
 import { usePermission } from "@/utils/permission";
 import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import { useI18n } from "vue-i18n";
 
diff --git a/console/src/modules/contents/comments/CommentList.vue b/console/src/modules/contents/comments/CommentList.vue
index 25fca9c9a..1dec07c30 100644
--- a/console/src/modules/contents/comments/CommentList.vue
+++ b/console/src/modules/contents/comments/CommentList.vue
@@ -21,7 +21,6 @@ import type { ListedComment, User } from "@halo-dev/api-client";
 import { computed, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
 import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
diff --git a/console/src/modules/contents/pages/SinglePageList.vue b/console/src/modules/contents/pages/SinglePageList.vue
index 3416ef6e4..8025e2805 100644
--- a/console/src/modules/contents/pages/SinglePageList.vue
+++ b/console/src/modules/contents/pages/SinglePageList.vue
@@ -37,7 +37,6 @@ import cloneDeep from "lodash.clonedeep";
 import { usePermission } from "@/utils/permission";
 import { singlePageLabels } from "@/constants/labels";
 import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import { useMutation, useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
diff --git a/console/src/modules/contents/posts/PostList.vue b/console/src/modules/contents/posts/PostList.vue
index 9d1b8da61..b7a76c781 100644
--- a/console/src/modules/contents/posts/PostList.vue
+++ b/console/src/modules/contents/posts/PostList.vue
@@ -43,7 +43,6 @@ import { formatDatetime } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { postLabels } from "@/constants/labels";
 import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import TagDropdownSelector from "@/components/dropdown-selector/TagDropdownSelector.vue";
 import { useMutation, useQuery } from "@tanstack/vue-query";
diff --git a/console/src/modules/system/plugins/PluginList.vue b/console/src/modules/system/plugins/PluginList.vue
index 73c9877c2..4ca8a828d 100644
--- a/console/src/modules/system/plugins/PluginList.vue
+++ b/console/src/modules/system/plugins/PluginList.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import {
   IconAddCircle,
-  IconArrowDown,
   IconPlug,
   IconRefreshLine,
   VButton,
@@ -11,8 +10,6 @@ import {
   VPagination,
   VSpace,
   VLoading,
-  VDropdown,
-  VDropdownItem,
   Dialog,
 } from "@halo-dev/components";
 import PluginListItem from "./components/PluginListItem.vue";
@@ -20,26 +17,14 @@ import PluginUploadModal from "./components/PluginUploadModal.vue";
 import { computed, ref, onMounted } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { usePermission } from "@/utils/permission";
-import FilterTag from "@/components/filter/FilterTag.vue";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
-import { getNode } from "@formkit/core";
 import { useQuery } from "@tanstack/vue-query";
 import type { Plugin } from "@halo-dev/api-client";
 import { useI18n } from "vue-i18n";
 import { useRouteQuery } from "@vueuse/router";
+import { watch } from "vue";
 
 const { t } = useI18n();
 
-interface EnabledItem {
-  label: string;
-  value?: boolean;
-}
-
-interface SortItem {
-  label: string;
-  value: string;
-}
-
 const { currentUserHasPermission } = usePermission();
 
 const pluginInstall = ref(false);
@@ -49,90 +34,41 @@ const page = ref(1);
 const size = ref(20);
 const total = ref(0);
 
-// Filters
-const EnabledItems: EnabledItem[] = [
-  {
-    label: t("core.plugin.filters.status.items.all"),
-    value: undefined,
-  },
-  {
-    label: t("core.plugin.filters.status.items.active"),
-    value: true,
-  },
-  {
-    label: t("core.plugin.filters.status.items.inactive"),
-    value: false,
-  },
-];
-
-const SortItems: SortItem[] = [
-  {
-    label: t("core.plugin.filters.sort.items.create_time_desc"),
-    value: "creationTimestamp,desc",
-  },
-  {
-    label: t("core.plugin.filters.sort.items.create_time_asc"),
-    value: "creationTimestamp,asc",
-  },
-];
-
-const selectedEnabledItem = ref<EnabledItem>();
-const selectedSortItem = ref<SortItem>();
-
-function handleEnabledItemChange(enabledItem: EnabledItem) {
-  selectedEnabledItem.value = enabledItem;
-  page.value = 1;
-}
-
-function handleSortItemChange(sortItem?: SortItem) {
-  selectedSortItem.value = sortItem;
-  page.value = 1;
-}
-
-function handleKeywordChange() {
-  const keywordNode = getNode("keywordInput");
-  if (keywordNode) {
-    keyword.value = keywordNode._value as string;
-  }
-  page.value = 1;
-}
-
-function handleClearKeyword() {
-  keyword.value = "";
-  page.value = 1;
-}
+const selectedEnabledValue = ref();
+const selectedSortValue = ref();
 
 const hasFilters = computed(() => {
-  return (
-    selectedEnabledItem.value?.value !== undefined ||
-    selectedSortItem.value?.value ||
-    keyword.value
-  );
+  return selectedEnabledValue.value !== undefined || selectedSortValue.value;
 });
 
 function handleClearFilters() {
-  selectedEnabledItem.value = undefined;
-  selectedSortItem.value = undefined;
-  keyword.value = "";
-  page.value = 1;
+  selectedSortValue.value = undefined;
+  selectedEnabledValue.value = undefined;
 }
 
+watch(
+  () => [selectedEnabledValue.value, selectedSortValue.value, keyword.value],
+  () => {
+    page.value = 1;
+  }
+);
+
 const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({
   queryKey: [
     "plugins",
     page,
     size,
     keyword,
-    selectedEnabledItem,
-    selectedSortItem,
+    selectedEnabledValue,
+    selectedSortValue,
   ],
   queryFn: async () => {
     const { data } = await apiClient.plugin.listPlugins({
       page: page.value,
       size: size.value,
       keyword: keyword.value,
-      enabled: selectedEnabledItem.value?.value,
-      sort: [selectedSortItem.value?.value].filter(Boolean) as string[],
+      enabled: selectedEnabledValue.value,
+      sort: [selectedSortValue.value].filter(Boolean) as string[],
     });
 
     total.value = data.total;
@@ -204,99 +140,52 @@ onMounted(() => {
             class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
             <div class="flex w-full flex-1 items-center gap-2 sm:w-auto">
-              <FormKit
-                id="keywordInput"
-                outer-class="!p-0"
-                :placeholder="$t('core.common.placeholder.search')"
-                type="text"
-                name="keyword"
-                :model-value="keyword"
-                @keyup.enter="handleKeywordChange"
-              ></FormKit>
-
-              <FilterTag v-if="keyword" @close="handleClearKeyword()">
-                {{
-                  $t("core.common.filters.results.keyword", {
-                    keyword: keyword,
-                  })
-                }}
-              </FilterTag>
-
-              <FilterTag
-                v-if="selectedEnabledItem?.value !== undefined"
-                @close="handleEnabledItemChange(EnabledItems[0])"
-              >
-                {{
-                  $t("core.common.filters.results.status", {
-                    status: selectedEnabledItem.label,
-                  })
-                }}
-              </FilterTag>
-
-              <FilterTag
-                v-if="selectedSortItem"
-                @close="handleSortItemChange()"
-              >
-                {{
-                  $t("core.common.filters.results.sort", {
-                    sort: selectedSortItem.label,
-                  })
-                }}
-              </FilterTag>
-
-              <FilterCleanButton
-                v-if="hasFilters"
-                @click="handleClearFilters"
-              />
+              <SearchInput v-model="keyword" />
             </div>
             <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">
-                <VDropdown>
-                  <div
-                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
-                  >
-                    <span class="mr-0.5">
-                      {{ $t("core.common.filters.labels.status") }}
-                    </span>
-                    <span>
-                      <IconArrowDown />
-                    </span>
-                  </div>
-                  <template #popper>
-                    <VDropdownItem
-                      v-for="(enabledItem, index) in EnabledItems"
-                      :key="index"
-                      :selected="
-                        enabledItem.value === selectedEnabledItem?.value
-                      "
-                      @click="handleEnabledItemChange(enabledItem)"
-                    >
-                      {{ enabledItem.label }}
-                    </VDropdownItem>
-                  </template>
-                </VDropdown>
-                <VDropdown>
-                  <div
-                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
-                  >
-                    <span class="mr-0.5">
-                      {{ $t("core.common.filters.labels.sort") }}
-                    </span>
-                    <span>
-                      <IconArrowDown />
-                    </span>
-                  </div>
-                  <template #popper>
-                    <VDropdownItem
-                      v-for="(sortItem, index) in SortItems"
-                      :key="index"
-                      :selected="sortItem.value === selectedSortItem?.value"
-                      @click="handleSortItemChange(sortItem)"
-                    >
-                      {{ sortItem.label }}
-                    </VDropdownItem>
-                  </template>
-                </VDropdown>
+                <FilterCleanButton
+                  v-if="hasFilters"
+                  @click="handleClearFilters"
+                />
+                <FilterDropdown
+                  v-model="selectedEnabledValue"
+                  :label="$t('core.common.filters.labels.status')"
+                  :items="[
+                    {
+                      label: t('core.common.filters.item_labels.all'),
+                    },
+                    {
+                      label: t('core.plugin.filters.status.items.active'),
+                      value: true,
+                    },
+                    {
+                      label: t('core.plugin.filters.status.items.inactive'),
+                      value: false,
+                    },
+                  ]"
+                />
+                <FilterDropdown
+                  v-model="selectedSortValue"
+                  :label="$t('core.common.filters.labels.sort')"
+                  :items="[
+                    {
+                      label: t('core.common.filters.item_labels.default'),
+                    },
+                    {
+                      label: t(
+                        'core.plugin.filters.sort.items.create_time_desc'
+                      ),
+                      value: 'creationTimestamp,desc',
+                    },
+                    {
+                      label: t(
+                        'core.plugin.filters.sort.items.create_time_asc'
+                      ),
+                      value: 'creationTimestamp,asc',
+                    },
+                  ]"
+                />
                 <div class="flex flex-row gap-2">
                   <div
                     class="group cursor-pointer rounded p-1 hover:bg-gray-200"
diff --git a/console/src/modules/system/users/UserList.vue b/console/src/modules/system/users/UserList.vue
index 6ee9c6b32..bdfd66a7d 100644
--- a/console/src/modules/system/users/UserList.vue
+++ b/console/src/modules/system/users/UserList.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import {
   IconAddCircle,
-  IconArrowDown,
   IconUserFollow,
   IconUserSettings,
   IconLockPasswordLine,
@@ -20,7 +19,6 @@ import {
   Toast,
   IconRefreshLine,
   VEmpty,
-  VDropdown,
   VDropdownItem,
 } from "@halo-dev/components";
 import UserEditingModal from "./components/UserEditingModal.vue";
@@ -28,16 +26,13 @@ import UserPasswordChangeModal from "./components/UserPasswordChangeModal.vue";
 import GrantPermissionModal from "./components/GrantPermissionModal.vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
-import type { Role, User, ListedUser } from "@halo-dev/api-client";
+import type { User, ListedUser } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
 import { formatDatetime } from "@/utils/date";
 import { useRouteQuery } from "@vueuse/router";
 import { usePermission } from "@/utils/permission";
 import { useUserStore } from "@/stores/user";
-import { getNode } from "@formkit/core";
-import FilterTag from "@/components/filter/FilterTag.vue";
 import { useFetchRole } from "../roles/composables/use-role";
-import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import UserCreationModal from "./components/UserCreationModal.vue";
@@ -61,61 +56,26 @@ const ANONYMOUSUSER_NAME = "anonymousUser";
 const DELETEDUSER_NAME = "ghost";
 
 // Filters
-function handleKeywordChange() {
-  const keywordNode = getNode("keywordInput");
-  if (keywordNode) {
-    keyword.value = keywordNode._value as string;
-  }
-  page.value = 1;
-}
-
-function handleClearKeyword() {
-  keyword.value = "";
-  page.value = 1;
-}
-
-interface SortItem {
-  label: string;
-  value: string;
-}
-
-const SortItems: SortItem[] = [
-  {
-    label: t("core.user.filters.sort.items.create_time_desc"),
-    value: "creationTimestamp,desc",
-  },
-  {
-    label: t("core.user.filters.sort.items.create_time_asc"),
-    value: "creationTimestamp,asc",
-  },
-];
-
-const selectedSortItem = ref<SortItem>();
-
-function handleSortItemChange(sortItem?: SortItem) {
-  selectedSortItem.value = sortItem;
-  page.value = 1;
-}
-
 const { roles } = useFetchRole();
-const selectedRole = ref<Role>();
-
-function handleRoleChange(role?: Role) {
-  selectedRole.value = role;
-  page.value = 1;
-}
+const selectedRoleValue = ref();
+const selectedSortValue = ref();
 
 function handleClearFilters() {
-  selectedRole.value = undefined;
-  selectedSortItem.value = undefined;
-  keyword.value = "";
-  page.value = 1;
+  selectedRoleValue.value = undefined;
+  selectedSortValue.value = undefined;
 }
 
 const hasFilters = computed(() => {
-  return selectedRole.value || selectedSortItem.value || keyword.value;
+  return selectedRoleValue.value || selectedSortValue.value;
 });
 
+watch(
+  () => [selectedRoleValue.value, selectedSortValue.value, keyword.value],
+  () => {
+    page.value = 1;
+  }
+);
+
 const page = ref(1);
 const size = ref(20);
 const total = ref(0);
@@ -126,7 +86,14 @@ const {
   isFetching,
   refetch,
 } = useQuery<ListedUser[]>({
-  queryKey: ["users", page, size, keyword, selectedSortItem, selectedRole],
+  queryKey: [
+    "users",
+    page,
+    size,
+    keyword,
+    selectedSortValue,
+    selectedRoleValue,
+  ],
   queryFn: async () => {
     const { data } = await apiClient.user.listUsers({
       page: page.value,
@@ -136,10 +103,8 @@ const {
         `name!=${ANONYMOUSUSER_NAME}`,
         `name!=${DELETEDUSER_NAME}`,
       ],
-      sort: [selectedSortItem.value?.value].filter(
-        (item) => !!item
-      ) as string[],
-      role: selectedRole.value?.metadata.name,
+      sort: [selectedSortValue.value].filter(Boolean) as string[],
+      role: selectedRoleValue.value,
     });
 
     total.value = data.total;
@@ -330,55 +295,7 @@ onMounted(() => {
               />
             </div>
             <div class="flex w-full flex-1 items-center sm:w-auto">
-              <div
-                v-if="!selectedUserNames.length"
-                class="flex items-center gap-2"
-              >
-                <FormKit
-                  id="keywordInput"
-                  outer-class="!p-0"
-                  :model-value="keyword"
-                  name="keyword"
-                  :placeholder="$t('core.common.placeholder.search')"
-                  type="text"
-                  @keyup.enter="handleKeywordChange"
-                ></FormKit>
-
-                <FilterTag v-if="keyword" @close="handleClearKeyword()">
-                  {{
-                    $t("core.common.filters.results.keyword", {
-                      keyword: keyword,
-                    })
-                  }}
-                </FilterTag>
-
-                <FilterTag v-if="selectedRole" @close="handleRoleChange()">
-                  {{
-                    $t("core.user.filters.role.result", {
-                      role:
-                        selectedRole.metadata.annotations?.[
-                          rbacAnnotations.DISPLAY_NAME
-                        ] || selectedRole.metadata.name,
-                    })
-                  }}
-                </FilterTag>
-
-                <FilterTag
-                  v-if="selectedSortItem"
-                  @close="handleSortItemChange()"
-                >
-                  {{
-                    $t("core.common.filters.results.sort", {
-                      sort: selectedSortItem.label,
-                    })
-                  }}
-                </FilterTag>
-
-                <FilterCleanButton
-                  v-if="hasFilters"
-                  @click="handleClearFilters"
-                />
-              </div>
+              <SearchInput v-if="!selectedUserNames.length" v-model="keyword" />
               <VSpace v-else>
                 <VButton type="danger" @click="handleDeleteInBatch">
                   {{ $t("core.common.buttons.delete") }}
@@ -387,56 +304,45 @@ onMounted(() => {
             </div>
             <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">
-                <VDropdown>
-                  <div
-                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
-                  >
-                    <span class="mr-0.5">
-                      {{ $t("core.user.filters.role.label") }}
-                    </span>
-                    <span>
-                      <IconArrowDown />
-                    </span>
-                  </div>
-                  <template #popper>
-                    <VDropdownItem
-                      v-for="(role, index) in roles"
-                      :key="index"
-                      :selected="
-                        selectedRole?.metadata.name === role.metadata.name
-                      "
-                      @click="handleRoleChange(role)"
-                    >
-                      {{
-                        role.metadata.annotations?.[
-                          rbacAnnotations.DISPLAY_NAME
-                        ] || role.metadata.name
-                      }}
-                    </VDropdownItem>
-                  </template>
-                </VDropdown>
-                <VDropdown>
-                  <div
-                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
-                  >
-                    <span class="mr-0.5">
-                      {{ $t("core.common.filters.labels.sort") }}
-                    </span>
-                    <span>
-                      <IconArrowDown />
-                    </span>
-                  </div>
-                  <template #popper>
-                    <VDropdownItem
-                      v-for="(sortItem, index) in SortItems"
-                      :key="index"
-                      :selected="selectedSortItem?.value === sortItem.value"
-                      @click="handleSortItemChange(sortItem)"
-                    >
-                      {{ sortItem.label }}
-                    </VDropdownItem>
-                  </template>
-                </VDropdown>
+                <FilterCleanButton
+                  v-if="hasFilters"
+                  @click="handleClearFilters"
+                />
+                <FilterDropdown
+                  v-model="selectedRoleValue"
+                  :label="$t('core.user.filters.role.label')"
+                  :items="[
+                    {
+                      label: t('core.common.filters.item_labels.all'),
+                    },
+                    ...roles.map((role) => {
+                      return {
+                        label:
+                          role.metadata.annotations?.[
+                            rbacAnnotations.DISPLAY_NAME
+                          ] || role.metadata.name,
+                        value: role.metadata.name,
+                      };
+                    }),
+                  ]"
+                />
+                <FilterDropdown
+                  v-model="selectedSortValue"
+                  :label="$t('core.common.filters.labels.sort')"
+                  :items="[
+                    {
+                      label: t('core.common.filters.item_labels.default'),
+                    },
+                    {
+                      label: t('core.user.filters.sort.items.create_time_desc'),
+                      value: 'creationTimestamp,desc',
+                    },
+                    {
+                      label: t('core.user.filters.sort.items.create_time_asc'),
+                      value: 'creationTimestamp,asc',
+                    },
+                  ]"
+                />
                 <div class="flex flex-row gap-2">
                   <div
                     class="group cursor-pointer rounded p-1 hover:bg-gray-200"
diff --git a/console/src/setup/setupComponents.ts b/console/src/setup/setupComponents.ts
index 8302b27bb..28853bf93 100644
--- a/console/src/setup/setupComponents.ts
+++ b/console/src/setup/setupComponents.ts
@@ -6,6 +6,9 @@ import "floating-vue/dist/style.css";
 import VueGridLayout from "vue-grid-layout";
 import { defaultConfig, plugin as FormKit } from "@formkit/vue";
 import FormKitConfig from "@/formkit/formkit.config";
+import FilterDropdown from "@/components/filter/FilterDropdown.vue";
+import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
+import SearchInput from "@/components/input/SearchInput.vue";
 
 export function setupComponents(app: App) {
   app.use(VueGridLayout);
@@ -25,4 +28,9 @@ export function setupComponents(app: App) {
     "VCodemirror",
     defineAsyncComponent(() => import("@/components/codemirror/Codemirror.vue"))
   );
+
+  // Console components
+  app.component("FilterDropdown", FilterDropdown);
+  app.component("FilterCleanButton", FilterCleanButton);
+  app.component("SearchInput", SearchInput);
 }