Merge pull request #1060 from bcgov/restore-json-toggle-schema

Correct ToggleJson support for creating schemas
bcgov · Apr 9, 2024 · afc4566 · afc4566
2 parents ea0d06f + b465dca
commit afc4566
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 14 deletions.
diff --git a/services/tenant-ui/frontend/src/assets/primevueOverrides/inputSwitch.scss b/services/tenant-ui/frontend/src/assets/primevueOverrides/inputSwitch.scss
@@ -2,20 +2,20 @@
 
 // Input Switches
 .p-inputswitch {
-  &.p-inputswitch-checked .p-inputswitch-slider {
+  &[data-p-highlight="true"] .p-inputswitch-slider {
     background: darken($tenant-ui-status-green-background, 20%);
     &::before {
       background-color: white !important;
     }
   }
-  .p-inputswitch-slider {
+  &[data-p-highlight="false"] .p-inputswitch-slider {
     background: darken($tenant-ui-status-red-background, 20%);
   }
   &:hover {
-    &.p-inputswitch-checked .p-inputswitch-slider {
+    &[data-p-highlight="true"] .p-inputswitch-slider {
       background: darken($tenant-ui-status-green-background, 40%) !important;
     }
-    .p-inputswitch-slider {
+    &[data-p-highlight="false"] .p-inputswitch-slider {
       background: darken($tenant-ui-status-red-background, 40%) !important;
     }
   }

diff --git a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
@@ -44,7 +44,7 @@ defineExpose({
 });
 
 const toggleJson = () => {
-  if (showRawJson.value) {
+  if (!showRawJson.value) {
     const res = props.toJson();
     if (res) {
       valuesJson.value = res;

diff --git a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
@@ -88,7 +88,7 @@ function jsonToCredentialValue(
     credentialValuesRaw.value = parsed;
     return parsed;
   } else {
-    toast.warning('The JSON you inputted has invalid syntax');
+    toast.warning('This JSON is invalid syntax');
     return undefined;
   }
 }

diff --git a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
@@ -204,15 +204,14 @@ function jsonToSchema(jsonString: string): SchemaSendRequest | undefined {
     formFields.version = parsed.schema_version;
     return parsed;
   } else {
-    toast.error('The JSON you inputted has invalid syntax');
+    toast.error('Invalid JSON detected');
     return undefined;
   }
 }
 // Form submission
 const submitted = ref(false);
 const handleSubmit = async (isFormValid: boolean) => {
   submitted.value = true;
-
   try {
     if (!isFormValid) return;
 

diff --git a/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
@@ -38,22 +38,26 @@ describe('Properly Toggle Json Input', () => {
     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;
+
+    // Ensure that toggling to works
     await wrapperVm.toggleJson();
+    await flushPromises();
+    expect(toJson).toHaveBeenCalled();
 
+    // Ensure text Textarea is properly displayed
+    wrapperVm.showRawJson = true;
     await flushPromises();
 
     expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(true);
-    expect(toJson).toHaveBeenCalled();
+
+    // Ensure toggling from json works
+    await wrapperVm.toggleJson();
+    await flushPromises();
     expect(fromJson).toHaveBeenCalled();
   });
 });