From fe20bc2e584f4680f430bf7db4a07e1aaf999127 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Thu, 23 Jan 2025 12:56:20 +0000
Subject: [PATCH 1/2] Fix reduced animation setting not working inside mutation
 form

---
 src/App.vue                      | 12 +++---------
 src/components/cylc/Mutation.vue | 13 +++++++++++++
 src/plugins/vuetify.js           | 19 +++++++++++++++++++
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 87757ac2a..64926fd32 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script setup>
 import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { useJobTheme, useReducedAnimation } from '@/composables/localStorage'
+import { useJobTheme } from '@/composables/localStorage'
+import { useDynamicVuetifyDefaults } from '@/plugins/vuetify'
 
 const DEFAULT_LAYOUT = 'empty'
 const route = useRoute()
@@ -39,14 +40,7 @@ const showSidebar = computed(() => route.meta.showSidebar ?? true)
 
 const jobTheme = useJobTheme()
 
-const reducedAnimation = useReducedAnimation()
-
-const vuetifyDefaults = computed(() => ({
-  global: {
-    transition: reducedAnimation.value ? 'no' : undefined,
-    ripple: reducedAnimation.value ? false : undefined,
-  }
-}))
+const vuetifyDefaults = useDynamicVuetifyDefaults()
 
 onMounted(() => {
   // apply stored application font-size
diff --git a/src/components/cylc/Mutation.vue b/src/components/cylc/Mutation.vue
index 1971bf025..71875d6df 100644
--- a/src/components/cylc/Mutation.vue
+++ b/src/components/cylc/Mutation.vue
@@ -16,6 +16,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
+  <!-- Have to repeat these defaults as the ones set in App.vue don't make it through
+  the parent v-dialog - see https://github.com/vuetifyjs/vuetify/issues/18123 -->
+  <v-defaults-provider :defaults="vuetifyDefaults">
     <v-card>
       <!-- the mutation title -->
       <v-card-title class="py-3">
@@ -121,6 +124,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
       </v-snackbar>
     </v-card>
+  </v-defaults-provider>
 </template>
 
 <script>
@@ -133,6 +137,7 @@ import {
   mutationStatus
 } from '@/utils/aotf'
 import { mdiClose } from '@mdi/js'
+import { useDynamicVuetifyDefaults } from '@/plugins/vuetify'
 
 export default {
   name: 'mutation',
@@ -171,6 +176,14 @@ export default {
     },
   },
 
+  setup () {
+    const vuetifyDefaults = useDynamicVuetifyDefaults()
+
+    return {
+      vuetifyDefaults,
+    }
+  },
+
   data: () => ({
     isValid: false,
     submitting: false,
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 86fb125cd..68fcf411a 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { computed } from 'vue'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 import { VAutocomplete } from 'vuetify/components/VAutocomplete'
 import { VCombobox } from 'vuetify/components/VCombobox'
@@ -23,6 +24,7 @@ import { VTextarea } from 'vuetify/components/VTextarea'
 import { VTextField } from 'vuetify/components/VTextField'
 import colors from 'vuetify/util/colors'
 import { mdiClose } from '@mdi/js'
+import { useReducedAnimation } from '@/composables/localStorage'
 
 const inputDefaults = Object.fromEntries([
   VAutocomplete,
@@ -76,3 +78,20 @@ export const vuetifyOptions = {
     ...inputDefaults
   },
 }
+
+/**
+ * Composable that provides Vuetify defaults that can change at runtime, as opposed to
+ * the static defaults provided in `createVuetify(vuetifyOptions)`.
+ *
+ * For use with a v-defaults-provider.
+ */
+export function useDynamicVuetifyDefaults () {
+  const reducedAnimation = useReducedAnimation()
+
+  return computed(() => ({
+    global: {
+      transition: reducedAnimation.value ? 'no' : undefined,
+      ripple: reducedAnimation.value ? false : undefined,
+    }
+  }))
+}

From 4c55a9d508249b90c226c27f3c654c73ea88a1fb Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Thu, 23 Jan 2025 12:56:20 +0000
Subject: [PATCH 2/2] Move graphqlFormGenerator defaults into
 v-defaults-provider

---
 src/components/cylc/Mutation.vue              |  3 +-
 .../graphqlFormGenerator/EditRuntimeForm.vue  |  1 -
 .../graphqlFormGenerator/FormInput.vue        |  1 -
 .../components/vuetify.js                     | 19 +++++---
 src/plugins/vuetify.js                        | 46 +++++++++++--------
 5 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/src/components/cylc/Mutation.vue b/src/components/cylc/Mutation.vue
index 71875d6df..75397f321 100644
--- a/src/components/cylc/Mutation.vue
+++ b/src/components/cylc/Mutation.vue
@@ -138,6 +138,7 @@ import {
 } from '@/utils/aotf'
 import { mdiClose } from '@mdi/js'
 import { useDynamicVuetifyDefaults } from '@/plugins/vuetify'
+import { inputDefaults } from '@/components/graphqlFormGenerator/components/vuetify'
 
 export default {
   name: 'mutation',
@@ -177,7 +178,7 @@ export default {
   },
 
   setup () {
-    const vuetifyDefaults = useDynamicVuetifyDefaults()
+    const vuetifyDefaults = useDynamicVuetifyDefaults(inputDefaults)
 
     return {
       vuetifyDefaults,
diff --git a/src/components/graphqlFormGenerator/EditRuntimeForm.vue b/src/components/graphqlFormGenerator/EditRuntimeForm.vue
index a352c725c..684571fc2 100644
--- a/src/components/graphqlFormGenerator/EditRuntimeForm.vue
+++ b/src/components/graphqlFormGenerator/EditRuntimeForm.vue
@@ -223,7 +223,6 @@ export default {
     getInputProps (fieldName) {
       const gqlType = findByName(this.type.fields, fieldName).type
       return {
-        ...VuetifyConfig.defaultProps,
         gqlType,
         ...getComponentProps(gqlType, NamedTypes, VuetifyConfig.kinds)
       }
diff --git a/src/components/graphqlFormGenerator/FormInput.vue b/src/components/graphqlFormGenerator/FormInput.vue
index 88e355201..f01d0f86c 100644
--- a/src/components/graphqlFormGenerator/FormInput.vue
+++ b/src/components/graphqlFormGenerator/FormInput.vue
@@ -96,7 +96,6 @@ export default {
 
     // merge this in with default and override props
     const propGroups = [
-      VuetifyConfig.defaultProps,
       componentProps,
       this.propOverrides || {}
     ]
diff --git a/src/components/graphqlFormGenerator/components/vuetify.js b/src/components/graphqlFormGenerator/components/vuetify.js
index 757229f5f..c1c009322 100644
--- a/src/components/graphqlFormGenerator/components/vuetify.js
+++ b/src/components/graphqlFormGenerator/components/vuetify.js
@@ -24,6 +24,7 @@ import GList from '@/components/graphqlFormGenerator/components/List.vue'
 import GObject from '@/components/graphqlFormGenerator/components/Object.vue'
 import GBroadcastSetting from '@/components/graphqlFormGenerator/components/BroadcastSetting.vue'
 import GMapItem from '@/components/graphqlFormGenerator/components/MapItem.vue'
+import { inputComponents } from '@/plugins/vuetify'
 
 const NumberFieldProps = {
   is: VTextField,
@@ -55,14 +56,18 @@ export const RULES = {
 
 export const RUNTIME_SETTING = 'RuntimeSetting'
 
-export default {
-  defaultProps: {
-    // default props for all form inputs
-    variant: 'filled',
-    density: 'compact',
-    hideDetails: false,
-  },
+/** Defaults for all form inputs */
+export const inputDefaults = Object.fromEntries(
+  inputComponents.map((name) => [
+    name,
+    {
+      variant: 'filled',
+      hideDetails: false,
+    }
+  ])
+)
 
+export default {
   namedTypes: {
     // registry of GraphQL "named types" (e.g. String)
     // {namedType: {is: ComponentClass, prop1: value, ...}}
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 68fcf411a..fc92bcfb5 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -25,22 +25,27 @@ import { VTextField } from 'vuetify/components/VTextField'
 import colors from 'vuetify/util/colors'
 import { mdiClose } from '@mdi/js'
 import { useReducedAnimation } from '@/composables/localStorage'
+import { merge } from 'lodash-es'
 
-const inputDefaults = Object.fromEntries([
+export const inputComponents = [
   VAutocomplete,
   VCombobox,
   VSelect,
   VTextarea,
-  VTextField
-].map(({ name }) => [
-  name,
-  {
-    density: 'compact',
-    variant: 'outlined',
-    clearIcon: mdiClose,
-    hideDetails: true,
-  }
-]))
+  VTextField,
+].map(({ name }) => name)
+
+const inputDefaults = Object.fromEntries(
+  inputComponents.map((name) => [
+    name,
+    {
+      density: 'compact',
+      variant: 'outlined',
+      clearIcon: mdiClose,
+      hideDetails: true,
+    }
+  ])
+)
 
 /**
  * @type {import('vuetify').VuetifyOptions}
@@ -84,14 +89,19 @@ export const vuetifyOptions = {
  * the static defaults provided in `createVuetify(vuetifyOptions)`.
  *
  * For use with a v-defaults-provider.
+ *
+ * @param {Object=} other - Additional defaults to provide.
  */
-export function useDynamicVuetifyDefaults () {
+export function useDynamicVuetifyDefaults (other = {}) {
   const reducedAnimation = useReducedAnimation()
 
-  return computed(() => ({
-    global: {
-      transition: reducedAnimation.value ? 'no' : undefined,
-      ripple: reducedAnimation.value ? false : undefined,
-    }
-  }))
+  return computed(() => merge(
+    {
+      global: {
+        transition: reducedAnimation.value ? 'no' : undefined,
+        ripple: reducedAnimation.value ? false : undefined,
+      },
+    },
+    other
+  ))
 }