From d0962a218403d31b608c908aa27fd2c7a2191133 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Fri, 1 Dec 2023 12:14:40 -0800
Subject: [PATCH 1/7] Add support toggling json view of schemas in
 CreateSchemaForm

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../src/components/common/ToggleJson.vue      |  59 ++++++++
 .../credentials/EnterCredentialValues.vue     | 110 +++++----------
 .../issuance/schemas/CreateSchemaForm.vue     | 131 ++++++++++++------
 .../frontend/src/helpers/jsonParsing.ts       |  11 ++
 4 files changed, 189 insertions(+), 122 deletions(-)
 create mode 100644 services/tenant-ui/frontend/src/components/common/ToggleJson.vue
 create mode 100644 services/tenant-ui/frontend/src/helpers/jsonParsing.ts

diff --git a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
new file mode 100644
index 000000000..190f29268
--- /dev/null
+++ b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
@@ -0,0 +1,59 @@
+<template>
+	<div class="mt-2">
+	  <div class="flex justify-content-end">
+      {{ $t('common.json') }}
+      <InputSwitch v-model="showRawJson" class="ml-1" @input="toggleJson" />
+    </div>
+    <div v-show="!showRawJson">
+		  <slot></slot>
+    </div>
+    <div v-show="showRawJson">
+      <Textarea
+        id="credentialValuesEdit"
+        v-model="valuesJson"
+        :auto-resize="true"
+        rows="20"
+        cols="60"
+        class="w-full mt-1"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Libraries
+import { ref, defineExpose } from 'vue';
+import InputText from 'primevue/inputtext';
+// Source
+import InputSwitch from 'primevue/inputswitch';
+import Textarea from 'primevue/textarea';
+import { useI18n } from 'vue-i18n';
+
+const showRawJson = ref<boolean>(false);
+const valuesJson = ref<Object>({});
+
+// TODO expose a way to get the final results as the object
+// representation for submitting schemas and issuing credentials
+const props = defineProps<{
+        toJson: () => string
+        fromJson: (jsonRepresentation: Object) => undefined
+}>();
+
+defineExpose({
+  showRawJson,
+  valuesJson
+})
+
+const toggleJson = () => {
+  try {
+    if (showRawJson.value) {
+       valuesJson.value = props.toJson()
+    } else {
+      props.fromJson(valuesJson.value);
+    }
+  } catch (e) {
+    showRawJson.value = !showRawJson.value
+  }
+}
+
+</script>
diff --git a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
index 0ac7a0408..900a44d56 100644
--- a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
@@ -11,43 +11,8 @@
   </div>
 
   <div class="field mt-5">
-    <!-- Label/toggle -->
-    <div class="flex justify-content-between">
-      <div class="flex justify-content-start">
-        <label for="credentialValuesEdit">
-          <strong>{{ $t('issue.credentialFieldValues') }}</strong>
-        </label>
-      </div>
-      <div class="flex justify-content-end">
-        {{ $t('common.json') }}
-        <InputSwitch v-model="showRawJson" class="ml-1" @input="toggleJson" />
-      </div>
-    </div>
-
-    <!-- Raw JSON input mode -->
-    <div v-show="showRawJson">
-      <Textarea
-        id="credentialValuesEdit"
-        v-model="credentialValuesJson"
-        :auto-resize="true"
-        rows="20"
-        cols="60"
-        class="w-full mt-1"
-      />
-
-      <div class="flex justify-content-end">
-        <small>
-          <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-          {{ $t('issue.schema') }}: {{ schemaForSelectedCred.schema.name }}
-          <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-          {{ $t('issue.version') }}:
-          {{ schemaForSelectedCred.schema.version }}
-        </small>
-      </div>
-    </div>
-
-    <!-- Dynamic Attribute field list -->
-    <div v-show="!showRawJson">
+    <ToggleJson ref="jsonVal" :toJson="credentialValueToJson" :fromJson="jsonToCredentialValue">
+      <!-- Dynamic Attribute field list -->
       <div
         v-for="(item, index) in credentialValuesRaw"
         :key="item.name"
@@ -62,8 +27,16 @@
           class="w-full"
         />
       </div>
+    </ToggleJson>
+    <div class="flex justify-content-end">
+      <small>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        {{ $t('issue.schema') }}: {{ schemaForSelectedCred.schema.name }}
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        {{ $t('issue.version') }}:
+        {{ schemaForSelectedCred.schema.version }}
+      </small>
     </div>
-
     <Button label="Save" class="mt-5 w-full" @click="saveCredValues" />
   </div>
 </template>
@@ -73,16 +46,20 @@
 import { onMounted, ref } from 'vue';
 // PrimeVue / Validation
 import Button from 'primevue/button';
-import InputSwitch from 'primevue/inputswitch';
 import InputText from 'primevue/inputtext';
-import Textarea from 'primevue/textarea';
 import { useToast } from 'vue-toastification';
+import { tryParseJson } from '@/helpers/jsonParsing';
+import ToggleJson from '@/components/common/ToggleJson.vue';
 
 const toast = useToast();
 
 // Props
+interface CredentialValue {
+  name: string
+  value: string
+}
 interface Props {
-  existingCredentialValues?: { name: string; value: string }[];
+  existingCredentialValues?: CredentialValue[];
   header: String;
   schemaForSelectedCred: any;
 }
