Merge pull request #1054 from solliancenet/jdh-doc-and-ui

UI and docs updates

docs/development/development-local.md

@@ -3,9 +3,9 @@
 ## Prerequisites
 
 - Environment variables:
-  - Create an environment variable for the Application Configuration Service connection string named `FoundationaLLM_AppConfig_ConnectionString`. This is used by the .NET projects.
-  - Create an environment variable for the Application Configuration Service URI named `FOUNDATIONALLM_APP_CONFIGURATION_URI`. This is used by the Python projects.
-  - Create an environment variable named `FOUNDATIONALLM_VERSION` and set it to the version of the FoundationaLLM deployment you are working with. This is used by the .NET projects to validate your environment configuration based on the version.
+  - Create a *system* environment variable for the Application Configuration Service connection string named `FoundationaLLM_AppConfig_ConnectionString`. This is used by the .NET projects.
+  - Create a *system* environment variable for the Application Configuration Service URI named `FOUNDATIONALLM_APP_CONFIGURATION_URI`. This is used by the Python projects.
+  - Create a *system* environment variable named `FOUNDATIONALLM_VERSION` and set it to the version of the FoundationaLLM deployment you are working with. This is used by the .NET projects to validate your environment configuration based on the version.
 
 > [!TIP]
 > You can view the FoundationaLLM release versions by viewing the [branches in the FoundationaLLM repository](https://github.com/solliancenet/foundationallm/branches/all?query=release). The format is `release/n.n.n`, where `n.n.n` is the version number. The `FOUNDATIONALLM_VERSION` environment variable should be set to the version number without the `release/` prefix (example: `0.4.0`).

src/ui/ManagementPortal/directives/createChipOnBlur.ts

@@ -0,0 +1,33 @@
+import { nextTick } from 'vue';
+
+const createChipOnBlur = {
+  mounted(el, binding) {
+    nextTick(() => {
+      const input = el.querySelector('input');
+      if (input) {
+        input.addEventListener('blur', () => {
+          const value = input.value.trim();
+
+          if (value) {
+            const propertyName = binding.arg; // Use the argument passed to the directive
+            if (propertyName) {
+              const targetArray = binding.instance[propertyName];
+              if (Array.isArray(targetArray)) {
+                targetArray.push(value);
+                input.value = '';
+              } else {
+                console.warn(`The property "${propertyName}" is not an array or is undefined`);
+              }
+            } else {
+              console.warn('No argument provided for the directive');
+            }
+          }
+        });
+      } else {
+        console.warn('Input element not found within Chips component');
+      }
+    });
+  }
+};
+
+export default createChipOnBlur;

src/ui/ManagementPortal/pages/agents/create.vue

@@ -21,7 +21,7 @@
 			<div class="span-2">
 				<div class="step-header mb-2">Agent name:</div>
 				<div class="mb-2">
-					No special characters or spaces, lowercase letters with dashes and underscores only.
+					No special characters or spaces, use letters and numbers with dashes and underscores only.
 				</div>
 				<div class="input-wrapper">
 					<InputText

src/ui/ManagementPortal/pages/data-sources/create.vue

@@ -24,6 +24,9 @@
 			<div class="step-header span-2">What is the name of the data source?</div>
 			<div class="span-2">
 				<div class="mb-2">Data source name:</div>
+				<div class="mb-2">
+					No special characters or spaces, use letters and numbers with dashes and underscores only.
+				</div>
 				<div class="input-wrapper">
 					<InputText
 						v-model="dataSource.name"
@@ -135,8 +138,11 @@
 						/>
 					</div>
 
-					<div class="mb-2 mt-2">Folder(s):</div>
-					<Chips v-model="folders" class="w-100" separator="," />
+					<div class="step-header mb-2 mt-2">Folder(s):</div>
+					<div class="mb-2">
+						Press <strong>Enter</strong> or <strong>,</strong> after typing each folder name.
+					</div>
+					<Chips v-model="folders" class="w-100" separator="," v-create-chip-on-blur:folders />
 				</div>
 
 				<!-- OneLake -->
@@ -196,8 +202,11 @@
 						/>
 					</div>
 
-					<div class="mb-2 mt-2">Workspace(s):</div>
-					<Chips v-model="workspaces" class="w-100" separator="," />
+					<div class="step-header mb-2 mt-2">Workspace(s):</div>
+					<div class="mb-2">
+						Press <strong>Enter</strong> or <strong>,</strong> after typing each workspace name.
+					</div>
+					<Chips v-model="workspaces" class="w-100" separator="," v-create-chip-on-blur:workspaces />
 				</div>
 
 				<!-- Azure SQL database -->
@@ -211,8 +220,11 @@
 						/>
 
 						<template v-if="dataSource.tables">
-							<div class="mb-2 mt-2">Table Name(s):</div>
-							<Chips v-model="tables" class="w-100" separator="," />
+							<div class="step-header mb-2 mt-2">Table Name(s):</div>
+							<div class="mb-2">
+								Press <strong>Enter</strong> or <strong>,</strong> after typing each table name.
+							</div>
+							<Chips v-model="tables" class="w-100" separator="," v-create-chip-on-blur:tables />
 						</template>
 					</div>
 				</div>
@@ -252,8 +264,11 @@
 						<InputText v-model="dataSource.site_url" class="w-100" type="text" />
 
 						<template v-if="dataSource.document_libraries">
-							<div class="mb-2 mt-2">Document Library(s):</div>
-							<Chips v-model="documentLibraries" class="w-100" separator="," />
+							<div class="step-header mb-2 mt-2">Document Library(s):</div>
+							<div class="mb-2">
+								Press <strong>Enter</strong> or <strong>,</strong> after typing each document library name.
+							</div>
+							<Chips v-model="documentLibraries" class="w-100" separator="," v-create-chip-on-blur:documentLibraries />
 						</template>
 					</div>
 				</div>

src/ui/ManagementPortal/plugins/directives.ts

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from '#app';
+import createChipOnBlur from '@/directives/createChipOnBlur';
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.directive('create-chip-on-blur', createChipOnBlur);
+  });