refactor: new clear selection button to clear all selections

packages/hoppscotch-sh-admin/locales/en.json

@@ -106,6 +106,7 @@
     "admin_failure": "Failed to make user an admin!!",
     "admin_success": "User is now an admin!!",
     "and": "and",
+    "clear_selection": "Clear Selection",
     "configure_auth": "Check out the documentation to configure auth providers.",
     "confirm_admin_to_user": "Do you want to remove admin status from this user?",
     "confirm_admins_to_users": "Do you want to remove admin status from selected users?",

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -24,16 +24,13 @@ declare module '@vue/runtime-core' {
     HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
-    HoppSmartSelectWrapper: typeof import('@hoppscotch/ui')['HoppSmartSelectWrapper']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
     HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
     HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']

packages/hoppscotch-sh-admin/src/pages/users/index.vue

@@ -44,10 +44,10 @@
         </div>
 
         <HoppSmartTable
+          v-model:list="finalUsersList"
+          v-model:selected-rows="selectedRows"
           :headings="headings"
-          :list="finalUsersList"
           :loading="showSpinner"
-          :selected-rows="selectedRows"
           @onRowClicked="goToUserDetails"
         >
           <template #extension>
@@ -57,7 +57,7 @@
                 v-model="query"
                 styles="w-full bg-primary py-1"
                 input-styles="h-full border-none"
-                placeholder="Search by name or email"
+                :placeholder="t('users.searchbar_placeholder')"
               />
             </div>
           </template>
@@ -169,6 +169,7 @@
             class="flex justify-center items-end bg-primaryLight border border-divider rounded-md mb-5"
           >
             <HoppButtonSecondary
+              :icon="IconCheck"
               :label="t('state.selected', { count: selectedRows.length })"
               class="py-4 border-divider rounded-r-none bg-emerald-800 text-secondaryDark"
             />
@@ -187,9 +188,15 @@
             <HoppButtonSecondary
               :icon="IconTrash"
               :label="t('users.delete_users')"
-              class="py-4 border-divider rounded-l-none hover:bg-red-500"
+              class="py-4 border-divider rounded-none hover:bg-red-500"
               @click="confirmUsersDeletion = true"
             />
+            <HoppButtonSecondary
+              :icon="IconX"
+              :label="t('state.clear_selection')"
+              class="py-4 border-divider rounded-l-none text-secondaryDark bg-red-600 hover:bg-red-500"
+              @click="selectedRows.splice(0, selectedRows.length)"
+            />
           </div>
         </div>
       </div>
@@ -236,7 +243,7 @@
 <script setup lang="ts">
 import { useMutation, useQuery } from '@urql/vue';
 import { format } from 'date-fns';
-import { computed, ref, watch, onUnmounted } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from '~/composables/i18n';
 import { useToast } from '~/composables/toast';
@@ -256,13 +263,15 @@ import {
   DELETE_USER_FAILED_ONLY_ONE_ADMIN,
   USER_ALREADY_INVITED,
 } from '~/helpers/errors';
+import IconCheck from '~icons/lucide/check';
+import IconLeft from '~icons/lucide/chevron-left';
+import IconRight from '~icons/lucide/chevron-right';
 import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 import IconTrash from '~icons/lucide/trash';
 import IconUserCheck from '~icons/lucide/user-check';
 import IconUserMinus from '~icons/lucide/user-minus';
 import IconAddUser from '~icons/lucide/user-plus';
-import IconLeft from '~icons/lucide/chevron-left';
-import IconRight from '~icons/lucide/chevron-right';
+import IconX from '~icons/lucide/x';
 
 // Get Proper Date Formats
 const t = useI18n();