@@ -91,50 +68,34 @@ const props = defineProps<Props>();
 const emit = defineEmits(['back', 'save']);
 
 // Fields
-const credentialValuesJson = ref('');
-const credentialValuesRaw = ref([] as { name: string; value: string }[]);
+const credentialValuesRaw = ref<CredentialValue[]>([]);
 
 const showRawJson = ref(false);
 
-// TODO: util function file
-function _tryParseJson(jsonString: string) {
-  try {
-    const o = JSON.parse(jsonString);
-    if (o && typeof o === 'object') {
-      return o;
-    }
-    return false;
-  } catch (e) {
-    return false;
-  }
-}
+const jsonVal = ref<{showRawJson: boolean, valuesJson: string}>({showRawJson: false, valuesJson: ""})
 
-function _jsonToCredRaw() {
-  const parsed = _tryParseJson(credentialValuesJson.value);
+function jsonToCredentialValue(jsonString: string) {
+  const parsed = tryParseJson<CredentialValue[]>(jsonString);
   if (parsed) {
-    credentialValuesRaw.value = JSON.parse(credentialValuesJson.value);
+    credentialValuesRaw.value = parsed;
   } else {
     toast.warning('The JSON you inputted has invalid syntax');
   }
 }
 
-const toggleJson = () => {
-  if (showRawJson.value) {
+const credentialValueToJson = () => {
     // Convert over to the json from what was entered on the fields
-    credentialValuesJson.value = JSON.stringify(
-      credentialValuesRaw.value,
-      undefined,
-      2
-    );
-  } else {
-    // Parse the entered JSON into fields, or ignore and warn if invalid syntax
-    _jsonToCredRaw();
-  }
-};
+  const j = JSON.stringify(
+    credentialValuesRaw.value,
+    undefined,
+    2
+  )
+  return j;
+}
 
 const saveCredValues = () => {
-  if (showRawJson.value) {
-    _jsonToCredRaw();
+  if (jsonVal.value.showRawJson) {
+       jsonToCredentialValue(jsonVal.value.valuesJson)
   }
   emit('save', credentialValuesRaw.value);
 };
@@ -158,10 +119,5 @@ onMounted(() => {
   } else {
     credentialValuesRaw.value = props.existingCredentialValues;
   }
-  credentialValuesJson.value = JSON.stringify(
-    credentialValuesRaw.value,
-    undefined,
-    2
-  );
 });
 </script>
diff --git a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
index e31864050..970a82696 100644
--- a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
@@ -8,35 +8,37 @@
         <p style="font-weight: bold">{{ selectedSchema?.schema_id }}</p>
       </div>
       <div class="mt-2">
-        <!-- schema name -->
-        <ValidatedField
-          :placeholder="isCopy ? selectedSchema?.schema?.name : ''"
-          :field-name="'name'"
-          :label="$t('issue.schemaName')"
-          :loading="loading"
-          :submitted="submitted"
-          :validation="v$"
-          :advanced-is-error="isError"
-        />
-        <!-- schema version -->
-        <ValidatedField
-          :placeholder="isCopy ? selectedSchema?.schema?.version : ''"
-          :field-name="'version'"
-          :label="$t('issue.schemaVersion')"
-          :loading="loading"
-          :submitted="submitted"
-          :validation="v$"
-          :advanced-is-error="isError"
-        />
-        <!-- attributes -->
-        <Attributes ref="attributes" :initial-attributes="initialAttributes" />
-        <Button
-          type="submit"
-          :label="t('configuration.schemas.create')"
-          class="mt-5 w-full"
-          :disabled="formFields.name === '' && formFields.version === ''"
-          :loading="loading"
-        />
+        <ToggleJson ref="jsonVal" :toJson="schemaToJson" :fromJson="jsonToSchema">
+          <!-- schema name -->
+          <ValidatedField
+            :placeholder="isCopy ? selectedSchema?.schema?.name : ''"
+            :field-name="'name'"
+            :label="$t('issue.schemaName')"
+            :loading="loading"
+            :submitted="submitted"
+            :validation="v$"
+            :advanced-is-error="isError"
+          />
+          <!-- schema version -->
+          <ValidatedField
+            :placeholder="isCopy ? selectedSchema?.schema?.version : ''"
+            :field-name="'version'"
+            :label="$t('issue.schemaVersion')"
+            :loading="loading"
+            :submitted="submitted"
+            :validation="v$"
+            :advanced-is-error="isError"
+          />
+          <!-- attributes -->
+          <Attributes ref="attributes" :initial-attributes="initialAttributes" />
+        </ToggleJson>
+          <Button
+            type="submit"
+            :label="t('configuration.schemas.create')"
+            class="mt-5 w-full"
+            :disabled="formFields.name === '' && formFields.version === ''"
+            :loading="loading"
+          />
       </div>
     </div>
   </form>
@@ -48,16 +50,20 @@ import { useVuelidate } from '@vuelidate/core';
 import { helpers, required } from '@vuelidate/validators';
 import { storeToRefs } from 'pinia';
 import Button from 'primevue/button';
+import InputSwitch from 'primevue/inputswitch';
+import Textarea from 'primevue/textarea';
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 // Source
 import ValidatedField from '@/components/common/ValidatedField.vue';
 import errorHandler from '@/helpers/errorHandler';
+import { tryParseJson } from '@/helpers/jsonParsing';
 import { useGovernanceStore } from '@/store';
 import { Attribute } from '@/types';
 import { SchemaSendRequest } from '@/types/acapyApi/acapyInterface';
 import Attributes from './Attributes.vue';
+import ToggleJson from '@/components/common/ToggleJson.vue';
 
 const toast = useToast();
 const { t } = useI18n();
@@ -66,8 +72,8 @@ const governanceStore = useGovernanceStore();
 const { loading, selectedSchema } = storeToRefs(useGovernanceStore());
 
 const emit = defineEmits(['closed', 'success']);
-const attributes = ref();
-
+const attributes = ref<{attributes: Array<Attributes>}>({attributes: []});
+const jsonVal = ref<{showRawJson: boolean, valuesJson: string}>({showRawJson: false, valuesJson: ""})
 const props = defineProps({
   isCopy: {
     type: Boolean,
@@ -155,6 +161,43 @@ if (props.isCopy) {
 
 const v$ = useVuelidate(rules, formFields);
 
+const schemaValuesJson = ref<string>('');
+const showRawJson = ref<boolean>(false);
+
+function convertToJson(): SchemaSendRequest | undefined {
+  const attributeNames = attributes.value?.attributes
+    .filter((x: Attribute) => x.name !== '')
+    .map((attribute: Attribute) => attribute.name);
+  return  {
+    attributes: attributeNames ?? [],
+    schema_name: formFields.name || selectedSchema.value?.schema?.name || '',
+    schema_version:
+        formFields.version || selectedSchema.value?.schema?.version || '',
+  };
+}
+
+const schemaToJson = () => {
+  const rawJson : SchemaSendRequest | undefined = convertToJson()
+  if (rawJson){
+    return JSON.stringify( rawJson, undefined, 2 );
+  } else {
+    toast.error('Failed to convert Schema to Json');
+    throw new Error("Failed to convert to Json");
+  }
+}
+
+function jsonToSchema(jsonString: string) {
+  const parsed = tryParseJson<SchemaSendRequest>(jsonString);
+  if (parsed) {
+    const newAt: Array<Attribute> = [{name: ""},  ...parsed.attributes.map(a => ({name: a}))]
+    attributes.value.attributes = newAt
+    formFields.name = parsed.schema_name
+    formFields.version = parsed.schema_version
+  } else {
+    toast.error('The JSON you inputted has invalid syntax');
+    throw new Error("Failed to parse Schema");
+  }
+}
 // Form submission
 const submitted = ref(false);
 const handleSubmit = async (isFormValid: boolean) => {
@@ -164,24 +207,22 @@ const handleSubmit = async (isFormValid: boolean) => {
     return;
   }
   try {
-    const attributeNames = attributes.value?.attributes
-      .filter((x: Attribute) => x.name !== '')
-      .map((attribute: Attribute) => attribute.name);
+    const payload: SchemaSendRequest | undefined =
+      jsonVal.value.showRawJson
+        ? tryParseJson<SchemaSendRequest>(jsonVal.value.valuesJson ?? "")
+        : convertToJson();
 
-    if (!attributeNames.length) {
+    if (!payload?.attributes.length) {
       toast.error(t('configuration.schemas.emptyAttributes'));
-      return;
+      return undefined;
     }
 
-    const payload: SchemaSendRequest = {
-      attributes: attributeNames,
-      schema_name: formFields.name || selectedSchema.value?.schema?.name || '',
-      schema_version:
-        formFields.version || selectedSchema.value?.schema?.version || '',
-    };
-
-    await governanceStore.createSchema(payload);
-
+    if (payload) {
+      await governanceStore.createSchema(payload);
+    }
+    else {
+      return;
+    }
     toast.success(t('configuration.schemas.postStart'));
     emit('success');
     emit('closed', payload);
diff --git a/services/tenant-ui/frontend/src/helpers/jsonParsing.ts b/services/tenant-ui/frontend/src/helpers/jsonParsing.ts
new file mode 100644
index 000000000..0f1c67264
--- /dev/null
+++ b/services/tenant-ui/frontend/src/helpers/jsonParsing.ts
@@ -0,0 +1,11 @@
+export function tryParseJson<T>(jsonString: string): T | undefined {
+	try {
+		const o = JSON.parse(jsonString);
+		if (o && typeof o === 'object') {
+			return o;
+		}
+		return undefined;
+	} catch (e) {
+		return undefined;
+	}
+}

From 76cc487aaa927593e7893572b20c5cbe5dac2ca8 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Fri, 1 Dec 2023 12:35:51 -0800
Subject: [PATCH 2/7] Applied eslint changes

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../src/components/common/ToggleJson.vue      | 21 +++---
 .../credentials/EnterCredentialValues.vue     | 27 ++++----
 .../issuance/schemas/CreateSchemaForm.vue     | 69 +++++++++++--------
 .../frontend/src/helpers/jsonParsing.ts       | 18 ++---
 .../frontend/src/plugins/i18n/locales/en.json |  2 +-
 .../frontend/src/plugins/i18n/locales/fr.json |  2 +-
 6 files changed, 76 insertions(+), 63 deletions(-)

diff --git a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
index 190f29268..533d9901c 100644
--- a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
+++ b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
@@ -1,11 +1,11 @@
 <template>
-	<div class="mt-2">
-	  <div class="flex justify-content-end">
+  <div class="mt-2">
+    <div class="flex justify-content-end">
       {{ $t('common.json') }}
       <InputSwitch v-model="showRawJson" class="ml-1" @input="toggleJson" />
     </div>
     <div v-show="!showRawJson">
-		  <slot></slot>
+      <slot></slot>
     </div>
     <div v-show="showRawJson">
       <Textarea
@@ -35,25 +35,24 @@ const valuesJson = ref<Object>({});
 // TODO expose a way to get the final results as the object
 // representation for submitting schemas and issuing credentials
 const props = defineProps<{
-        toJson: () => string
-        fromJson: (jsonRepresentation: Object) => undefined
+  toJson: () => string;
+  fromJson: (jsonRepresentation: Object) => undefined;
 }>();
 
 defineExpose({
   showRawJson,
-  valuesJson
-})
+  valuesJson,
+});
 
 const toggleJson = () => {
   try {
     if (showRawJson.value) {
-       valuesJson.value = props.toJson()
+      valuesJson.value = props.toJson();
     } else {
       props.fromJson(valuesJson.value);
     }
   } catch (e) {
-    showRawJson.value = !showRawJson.value
+    showRawJson.value = !showRawJson.value;
   }
-}
-
+};
 </script>
diff --git a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
index 900a44d56..4fe148ebb 100644
--- a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
@@ -11,7 +11,11 @@
   </div>
 
   <div class="field mt-5">
-    <ToggleJson ref="jsonVal" :toJson="credentialValueToJson" :fromJson="jsonToCredentialValue">
+    <ToggleJson
+      ref="jsonVal"
+      :to-json="credentialValueToJson"
+      :from-json="jsonToCredentialValue"
+    >
       <!-- Dynamic Attribute field list -->
       <div
         v-for="(item, index) in credentialValuesRaw"
@@ -55,8 +59,8 @@ const toast = useToast();
 
 // Props
 interface CredentialValue {
-  name: string
-  value: string
+  name: string;
+  value: string;
 }
 interface Props {
   existingCredentialValues?: CredentialValue[];
@@ -72,7 +76,10 @@ const credentialValuesRaw = ref<CredentialValue[]>([]);
 
 const showRawJson = ref(false);
 
-const jsonVal = ref<{showRawJson: boolean, valuesJson: string}>({showRawJson: false, valuesJson: ""})
+const jsonVal = ref<{ showRawJson: boolean; valuesJson: string }>({
+  showRawJson: false,
+  valuesJson: '',
+});
 
 function jsonToCredentialValue(jsonString: string) {
   const parsed = tryParseJson<CredentialValue[]>(jsonString);
@@ -84,18 +91,14 @@ function jsonToCredentialValue(jsonString: string) {
 }
 
 const credentialValueToJson = () => {
-    // Convert over to the json from what was entered on the fields
-  const j = JSON.stringify(
-    credentialValuesRaw.value,
-    undefined,
-    2
-  )
+  // Convert over to the json from what was entered on the fields
+  const j = JSON.stringify(credentialValuesRaw.value, undefined, 2);
   return j;
-}
+};
 
 const saveCredValues = () => {
   if (jsonVal.value.showRawJson) {
-       jsonToCredentialValue(jsonVal.value.valuesJson)
+    jsonToCredentialValue(jsonVal.value.valuesJson);
   }
   emit('save', credentialValuesRaw.value);
 };
diff --git a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
index 970a82696..b61e4f7e7 100644
--- a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
@@ -8,7 +8,11 @@
         <p style="font-weight: bold">{{ selectedSchema?.schema_id }}</p>
       </div>
       <div class="mt-2">
-        <ToggleJson ref="jsonVal" :toJson="schemaToJson" :fromJson="jsonToSchema">
+        <ToggleJson
+          ref="jsonVal"
+          :to-json="schemaToJson"
+          :from-json="jsonToSchema"
+        >
           <!-- schema name -->
           <ValidatedField
             :placeholder="isCopy ? selectedSchema?.schema?.name : ''"
@@ -30,15 +34,18 @@
             :advanced-is-error="isError"
           />
           <!-- attributes -->
-          <Attributes ref="attributes" :initial-attributes="initialAttributes" />
-        </ToggleJson>
-          <Button
-            type="submit"
-            :label="t('configuration.schemas.create')"
-            class="mt-5 w-full"
-            :disabled="formFields.name === '' && formFields.version === ''"
-            :loading="loading"
+          <Attributes
+            ref="attributes"
+            :initial-attributes="initialAttributes"
           />
+        </ToggleJson>
+        <Button
+          type="submit"
+          :label="t('configuration.schemas.create')"
+          class="mt-5 w-full"
+          :disabled="formFields.name === '' && formFields.version === ''"
+          :loading="loading"
+        />
       </div>
     </div>
   </form>
@@ -72,8 +79,11 @@ const governanceStore = useGovernanceStore();
 const { loading, selectedSchema } = storeToRefs(useGovernanceStore());
 
 const emit = defineEmits(['closed', 'success']);
-const attributes = ref<{attributes: Array<Attributes>}>({attributes: []});
-const jsonVal = ref<{showRawJson: boolean, valuesJson: string}>({showRawJson: false, valuesJson: ""})
+const attributes = ref<{ attributes: Array<Attributes> }>({ attributes: [] });
+const jsonVal = ref<{ showRawJson: boolean; valuesJson: string }>({
+  showRawJson: false,
+  valuesJson: '',
+});
 const props = defineProps({
   isCopy: {
     type: Boolean,
@@ -168,34 +178,37 @@ function convertToJson(): SchemaSendRequest | undefined {
   const attributeNames = attributes.value?.attributes
     .filter((x: Attribute) => x.name !== '')
     .map((attribute: Attribute) => attribute.name);
-  return  {
+  return {
     attributes: attributeNames ?? [],
     schema_name: formFields.name || selectedSchema.value?.schema?.name || '',
     schema_version:
-        formFields.version || selectedSchema.value?.schema?.version || '',
+      formFields.version || selectedSchema.value?.schema?.version || '',
   };
 }
 
 const schemaToJson = () => {
-  const rawJson : SchemaSendRequest | undefined = convertToJson()
-  if (rawJson){
-    return JSON.stringify( rawJson, undefined, 2 );
+  const rawJson: SchemaSendRequest | undefined = convertToJson();
+  if (rawJson) {
+    return JSON.stringify(rawJson, undefined, 2);
   } else {
     toast.error('Failed to convert Schema to Json');
-    throw new Error("Failed to convert to Json");
+    throw new Error('Failed to convert to Json');
   }
-}
+};
 
 function jsonToSchema(jsonString: string) {
   const parsed = tryParseJson<SchemaSendRequest>(jsonString);
   if (parsed) {
-    const newAt: Array<Attribute> = [{name: ""},  ...parsed.attributes.map(a => ({name: a}))]
-    attributes.value.attributes = newAt
-    formFields.name = parsed.schema_name
-    formFields.version = parsed.schema_version
+    const newAt: Array<Attribute> = [
+      { name: '' },
+      ...parsed.attributes.map((a) => ({ name: a })),
+    ];
+    attributes.value.attributes = newAt;
+    formFields.name = parsed.schema_name;
+    formFields.version = parsed.schema_version;
   } else {
     toast.error('The JSON you inputted has invalid syntax');
-    throw new Error("Failed to parse Schema");
+    throw new Error('Failed to parse Schema');
   }
 }
 // Form submission
@@ -207,10 +220,9 @@ const handleSubmit = async (isFormValid: boolean) => {
     return;
   }
   try {
-    const payload: SchemaSendRequest | undefined =
-      jsonVal.value.showRawJson
-        ? tryParseJson<SchemaSendRequest>(jsonVal.value.valuesJson ?? "")
-        : convertToJson();
+    const payload: SchemaSendRequest | undefined = jsonVal.value.showRawJson
+      ? tryParseJson<SchemaSendRequest>(jsonVal.value.valuesJson ?? '')
+      : convertToJson();
 
     if (!payload?.attributes.length) {
       toast.error(t('configuration.schemas.emptyAttributes'));
@@ -219,8 +231,7 @@ const handleSubmit = async (isFormValid: boolean) => {
 
     if (payload) {
       await governanceStore.createSchema(payload);
-    }
-    else {
+    } else {
       return;
     }
     toast.success(t('configuration.schemas.postStart'));
diff --git a/services/tenant-ui/frontend/src/helpers/jsonParsing.ts b/services/tenant-ui/frontend/src/helpers/jsonParsing.ts
index 0f1c67264..07878fe34 100644
--- a/services/tenant-ui/frontend/src/helpers/jsonParsing.ts
+++ b/services/tenant-ui/frontend/src/helpers/jsonParsing.ts
@@ -1,11 +1,11 @@
 export function tryParseJson<T>(jsonString: string): T | undefined {
-	try {
-		const o = JSON.parse(jsonString);
-		if (o && typeof o === 'object') {
-			return o;
-		}
-		return undefined;
-	} catch (e) {
-		return undefined;
-	}
+  try {
+    const o = JSON.parse(jsonString);
+    if (o && typeof o === 'object') {
+      return o;
+    }
+    return undefined;
+  } catch (e) {
+    return undefined;
+  }
 }
diff --git a/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json b/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json
index 218ea8a25..a22614962 100644
--- a/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json
+++ b/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json
@@ -550,4 +550,4 @@
     "verification": "Verification",
     "verifications": "Verifications"
   }
-}
\ No newline at end of file
+}
diff --git a/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json b/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json
index 5308346c7..9c72863a7 100644
--- a/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json
+++ b/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json
@@ -555,4 +555,4 @@
     },
     "tractionProxy": "Traction Proxy URL: <FR>"
   }
-}
\ No newline at end of file
+}

From 54b7b81f69431448311f8f17b86fc4c9f7828e74 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Fri, 1 Dec 2023 12:49:25 -0800
Subject: [PATCH 3/7] Corrected tsc errors

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../tenant-ui/frontend/src/components/common/ToggleJson.vue   | 4 ++--
 .../src/components/issuance/schemas/CreateSchemaForm.vue      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
index 533d9901c..533d74296 100644
--- a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
+++ b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
@@ -30,13 +30,13 @@ import Textarea from 'primevue/textarea';
 import { useI18n } from 'vue-i18n';
 
 const showRawJson = ref<boolean>(false);
-const valuesJson = ref<Object>({});
+const valuesJson = ref<string>('');
 
 // TODO expose a way to get the final results as the object
 // representation for submitting schemas and issuing credentials
 const props = defineProps<{
   toJson: () => string;
-  fromJson: (jsonRepresentation: Object) => undefined;
+  fromJson: (jsonRepresentation: string) => void;
 }>();
 
 defineExpose({
diff --git a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
index b61e4f7e7..86d132641 100644
--- a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
@@ -79,7 +79,7 @@ const governanceStore = useGovernanceStore();
 const { loading, selectedSchema } = storeToRefs(useGovernanceStore());
 
 const emit = defineEmits(['closed', 'success']);
-const attributes = ref<{ attributes: Array<Attributes> }>({ attributes: [] });
+const attributes = ref<{ attributes: Array<Attribute> }>({ attributes: [] });
 const jsonVal = ref<{ showRawJson: boolean; valuesJson: string }>({
   showRawJson: false,
   valuesJson: '',

From dd67b257a07630a2611d6fd8e020522b5d428be4 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Mon, 4 Dec 2023 11:55:17 -0800
Subject: [PATCH 4/7] Error is now handled by parent component of ToggleJson

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../src/components/common/ToggleJson.vue      | 28 ++++++++--------
 .../credentials/EnterCredentialValues.vue     | 17 ++++++----
 .../issuance/schemas/CreateSchemaForm.vue     | 32 +++++++++----------
 3 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
index 533d74296..35bc5a85d 100644
--- a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
+++ b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
@@ -20,23 +20,22 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 // Libraries
 import { ref, defineExpose } from 'vue';
-import InputText from 'primevue/inputtext';
 // Source
 import InputSwitch from 'primevue/inputswitch';
 import Textarea from 'primevue/textarea';
-import { useI18n } from 'vue-i18n';
 
 const showRawJson = ref<boolean>(false);
 const valuesJson = ref<string>('');
 
-// TODO expose a way to get the final results as the object
-// representation for submitting schemas and issuing credentials
+// Undefined indicates that the conversion was a failure
+// note that indication of the error should be handled in the
+// toJson and fromJson using libraries like vue-toastification
 const props = defineProps<{
-  toJson: () => string;
-  fromJson: (jsonRepresentation: string) => void;
+  toJson: () => string | undefined;
+  fromJson: (jsonRepresentation: string) => T | undefined;
 }>();
 
 defineExpose({
@@ -45,14 +44,17 @@ defineExpose({
 });
 
 const toggleJson = () => {
-  try {
-    if (showRawJson.value) {
-      valuesJson.value = props.toJson();
+  if (showRawJson.value) {
+    const res = props.toJson();
+    if (res) {
+      valuesJson.value = res;
     } else {
-      props.fromJson(valuesJson.value);
+      showRawJson.value = !showRawJson.value;
+    }
+  } else {
+    if (!props.fromJson(valuesJson.value)) {
+      showRawJson.value = !showRawJson.value;
     }
-  } catch (e) {
-    showRawJson.value = !showRawJson.value;
   }
 };
 </script>
diff --git a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
index 4fe148ebb..507611d52 100644
--- a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
@@ -15,6 +15,7 @@
       ref="jsonVal"
       :to-json="credentialValueToJson"
       :from-json="jsonToCredentialValue"
+      generic="CredentialValue[]"
     >
       <!-- Dynamic Attribute field list -->
       <div
@@ -74,27 +75,29 @@ const emit = defineEmits(['back', 'save']);
 // Fields
 const credentialValuesRaw = ref<CredentialValue[]>([]);
 
-const showRawJson = ref(false);
-
 const jsonVal = ref<{ showRawJson: boolean; valuesJson: string }>({
   showRawJson: false,
   valuesJson: '',
 });
 
-function jsonToCredentialValue(jsonString: string) {
+function jsonToCredentialValue(
+  jsonString: string
+): CredentialValue[] | undefined {
   const parsed = tryParseJson<CredentialValue[]>(jsonString);
   if (parsed) {
     credentialValuesRaw.value = parsed;
+    return parsed;
   } else {
     toast.warning('The JSON you inputted has invalid syntax');
+    return undefined;
   }
 }
 
-const credentialValueToJson = () => {
+function credentialValueToJson(): string | undefined {
   // Convert over to the json from what was entered on the fields
   const j = JSON.stringify(credentialValuesRaw.value, undefined, 2);
   return j;
-};
+}
 
 const saveCredValues = () => {
   if (jsonVal.value.showRawJson) {
@@ -103,10 +106,10 @@ const saveCredValues = () => {
   emit('save', credentialValuesRaw.value);
 };
 
-// Whnen the component is intialized set up the fields and raw JSON based
+// When the component is initialized set up the fields and raw JSON based
 // on the supplied schema and if there is existing values already
 onMounted(() => {
-  // Popuplate cred editor if it's not already been edited
+  // Populate cred editor if it's not already been edited
   if (!props.existingCredentialValues?.length) {
     const schemaFillIn = props.schemaForSelectedCred.schema.attrNames.map(
       (a: string) => {
diff --git a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
index 86d132641..834ee6138 100644
--- a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
@@ -12,6 +12,7 @@
           ref="jsonVal"
           :to-json="schemaToJson"
           :from-json="jsonToSchema"
+          generic="SchemaSendRequest"
         >
           <!-- schema name -->
           <ValidatedField
@@ -57,8 +58,6 @@ import { useVuelidate } from '@vuelidate/core';
 import { helpers, required } from '@vuelidate/validators';
 import { storeToRefs } from 'pinia';
 import Button from 'primevue/button';
-import InputSwitch from 'primevue/inputswitch';
-import Textarea from 'primevue/textarea';
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
@@ -171,9 +170,6 @@ if (props.isCopy) {
 
 const v$ = useVuelidate(rules, formFields);
 
-const schemaValuesJson = ref<string>('');
-const showRawJson = ref<boolean>(false);
-
 function convertToJson(): SchemaSendRequest | undefined {
   const attributeNames = attributes.value?.attributes
     .filter((x: Attribute) => x.name !== '')
@@ -186,17 +182,17 @@ function convertToJson(): SchemaSendRequest | undefined {
   };
 }
 
-const schemaToJson = () => {
+function schemaToJson(): string | undefined {
   const rawJson: SchemaSendRequest | undefined = convertToJson();
   if (rawJson) {
     return JSON.stringify(rawJson, undefined, 2);
   } else {
-    toast.error('Failed to convert Schema to Json');
-    throw new Error('Failed to convert to Json');
+    toast.error('Failed to convert to Json');
+    return undefined;
   }
-};
+}
 
-function jsonToSchema(jsonString: string) {
+function jsonToSchema(jsonString: string): SchemaSendRequest | undefined {
   const parsed = tryParseJson<SchemaSendRequest>(jsonString);
   if (parsed) {
     const newAt: Array<Attribute> = [
@@ -206,9 +202,10 @@ function jsonToSchema(jsonString: string) {
     attributes.value.attributes = newAt;
     formFields.name = parsed.schema_name;
     formFields.version = parsed.schema_version;
+    return parsed;
   } else {
     toast.error('The JSON you inputted has invalid syntax');
-    throw new Error('Failed to parse Schema');
+    return undefined;
   }
 }
 // Form submission
@@ -216,17 +213,18 @@ const submitted = ref(false);
 const handleSubmit = async (isFormValid: boolean) => {
   submitted.value = true;
 
-  if (!isFormValid) {
-    return;
-  }
   try {
+    if (!isFormValid) return;
+
     const payload: SchemaSendRequest | undefined = jsonVal.value.showRawJson
-      ? tryParseJson<SchemaSendRequest>(jsonVal.value.valuesJson ?? '')
+      ? jsonToSchema(jsonVal.value.valuesJson)
       : convertToJson();
 
-    if (!payload?.attributes.length) {
+    if (!payload) return;
+
+    if (!payload.attributes.length) {
       toast.error(t('configuration.schemas.emptyAttributes'));
-      return undefined;
+      return;
     }
 
     if (payload) {

From b4da5c19b219b6647646a006db942dc854643bac Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Mon, 11 Dec 2023 14:38:53 -0800
Subject: [PATCH 5/7] Add tests for the new ToggleJson component

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../test/components/common/ToggleJson.test.ts | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts

diff --git a/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
new file mode 100644
index 000000000..dc736e646
--- /dev/null
+++ b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
@@ -0,0 +1,59 @@
+import CreateSchema from '@/components/issuance/schemas/CreateSchema.vue';
+import { shallowMount, mount, flushPromises } from '@vue/test-utils';
+import PrimeVue from 'primevue/config';
+import { describe, expect, test, vi } from 'vitest';
+import VueToastificationPlugin from 'vue-toastification';
+import { tryParseJson } from '@/helpers/jsonParsing';
+
+import ToggleJson from '@/components/common/ToggleJson.vue';
+
+const mountToggleJson = () =>
+	shallowMount(ToggleJson, {
+		props: {
+			toJson: () => {
+				return "{ 'testing': 1 }";
+			},
+			fromJson: (jsonRepresentation: string) => {
+				return tryParseJson<any>(jsonRepresentation);
+			},
+		},
+		slots: {
+			default: [CreateSchema, '<my-component />', 'text'],
+		},
+		global: {
+			plugins: [PrimeVue, VueToastificationPlugin],
+		},
+	});
+
+describe('Properly Toggle Json Input', () => {
+	test('reders properly', async () => {
+		const wrapper = mountToggleJson();
+
+		expect(wrapper.exists()).toBe(true);
+	});
+	test('text area is only shown after input is toggled', async () => {
+		const wrapper = mountToggleJson();
+		const wrapperVm = wrapper.vm as unknown as typeof ToggleJson;
+		const toJson = vi.spyOn(wrapperVm.props, 'toJson');
+		const fromJson = vi.spyOn(wrapperVm.props, 'fromJson');
+
+		expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(false);
+		// showRawJson;
+		expect(wrapper.findComponent({ name: 'InputSwitch' }).exists()).toBe(true);
+
+		expect(wrapper.findComponent({ name: 'CreateSchema' }).exists()).toBe(true);
+		wrapperVm.showRawJson = true;
+		await wrapperVm.toggleJson();
+
+		await flushPromises();
+
+		wrapperVm.showRawJson = false;
+		await wrapperVm.toggleJson();
+
+		await flushPromises();
+
+		expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(true);
+		expect(toJson).toHaveBeenCalled();
+		expect(fromJson).toHaveBeenCalled();
+	});
+});

From 868c4cbba6a1bb1b603749d6004791bcb81f4e30 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Mon, 11 Dec 2023 14:45:50 -0800
Subject: [PATCH 6/7] Corrected formatting in tests

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../test/components/common/ToggleJson.test.ts | 78 +++++++++----------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
index dc736e646..4188cc66d 100644
--- a/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
+++ b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
@@ -8,52 +8,52 @@ import { tryParseJson } from '@/helpers/jsonParsing';
 import ToggleJson from '@/components/common/ToggleJson.vue';
 
 const mountToggleJson = () =>
-	shallowMount(ToggleJson, {
-		props: {
-			toJson: () => {
-				return "{ 'testing': 1 }";
-			},
-			fromJson: (jsonRepresentation: string) => {
-				return tryParseJson<any>(jsonRepresentation);
-			},
-		},
-		slots: {
-			default: [CreateSchema, '<my-component />', 'text'],
-		},
-		global: {
-			plugins: [PrimeVue, VueToastificationPlugin],
-		},
-	});
+  shallowMount(ToggleJson, {
+    props: {
+      toJson: () => {
+        return "{ 'testing': 1 }";
+      },
+      fromJson: (jsonRepresentation: string) => {
+        return tryParseJson<any>(jsonRepresentation);
+      },
+    },
+    slots: {
+      default: [CreateSchema, '<my-component />', 'text'],
+    },
+    global: {
+      plugins: [PrimeVue, VueToastificationPlugin],
+    },
+  });
 
 describe('Properly Toggle Json Input', () => {
-	test('reders properly', async () => {
-		const wrapper = mountToggleJson();
+  test('reders properly', async () => {
+    const wrapper = mountToggleJson();
 
-		expect(wrapper.exists()).toBe(true);
-	});
-	test('text area is only shown after input is toggled', async () => {
-		const wrapper = mountToggleJson();
-		const wrapperVm = wrapper.vm as unknown as typeof ToggleJson;
-		const toJson = vi.spyOn(wrapperVm.props, 'toJson');
-		const fromJson = vi.spyOn(wrapperVm.props, 'fromJson');
+    expect(wrapper.exists()).toBe(true);
+  });
+  test('text area is only shown after input is toggled', async () => {
+    const wrapper = mountToggleJson();
+    const wrapperVm = wrapper.vm as unknown as typeof ToggleJson;
+    const toJson = vi.spyOn(wrapperVm.props, 'toJson');
+    const fromJson = vi.spyOn(wrapperVm.props, 'fromJson');
 
-		expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(false);
-		// showRawJson;
-		expect(wrapper.findComponent({ name: 'InputSwitch' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(false);
+    // showRawJson;
+    expect(wrapper.findComponent({ name: 'InputSwitch' }).exists()).toBe(true);
 
-		expect(wrapper.findComponent({ name: 'CreateSchema' }).exists()).toBe(true);
-		wrapperVm.showRawJson = true;
-		await wrapperVm.toggleJson();
+    expect(wrapper.findComponent({ name: 'CreateSchema' }).exists()).toBe(true);
+    wrapperVm.showRawJson = true;
+    await wrapperVm.toggleJson();
 
-		await flushPromises();
+    await flushPromises();
 
-		wrapperVm.showRawJson = false;
-		await wrapperVm.toggleJson();
+    wrapperVm.showRawJson = false;
+    await wrapperVm.toggleJson();
 
-		await flushPromises();
+    await flushPromises();
 
-		expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(true);
-		expect(toJson).toHaveBeenCalled();
-		expect(fromJson).toHaveBeenCalled();
-	});
+    expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(true);
+    expect(toJson).toHaveBeenCalled();
+    expect(fromJson).toHaveBeenCalled();
+  });
 });

From 8ccf13ebe0a61a89024105317b034a3a0a669c27 Mon Sep 17 00:00:00 2001
From: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
Date: Mon, 11 Dec 2023 15:16:51 -0800
Subject: [PATCH 7/7] Corrected type error with wrapperVm in ToggleJson

Signed-off-by: Gavin Jaeger-Freeborn <gavinfreeborn@gmail.com>
---
 .../frontend/test/components/common/ToggleJson.test.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
index 4188cc66d..57a660dc3 100644
--- a/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
+++ b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
@@ -33,7 +33,7 @@ describe('Properly Toggle Json Input', () => {
   });
   test('text area is only shown after input is toggled', async () => {
     const wrapper = mountToggleJson();
-    const wrapperVm = wrapper.vm as unknown as typeof ToggleJson;
+    const wrapperVm = wrapper.vm as any;
     const toJson = vi.spyOn(wrapperVm.props, 'toJson');
     const fromJson = vi.spyOn(wrapperVm.props, 'fromJson');