refactor: data list filter components (#4182)

#### 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，并提供全局的筛选列表组件和搜索输入框组件。 ```
2023-07-07 16:23:06 +08:00 · 2023-07-07 16:23:06 +08:00 · f622b1787c
parent c0aae3a63c
commit f622b1787c
12 changed files with 262 additions and 335 deletions
--- a/console/src/components/filter/FilterDropdown.vue
+++ 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>
--- a/console/src/components/input/SearchInput.vue
+++ 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>
--- 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
--- 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: 加载中
--- 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: 加載中
--- 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";

--- 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";
--- 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";
--- 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";
--- 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"
--- 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"
--- 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);
 }