use short uuid

Signed-off-by: Lucas ONeil <[email protected]>

frontend/src/components/object/ObjectTable.vue

@@ -12,7 +12,7 @@ import { Button, Column, DataTable, Dialog, InputSwitch } from '@/lib/primevue';
 import { useAuthStore, useAppStore, useMetadataStore, useObjectStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 import { ButtonMode } from '@/utils/enums';
-import { formatDateLong } from '@/utils/formatters';
+import { formatDateLong, formatShortUuid } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
 import type { COMSObject } from '@/types';
@@ -137,13 +137,9 @@ watch( selectedObjects, () => {
       >
         <template #body="{ data }">
           <div
-            v-if="data.id?.length > 15"
             v-tooltip.bottom="{ value: data.id }"
           >
-            {{ data.id }}
-          </div>
-          <div v-else>
-            {{ data.id }}
+            {{ formatShortUuid(data.id) }}
           </div>
         </template>
       </Column>

frontend/src/utils/formatters.ts

@@ -37,3 +37,13 @@ export function toKebabCase(str: string | null) {
   const strs = str && str.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g);
   return strs ? strs.join('-').toLocaleLowerCase() : '';
 }
+
+/**
+ * @function formatShortUuid
+ * Converts a UUID identifier to just show the first 8 characters 
+ * @param {String} value A typical UUID used from COMS
+ * @returns {String} The first 8 chars
+ */
+export function formatShortUuid(uuid: string) {
+  return uuid ? uuid.slice(0,8) : uuid;
+}

frontend/tests/unit/utils/formatters.spec.ts

@@ -0,0 +1,23 @@
+import { toKebabCase, formatShortUuid } from '@/utils/formatters';
+
+describe.skip('formatters.ts toKebabCase', () => {
+  it('returns the expected UUID values', () => {
+    expect(toKebabCase('descriptive variable name')).toEqual('descriptive-variable-name');
+    expect(toKebabCase('INTERESTING FILE')).toEqual('INTERESTING-FILE');
+    expect(toKebabCase('abc')).toEqual('abc');
+  });
+
+  it('returns blanks if blank provided', () => {
+    expect(toKebabCase('')).toEqual('');
+    expect(toKebabCase(null)).toEqual(null);
+  });
+});
+
+describe.skip('formatters.ts formatShortUuid', () => {
+  it('returns the expected UUID values', () => {
+    expect(formatShortUuid('f1fc407d-d6b4-4506-ae6b-9cdd52fbb1c5')).toEqual('f1fc407d');
+    expect(formatShortUuid('f1fc407d')).toEqual('f1fc407d');
+    expect(formatShortUuid('abc')).toEqual('abc');
+    expect(formatShortUuid('')).toEqual('');
+  });
+});