fixes: miscellaneous improvements and cleanup

src/components/meilisearch/ChangeInstanceModal.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useMeilisearchStore } from '@/stores/meilisearch'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { Plus } from 'lucide-vue-next'
 
 const modalOpen = defineModel<boolean>({ default: false })
 
+const route = useRoute()
 const router = useRouter()
 const meilisearchStore = useMeilisearchStore()
 
@@ -15,8 +16,7 @@ async function handleChangeInstance() {
     if (currentInstanceId.value) {
         meilisearchStore.setCurrent(currentInstanceId.value)
         modalOpen.value = false
-        await router.push({ name: 'dashboard' })
-        router.go(0)
+        await router.push(route.name === 'dashboard' ? { name: 'indexes' } : { name: 'dashboard' })
     }
 }
 </script>
@@ -74,4 +74,4 @@ async function handleChangeInstance() {
             </div>
         </template>
     </Dialog>
-</template>
+</template>

src/components/meilisearch/CreateIndexDrawer.vue

@@ -16,7 +16,7 @@ function submitNewIndex() {
         drawerOpen.value = false
         emit('index-created')
     }).catch(() => {
-        // TODO
+        //
     })
 }
 
@@ -83,4 +83,4 @@ watch(primaryKey, (newVal) => {
             />
         </template>
     </Drawer>
-</template>
+</template>

src/components/meilisearch/EditDocumentDrawer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { RecordAny } from 'meilisearch'
 import { Mode } from 'vanilla-jsoneditor'
 import ThemedJsonEditor from '../ThemedJsonEditor.vue'
 import { useDocuments } from '@/composables/meilisearch/useDocuments'
+import { AlertCircle } from 'lucide-vue-next'
 
 const props = withDefaults(defineProps<{
     indexUid: string,
@@ -17,18 +18,25 @@ const emit = defineEmits(['hide', 'document-updated'])
 
 const drawerOpen = defineModel<boolean>({ default: false })
 
-const { addOrUpdateDocuments, isSendingTask } = useDocuments()
+const { addOrUpdateDocuments, isSendingTask, error } = useDocuments()
 
 const updatedDocument = ref<RecordAny>(props.document ?? {})
 function handleSaveDocument() {
-    // TODO: handle JSON errors (reference settings)
     addOrUpdateDocuments('update', props.indexUid, [updatedDocument.value], props.primaryKey)
         .then(() => {
             drawerOpen.value = false
             emit('document-updated')
         })
 }
 
+const jsonError = ref('')
+const hasErrors = computed(() => Boolean(error.value || jsonError.value))
+
+watch(() => updatedDocument.value, (newVal) => {
+    const invalidJsonMessage = 'Please correct the invalid document JSON.'
+    jsonError.value = (newVal === undefined) ? invalidJsonMessage : ''
+})
+
 watch(() => props.document, (newVal: RecordAny | null) => {
     if (newVal) {
         updatedDocument.value = newVal
@@ -45,7 +53,20 @@ watch(() => props.document, (newVal: RecordAny | null) => {
         blockScroll
         @hide="$emit('hide')"
     >
-        <div>
+        <div class="flex flex-col gap-4 mt-1">
+            <div v-if="hasErrors">
+                <Message severity="error">
+                    <template #icon>
+                        <AlertCircle />
+                    </template>
+                    <div v-if="jsonError">
+                        {{ jsonError }}
+                    </div>
+                    <div v-if="error">
+                        {{ error }}
+                    </div>
+                </Message>
+            </div>
             <ThemedJsonEditor
                 v-model="updatedDocument"
                 :mode="Mode.text"
@@ -57,6 +78,7 @@ watch(() => props.document, (newVal: RecordAny | null) => {
             <Button
                 label="Save"
                 :loading="isSendingTask"
+                :disabled="hasErrors"
                 @click="handleSaveDocument"
             />
         </template>

src/components/meilisearch/EditKeyDrawer.vue

@@ -40,7 +40,7 @@ function saveNewKey() {
         drawerOpen.value = false
         emit('key-updated')
     }).catch(() => {
-        // TODO
+        //
     })
 }
 

src/components/meilisearch/FilterDocumentsDrawer.vue

@@ -46,14 +46,12 @@ watch(selectedAttributes, async (newVal, oldVal) => {
                 facetHits: result?.facetHits ?? [],
                 value: [],
             }
-            console.log(`fetching: ${attributeName} facet values`)
         })
     }
 
     // remove facet filters when un-checked
     if (removed.length > 0) {
         removed.forEach((attributeName) => {
-            console.log(`Unchecked: ${attributeName}`)
             delete facetFilters.value[attributeName]
         })
     }
@@ -81,7 +79,6 @@ watch(facetFilters, (newVal) => {
             : null
 
         filter.value = finalFilter
-        console.log('Generated filter:', finalFilter)
     } else {
         filter.value = null
     }
@@ -137,7 +134,6 @@ watch(facetFilters, (newVal) => {
                 >
                     <label :for="`${facetFilter.attribute}_id`">{{ facetFilter.attribute }}</label>
                     <div class="relative">
-                        <!-- TODO: close button to remove the facet filter -->
                         <MultiSelect
                             v-model="facetFilters[facetFilter.attribute].value"
                             :options="facetFilter.facetHits"

src/components/meilisearch/ImportDocumentsDrawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, useTemplateRef, watch } from 'vue'
 import type { ContentType, RecordAny } from 'meilisearch'
-import { Braces, Info, Plus, TriangleAlert, Upload } from 'lucide-vue-next'
+import { AlertCircle, Braces, Info, Plus, TriangleAlert, Upload } from 'lucide-vue-next'
 import { Mode } from 'vanilla-jsoneditor'
 import ThemedJsonEditor from '../ThemedJsonEditor.vue'
 import { useDocuments } from '@/composables/meilisearch/useDocuments'
@@ -18,9 +18,8 @@ const emit = defineEmits(['hide', 'documents-imported'])
 
 const drawerOpen = defineModel<boolean>({ default: false })
 
-const { addOrUpdateDocuments, addOrUpdateDocumentsFromString, isSendingTask } = useDocuments()
+const { addOrUpdateDocuments, addOrUpdateDocumentsFromString, isSendingTask, error } = useDocuments()
 
-// TODO: empty record with primary key set
 const newDocuments = ref<RecordAny[]>([])
 const newDocumentsAsString = ref('')
 
@@ -50,7 +49,11 @@ function handleUploaderReset() {
     fileUploaderChanged.value++
 }
 
+const jsonError = ref('')
 const btnDisabled = computed(() => {
+    if (jsonError.value) {
+        return true
+    }
     if (importMethod.value === 'upload') {
         return newDocumentsAsString.value?.length === 0
     } else if (importMethod.value === 'manual') {
@@ -89,6 +92,13 @@ function handleHidden() {
     reset()
 }
 
+watch(() => newDocuments.value, (newVal) => {
+    if (importMethod.value === 'manual') {
+        const invalidJsonMessage = 'Please correct the invalid documents JSON.'
+        jsonError.value = (newVal === undefined) ? invalidJsonMessage : ''
+    }
+})
+
 watch(uploadContentType, (newVal) => {
     if (newVal && fileUploader.value) {
         handleUploaderReset()
@@ -118,7 +128,6 @@ watch(uploadContentType, (newVal) => {
                     optionValue="value"
                 />
             </div>
-            <!-- TODO: error message -->
             <Message severity="info">
                 <template #icon>
                     <Info />
@@ -127,13 +136,23 @@ watch(uploadContentType, (newVal) => {
                     class="text-inherit"
                     href="https://www.meilisearch.com/docs/reference/api/documents#add-or-replace-documents"
                     target="_blank"
-                >add or
-                    replace</a> vs. <a
+                >
+                    add or replace</a> vs. <a
                     class="text-inherit"
                     href="https://www.meilisearch.com/docs/reference/api/documents#add-or-update-documents"
                     target="_blank"
-                >add or
-                    update</a> functionality.
+                >
+                    add or update</a> functionality.
+            </Message>
+            <Message
+                v-if="error"
+                severity="error"
+                :closable="false"
+            >
+                <template #icon>
+                    <AlertCircle />
+                </template>
+                <span class="font-bold">Error importing documents:</span> {{ error }}
             </Message>
             <div>
                 <Tabs v-model:value="importMethod">
@@ -153,7 +172,6 @@ watch(uploadContentType, (newVal) => {
                     </TabList>
                     <TabPanels class="p-0 pt-4">
                         <TabPanel value="upload">
-                            <!-- TODO: https://primevue.org/progressbar/#dynamic -->
                             <div class="flex flex-col gap-4">
                                 <Message
                                     v-if="uploadContentType === 'text/csv'"
@@ -226,12 +244,22 @@ watch(uploadContentType, (newVal) => {
                             </div>
                         </TabPanel>
                         <TabPanel value="manual">
-                            <ThemedJsonEditor
-                                v-model="newDocuments"
-                                :mode="Mode.text"
-                                :main-menu-bar="false"
-                                :stringified="false"
-                            />
+                            <div class="flex flex-col gap-4">
+                                <div v-if="jsonError">
+                                    <Message severity="error">
+                                        <template #icon>
+                                            <AlertCircle />
+                                        </template>
+                                        {{ jsonError }}
+                                    </Message>
+                                </div>
+                                <ThemedJsonEditor
+                                    v-model="newDocuments"
+                                    :mode="Mode.text"
+                                    :main-menu-bar="false"
+                                    :stringified="false"
+                                />
+                            </div>
                         </TabPanel>
                     </TabPanels>
                 </Tabs>

src/components/meilisearch/UpdateIndexPrimaryKeyForm.vue

@@ -17,7 +17,6 @@ const primaryKey = ref(props.index.primaryKey ?? '')
 const inputErrors = computed(() => error.value ? [error.value] : [])
 
 function handleUpdatePrimaryKey() {
-    // TODO: catch error?
     updateIndex(props.indexUid, primaryKey.value).then(() => {
         emit('refetch-index')
     })
@@ -59,4 +58,4 @@ function handleUpdatePrimaryKey() {
             />
         </div>
     </form>
-</template>
+</template>

src/router/index.ts

@@ -103,7 +103,6 @@ let isAsyncComponentLoading = false
 router.beforeEach(async (to, from) => {
     const toast = useToast()
     const meilisearchStore = useMeilisearchStore()
-    // TODO: 404 not working when no instance
     if (to.name === 'connection-error' || to.name === 'new-instance') {
         return
     }
@@ -162,4 +161,4 @@ export function completeAsyncLoading() {
     progress.done()
 }
 
-export default router
+export default router

src/stores/meilisearch.ts

@@ -68,7 +68,6 @@ export const useMeilisearchStore = defineStore('meilisearch', () => {
             await conn.health()
             client.value = conn
             currentInstanceId.value = targetId
-            // TODO: throw error or set connectionError.value if 400 level response
             return conn
         } catch (err) {
             client.value = null
@@ -187,4 +186,4 @@ export const useMeilisearchStore = defineStore('meilisearch', () => {
         confirmRemoveInstance,
         setCurrent,
     }
-})
+})

src/views/Tasks.vue

@@ -32,9 +32,6 @@ function showTask(task: Task) {
     showTaskDrawerOpen.value = true
 }
 
-// TODO: poll for new tasks
-// TODO: https://vueuse.org/core/useUrlSearchParams/
-// url params for route redirect from index page tasks link, or use qs package?
 watch(tasksParams, (newValue) => {
     // Unset array typed properties if they have no values, to prevent bad query results
     if (newValue?.statuses?.length === 0) {