fix(entities-plugins): plugin form UX phase 2 [KM-61] (#1301)

* fix(entities-plugins): plugin form UX phase 2 * fix(entities-plugins): address feedback * fix(entities-plugins): address feedback 2 * test(entities-plugins): fix tests
Kong · Apr 3, 2024 · 210a0c2 · 210a0c2
1 parent 971b6ea
commit 210a0c2
Show file tree

Hide file tree

Showing 62 changed files with 2,157 additions and 1,180 deletions.
diff --git a/packages/core/forms/src/generator/FormGenerator.vue b/packages/core/forms/src/generator/FormGenerator.vue
@@ -30,12 +30,31 @@
       :key="`group-${i}`"
     >
       <KCollapse
-        v-if="group.collapsible"
-        :model-value="group.collapsedByDefault === undefined ? false : group.collapsedByDefault"
-        :title="group.legend"
+        v-if="group.collapsible !== undefined && group.collapsible !== false"
+        class="root-level-collapse"
+        :model-value="false"
+        :title="group.collapsible.title"
       >
+        <template
+          v-if="group.collapsible.description"
+          #visible-content
+        >
+          {{ group.collapsible.description }}
+        </template>
+
+        <slot
+          v-if="group.slots?.beforeContent"
+          :name="group.slots?.beforeContent"
+        />
+
+        <slot
+          v-if="group.fields.length === 0 && group.slots?.emptyState"
+          :name="group.slots?.emptyState"
+        />
+
         <component
           :is="tag"
+          v-else
           :class="getFieldRowClasses(group)"
         >
           <template
@@ -55,6 +74,37 @@
             />
           </template>
         </component>
+
+        <KCollapse
+          v-if="group.collapsible !== true && group.collapsible.nestedCollapsible && group.collapsible.nestedCollapsible.fields.length > 0"
+          class="nested-collapse"
+          :model-value="collapseStates[`group-${i}-nested`] ?? true"
+          trigger-alignment="leading"
+          :trigger-label="(collapseStates[`group-${i}-nested`] ?? true) ? group.collapsible.nestedCollapsible.triggerLabel.expand : group.collapsible.nestedCollapsible.triggerLabel.collapse"
+          @update:model-value="(value) => collapseStates[`group-${i}-nested`] = value"
+        >
+          <component
+            :is="tag"
+            :class="getFieldRowClasses(group)"
+          >
+            <template
+              v-for="field in group.collapsible.nestedCollapsible.fields"
+              :key="field.model"
+            >
+              <form-group
+                v-if="fieldVisible(field)"
+                ref="children"
+                :errors="errors"
+                :field="field"
+                :model="model"
+                :options="options"
+                :vfg="vfg"
+                @model-updated="onModelUpdated"
+                @validated="onFieldValidated"
+              />
+            </template>
+          </component>
+        </KCollapse>
       </KCollapse>
 
       <component
@@ -87,6 +137,17 @@
 </template>
 
 <script>
+/**
+ * @typedef {import('./types').FGCollapsibleOptions} FGCollapsibleOptions
+ * @typedef {import('./types').FGSlots} FGSlots
+ *
+ * @typedef PartialGroup
+ * @prop {FGCollapsibleOptions=} collapsible
+ * @prop {FGSlots=} slots
+ *
+ * @typedef {Record<string, any> & PartialGroup} Group
+ */
+
 import { get as objGet, forEach, isFunction, isNil, isArray } from 'lodash'
 import formMixin from './FormMixin.vue'
 import formGroup from './FormGroup.vue'
@@ -148,6 +209,7 @@ export default {
       vfg: this,
       errors: [], // Validation errors,
       children: ref([]),
+      collapseStates: {},
     }
   },
 
@@ -163,6 +225,7 @@ export default {
       return res
     },
     groups() {
+      /** @type {Group[]} */
       const res = []
       if (this.schema && this.schema.groups) {
         forEach(this.schema.groups.slice(0), group => {
@@ -201,7 +264,7 @@ export default {
   mounted() {
     this.$nextTick(() => {
       if (this.model) {
-        // First load, running validation if neccessary
+        // First load, running validation if necessary
         if (this.options.validateAfterLoad === true && this.isNewModel !== true) {
           this.validate()
         } else {
@@ -304,6 +367,10 @@ export default {
     box-sizing: border-box;
   }
 
+  .hidden-field {
+    display: none;
+  }
+
   .form-group {
     margin-bottom: 24px;
 
@@ -530,6 +597,7 @@ export default {
 .vue-form-generator label {
   font-weight: 500;
 }
+
 .vue-form-generator .form-group input[type=radio] {
   align-items: center;
   appearance: none;
@@ -552,4 +620,20 @@ export default {
     background-color: currentColor;
   }
 }
+
+.vue-form-generator {
+  .root-level-collapse {
+    .k-collapse-heading {
+      margin-bottom: 0 !important;
+    }
+
+    .k-collapse-visible-content {
+      color: $kui-color-text-neutral;
+    }
+  }
+
+  .nested-collapse .k-collapse-heading {
+    margin-bottom: $kui-space-80 !important;
+  }
+}
 </style>
diff --git a/packages/core/forms/src/generator/types.ts b/packages/core/forms/src/generator/types.ts
@@ -0,0 +1,16 @@
+export type FGCollapsibleOptions = boolean | {
+  title?: string
+  description?: string
+  nestedCollapsible?: {
+    fields: any[],
+    triggerLabel: {
+      expand: string
+      collapse: string
+    }
+  }
+}
+
+export interface FGSlots {
+  beforeContent?: string
+  emptyState?: string
+}
diff --git a/packages/core/forms/src/index.ts b/packages/core/forms/src/index.ts
@@ -26,4 +26,5 @@ export const getSharedFormName = (modelName: string, enabledAcmeCustomTemplate =
 }
 
 export * from './const'
+export * from './types'
 export * as abstractField from './generator/fields/abstractField'
diff --git a/packages/core/forms/src/types.ts b/packages/core/forms/src/types.ts
@@ -0,0 +1 @@
+export * from './generator/types'
diff --git a/packages/core/forms/tsconfig.json b/packages/core/forms/tsconfig.json
@@ -10,7 +10,8 @@
       "cypress",
       "cypress/vue",
       "../../../cypress/support"
-    ]
+    ],
+    "allowJs": true
   },
   "include": [
     "src/**/*",