feat: server access post release QA (#6316)

* fix: clicking users in table in app takes you to blank page instead of website

* fix: wrong loader icon on server panel

* fix: surface var misalignment

* fix: password managers still detecting username field as something to autofill

* feat: show users on backupitem components

* feat: seperators for filter sections

* fix: lint + change remove -> revoke

* fix: copy

* feat: align copy

packages/ui/src/components/base/Combobox.vue

@@ -20,13 +20,16 @@
 				ref="searchTriggerRef"
 				v-model="searchQuery"
 				:icon="showSearchIcon ? SearchIcon : undefined"
-				type="text"
+				:type="searchType"
+				:name="searchName"
 				:placeholder="searchPlaceholder || placeholder"
 				:disabled="disabled"
 				:autocomplete="searchAutocomplete"
 				:autocorrect="searchAutocorrect"
 				:autocapitalize="searchAutocapitalize"
 				:spellcheck="searchSpellcheck"
+				:inputmode="searchInputmode"
+				:input-attrs="searchInputAttrs"
 				wrapper-class="w-full !bg-transparent"
 				:input-class="searchableInputClass"
 				class="relative z-[1]"
@@ -281,8 +284,6 @@ const props = withDefaults(
 		forceDirection?: 'up' | 'down'
 		noOptionsMessage?: string
 		disableSearchFilter?: boolean
-		dropdownClass?: string
-		dropdownMinWidth?: string
 		minSearchLengthToOpen?: number
 		/** Keep the selected option's label in the input after selection, and show all options on focus */
 		syncWithSelection?: boolean
@@ -290,10 +291,14 @@ const props = withDefaults(
 		selectSearchTextOnFocus?: boolean
 		/** Show a search icon in the searchable input */
 		showSearchIcon?: boolean
+		searchType?: 'text' | 'search'
+		searchName?: string
+		searchInputmode?: 'text' | 'search'
 		searchAutocomplete?: string
 		searchAutocorrect?: 'on' | 'off'
 		searchAutocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
 		searchSpellcheck?: boolean
+		searchInputAttrs?: Record<string, string | number | boolean | undefined>
 	}>(),
 	{
 		placeholder: 'Select an option',
@@ -309,6 +314,7 @@ const props = withDefaults(
 		syncWithSelection: true,
 		selectSearchTextOnFocus: false,
 		showSearchIcon: false,
+		searchType: 'text',
 		outsideClickIgnore: () => [],
 	},
 )

packages/ui/src/components/base/DropdownFilterBar.vue

@@ -269,8 +269,13 @@
 						>
 							<div
 								v-if="isDropdownFilterSectionHeader(item)"
-								class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-semibold text-secondary"
-								:class="item.class"
+								class="flex items-center justify-between gap-3 border-0 px-4 py-2.5 text-sm font-semibold text-secondary"
+								:class="[
+									item.class,
+									item.dividerBefore && index > 0
+										? 'border-t border-solid border-surface-5'
+										: undefined,
+								]"
 							>
 								<span class="flex min-w-0 items-center gap-2">
 									<component
@@ -398,6 +403,7 @@ export type DropdownFilterBarSectionHeader = {
 	key?: string
 	icon?: Component
 	class?: string
+	dividerBefore?: boolean
 }
 
 export type DropdownFilterBarItem = DropdownFilterBarOption | DropdownFilterBarSectionHeader

packages/ui/src/components/base/StyledInput.vue

@@ -21,6 +21,7 @@
 		<textarea
 			v-if="multiline"
 			:id="id"
+			v-bind="inputAttrs"
 			ref="inputRef"
 			:value="model"
 			:placeholder="placeholder"
@@ -50,6 +51,7 @@
 		<input
 			v-else
 			:id="id"
+			v-bind="inputAttrs"
 			ref="inputRef"
 			:type="type"
 			:value="model"
@@ -149,6 +151,7 @@ const props = withDefaults(
 		resize?: 'none' | 'vertical' | 'both'
 		inputClass?: string
 		wrapperClass?: string
+		inputAttrs?: Record<string, string | number | boolean | undefined>
 	}>(),
 	{
 		type: 'text',

packages/ui/src/components/base/Table.vue

@@ -1,14 +1,14 @@
 <template>
-	<div class="overflow-hidden rounded-2xl border border-solid border-surface-5">
+	<div class="overflow-hidden rounded-2xl border border-solid border-surface-4">
 		<div
 			v-if="hasHeaderSlot"
-			class="border-solid border-0 border-b border-surface-5 bg-surface-3 p-4"
+			class="border-solid border-0 border-b border-surface-4 bg-surface-3 p-4"
 		>
 			<slot name="header" />
 		</div>
 		<div class="overflow-x-auto overflow-y-hidden">
 			<table
-				class="w-full table-fixed border-separate border-spacing-0 border-surface-5"
+				class="w-full table-fixed border-separate border-spacing-0 border-surface-4"
 				:style="tableMinWidth ? { minWidth: tableMinWidth } : undefined"
 			>
 				<colgroup>
@@ -68,7 +68,7 @@
 					tag="tbody"
 				>
 					<tr v-if="data.length === 0" key="empty" class="bg-surface-2">
-						<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-5 p-0">
+						<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-4 p-0">
 							<slot name="empty-state">
 								<div class="text-secondary flex h-64 items-center justify-center">
 									No data available.
@@ -84,7 +84,7 @@
 						>
 							<td
 								v-if="showSelection"
-								class="w-12 border-solid border-0 border-t border-surface-5 focus:outline-none"
+								class="w-12 border-solid border-0 border-t border-surface-4 focus:outline-none"
 							>
 								<Checkbox
 									:model-value="isSelected(row)"
@@ -95,7 +95,7 @@
 							<td
 								v-for="column in columns"
 								:key="column.key"
-								class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
+								class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-4"
 								:class="`text-${column.align ?? 'left'}`"
 							>
 								<slot
@@ -113,7 +113,7 @@
 				</TransitionGroup>
 				<tbody v-else :ref="setListContainer">
 					<tr v-if="data.length === 0" class="bg-surface-2">
-						<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-5 p-0">
+						<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-4 p-0">
 							<slot name="empty-state">
 								<div class="text-secondary flex h-64 items-center justify-center">
 									No data available.
@@ -136,7 +136,7 @@
 						>
 							<td
 								v-if="showSelection"
-								class="w-12 border-solid border-0 border-t border-surface-5 focus:outline-none"
+								class="w-12 border-solid border-0 border-t border-surface-4 focus:outline-none"
 							>
 								<Checkbox
 									:model-value="isSelected(row)"
@@ -147,7 +147,7 @@
 							<td
 								v-for="column in columns"
 								:key="column.key"
-								class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
+								class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-4"
 								:class="`text-${column.align ?? 'left'}`"
 							>
 								<slot