feat(lite): CR feedback (#6341)

@xen-orchestra/lite/src/components/CollectionFilterRow.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="collection-filter-row">
     <span class="or">OR</span>
-    <FormWidget v-if="newFilter.isAdvanced" style="flex: 1">
+    <FormWidget v-if="newFilter.isAdvanced" class="form-widget-advanced">
       <input v-model="newFilter.content" />
     </FormWidget>
     <template v-else>
@@ -257,4 +257,8 @@ const valueInputAfter = computed(() => {
 .remove-icon {
   color: var(--color-red-vates-base);
 }
+
+.form-widget-advanced {
+  flex: 1;
+}
 </style>

@xen-orchestra/lite/src/components/CollectionSorter.vue

@@ -6,7 +6,7 @@
       @edit="emit('toggleSortDirection', property)"
       @remove="emit('removeSort', property)"
     >
-      <span style="display: inline-flex; align-items: center; gap: 0.7rem">
+      <span class="property">
         <FontAwesomeIcon :icon="isAscending ? faCaretUp : faCaretDown" />
         {{ property }}
       </span>
@@ -19,7 +19,7 @@
 
   <UiModal v-if="isOpen">
     <form @submit.prevent="handleSubmit">
-      <div style="display: flex; gap: 1rem">
+      <div class="form-widgets">
         <FormWidget label="Sort by">
           <select v-model="newSortProperty">
             <option v-if="!newSortProperty"></option>
@@ -80,9 +80,8 @@ const newSortProperty = ref();
 const newSortIsAscending = ref<boolean>(true);
 
 const reset = () => {
-  // editedFilter.value = "";
+  newSortProperty.value = undefined;
-  // newFilters.value = [];
+  newSortIsAscending.value = true;
-  // addNewFilter();
 };
 
 const handleSubmit = () => {
@@ -101,4 +100,15 @@ const handleCancel = () => {
 .add-sort {
   height: 3.4rem;
 }
+
+.form-widgets {
+  display: flex;
+  gap: 1rem;
+}
+
+.property {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.7rem;
+}
 </style>

@xen-orchestra/lite/src/components/PowerStateIcon.vue

@@ -11,24 +11,20 @@ import {
   faQuestion,
   faStop,
 } from "@fortawesome/pro-solid-svg-icons";
-import FormWidget from "@/components/FormWidget.vue";
 import type { PowerState } from "@/libs/xen-api";
 
 const props = defineProps<{
-  state: PowerState | "Unknown";
+  state: PowerState;
 }>();
 
-const icon = computed(() => {
 const icons = {
   Running: faPlay,
   Paused: faPause,
   Suspended: faMoon,
-    Unknown: faQuestion,
   Halted: faStop,
 };
 
-  return icons[props.state];
+const icon = computed(() => icons[props.state] ?? faQuestion);
-});
 
 const className = computed(() => `state-${props.state.toLocaleLowerCase()}`);
 </script>

@xen-orchestra/lite/src/libs/utils.ts

@@ -24,6 +24,13 @@ export function escapeRegExp(string: string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
+const iconsByType = {
+  string: faFont,
+  number: faHashtag,
+  boolean: faSquareCheck,
+  enum: faList,
+};
+
 export function getFilterIcon(filter: Filter | undefined) {
   if (!filter) {
     return;
@@ -33,13 +40,6 @@ export function getFilterIcon(filter: Filter | undefined) {
     return filter.icon;
   }
 
-  const iconsByType = {
-    string: faFont,
-    number: faHashtag,
-    boolean: faSquareCheck,
-    enum: faList,
-  };
-
   return iconsByType[filter.type];
 }