@raclettejs/workbench 0.1.35 → 0.1.36-canary.0

package/plugins/raclette__cache/raclette.plugin.ts

@@ -0,0 +1,8 @@
+export default {
+  name: "cache",
+  author: "raclette",
+  version: "0.0.1",
+  description: "Workbench admin tools for inspecting the shared Valkey cache",
+  backendDir: "./backend",
+  frontendDir: "./frontend",
+}

package/services/frontend/src/app/components/dynamicForm/DynamicForm.vue

@@ -6,7 +6,7 @@
     >
       <div class="tw:flex tw:min-h-0 tw:w-full tw:flex-col">
         <header
-          v-if="title || routeBackInteractionLinkId"
+          v-if="!hideTitle && (title || routeBackInteractionLinkId)"
           class="tw:flex tw:items-center tw:justify-between tw:gap-3 tw:pt-3"
         >
           <div class="tw:flex tw:min-w-0 tw:items-center tw:gap-2">
@@ -86,6 +86,8 @@ const props = withDefaults(
     /** When false, constrains width (previous default). Default true fills the layout. */
     fluid?: boolean
     routeBackInteractionLinkId?: string
+    /** Hides title and inline back (e.g. when StepNavigator provides exit back) */
+    hideTitle?: boolean
     density?: "compact" | "comfortable" | "spacious"
   }>(),
   {

package/services/frontend/src/app/components/interactionLink/InteractionLinkBehaviorForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="tw:box-border tw:flex tw:w-full tw:min-w-0 tw:flex-col">
+    <div v-if="intro" class="tw:grid tw:grid-cols-12 tw:px-4 tw:mdpx-5 tw:pt-3">
+      <div class="tw:col-span-12 tw:mb-2">
+        <v-alert type="info" variant="tonal" density="comfortable">
+          {{ intro }}
+        </v-alert>
+      </div>
+    </div>
+
+    <div
+      v-if="showLinkedComposition"
+      class="tw:grid tw:grid-cols-12 tw:rounded-md tw:p-2 tw:px-4 tw:mdpx-5"
+    >
+      <label class="tw:col-span-5 tw:py-2">
+        <div
+          class="tw:font-semibold tw:leading-5 tw:text-[color:rgb(var(--v-theme-on-surface))]"
+        >
+          {{ $t("workbench.interactionLinkConfiguration.composition.title") }}
+        </div>
+        <div
+          class="tw:mt-1 tw:max-w-prose tw:leading-snug tw:text-[color:rgb(var(--v-theme-on-surface))] tw:opacity-80 tw:text-sm"
+        >
+          {{
+            $t(
+              "workbench.compositionConfiguration.integration.linkedCompositionDescription",
+            )
+          }}
+        </div>
+      </label>
+      <div class="tw:col-span-7 tw:flex tw:items-center">
+        <v-text-field
+          :model-value="linkedCompositionTitle"
+          readonly
+          variant="outlined"
+          density="comfortable"
+          hide-details
+          prepend-inner-icon="mdi-file-document-outline"
+          class="tw:w-full"
+        />
+      </div>
+    </div>
+
+    <!-- @vue-generic {InteractionLinkCreate | InteractionLinkUpdate} -->
+    <DynamicForm
+      ref="dynamicFormRef"
+      v-model="interactionLink"
+      :data="behaviorFields"
+      :disabled
+      :fluid="fluid"
+      :validate-on-change="false"
+      :title="title"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  InteractionLinkCreate,
+  InteractionLinkUpdate,
+} from "@raclettejs/core"
+import DynamicForm from "@app/components/dynamicForm/DynamicForm.vue"
+import { useTemplateRef } from "vue"
+import { useInteractionLinkBehaviorFields } from "@app/composables/useInteractionLinkBehaviorFields"
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean
+    title?: string
+    fluid?: boolean
+    intro?: string
+    showLinkedComposition?: boolean
+    linkedCompositionTitle?: string
+  }>(),
+  {
+    fluid: true,
+    showLinkedComposition: false,
+  },
+)
+
+const interactionLink = defineModel<
+  InteractionLinkCreate | InteractionLinkUpdate
+>({ required: true })
+
+const dynamicFormRef = useTemplateRef("dynamicFormRef")
+const { behaviorFields } = useInteractionLinkBehaviorFields()
+
+const validate = (): boolean => {
+  const validateAllFields = dynamicFormRef.value?.validateAllFields
+
+  if (validateAllFields) {
+    return !!validateAllFields()
+  }
+
+  return true
+}
+
+defineExpose({ validate })
+</script>

package/services/frontend/src/app/components/stepNavigator/StepNavigator.vue

@@ -7,8 +7,25 @@
       permanent
       :width="NAVIGATION_HEIGHT"
     >
-      <div class="tw:size-full tw:flex tw:items-center tw:align-center">
-        <div class="tw:overflow-x-auto tw:w-full">
+      <div
+        class="tw:flex tw:size-full tw:w-full tw:items-center"
+        :class="showExitBack ? 'tw:gap-1 tw:px-2' : ''"
+      >
+        <div
+          v-if="showExitBack"
+          class="tw:flex tw:size-12 tw:flex-shrink-0 tw:items-center tw:justify-center"
+        >
+          <v-btn
+            v-if="isFirstStep"
+            @click="onExitBack"
+            :disabled="isSaving"
+            icon="mdi-chevron-left"
+            variant="text"
+            :aria-label="$t('workbench.global.back')"
+          />
+        </div>
+
+        <div class="tw:min-w-0 tw:flex-1 tw:overflow-x-auto">
           <div
             class="tw:flex tw:items-center tw:justify-center tw:min-w-max tw:px-4"
           >
@@ -19,8 +36,10 @@
                   @click="
                     allowFreeNavigation ? setCurrentStep(index + 1) : null
                   "
-                  class="tw:flex tw:items-center tw:cursor-pointer tw:transition-all tw:duration-200 tw:group tw:flex-shrink-0"
+                  class="tw:flex tw:items-center tw:transition-all tw:duration-200 tw:group tw:flex-shrink-0"
                   :class="{
+                    'tw:cursor-pointer': allowFreeNavigation,
+                    'tw:cursor-default': !allowFreeNavigation,
                     'tw:opacity-100': currentStepIndex >= index + 1,
                     'tw:opacity-60':
                       currentStepIndex < index + 1 &&
@@ -31,11 +50,15 @@
                   <div
                     class="tw:w-10 tw:h-10 tw:rounded-full tw:flex tw:items-center tw:justify-center tw:transition-all tw:duration-200 tw:border-2"
                     :class="{
-                      'tw:bg-[#DD8B41] tw:border-[#DD8B41] tw:text-white':
+                      'tw:bg-[color:rgb(var(--v-theme-primary))] tw:border-[color:rgb(var(--v-theme-primary-darken-1))] tw:text-white':
                         currentStepIndex === index + 1,
                       'tw:bg-green-500 tw:border-green-500 tw:text-white':
                         currentStepIndex > index + 1,
-                      'tw:bg-white tw:border-gray-300 tw:text-gray-500 group-hover:tw:border-blue-300':
+                      'tw:bg-white tw:border-gray-300 tw:text-gray-500':
+                        currentStepIndex !== index + 1 &&
+                        currentStepIndex < index + 1,
+                      'group-hover:tw:border-blue-300':
+                        allowFreeNavigation &&
                         currentStepIndex !== index + 1 &&
                         currentStepIndex < index + 1,
                     }"
@@ -56,17 +79,20 @@
                       v-if="step.title"
                       class="tw:text-sm tw:font-medium tw:transition-colors tw:duration-200 tw:whitespace-nowrap"
                       :class="{
-                        'tw:text-[#DD8B41]': currentStepIndex === index + 1,
+                        'tw:text-[color:rgb(var(--v-theme-primary-darken-2))] tw:dark:text-[color:rgb(var(--v-theme-primary))]':
+                          currentStepIndex === index + 1,
                         'tw:text-green-600': currentStepIndex > index + 1,
-                        'tw:text-gray-600 group-hover:tw:text-blue-600':
+                        'tw:text-gray-500 tw:dark:text-gray-300':
                           currentStepIndex !== index + 1,
+                        'group-hover:tw:text-blue-600':
+                          allowFreeNavigation && currentStepIndex !== index + 1,
                       }"
                     >
                       {{ step.title }}
                     </div>
                     <div
                       v-if="step.subtitle"
-                      class="tw:text-xs tw:text-gray-500 tw:whitespace-nowrap"
+                      class="tw:text-xs tw:text-gray-500 tw:dark:text-gray-400 tw:whitespace-nowrap"
                     >
                       {{ step.subtitle }}
                     </div>
@@ -86,22 +112,27 @@
             </div>
           </div>
         </div>
+
+        <!-- Spacer to make sure content is still centered -->
+        <div
+          v-if="showExitBack"
+          class="tw:w-12 tw:flex-shrink-0"
+          aria-hidden="true"
+        />
       </div>
     </v-navigation-drawer>
 
-    <!-- Step Content Container -->
-    <!-- <div class="tw:min-h-full"> -->
     <slot v-bind="{ currentStep, currentStepIndex }" />
     <!-- </div> -->
 
     <v-navigation-drawer location="bottom" permanent :width="84">
       <div
-        class="tw:flex tw:h-full tw:items-center tw:justify-between tw:container tw:mx-auto tw:px-4"
+        class="tw:flex tw:h-full tw:items-center tw:justify-between tw:mx-auto tw:px-4"
       >
         <!-- Left side - Back button -->
         <div>
           <v-btn
-            v-if="steps.length > 1"
+            v-if="showFooterBackButton"
             @click="previousStep"
             :disabled="isFirstStep || isSaving"
             color="primary"
@@ -122,8 +153,22 @@
             :text="$t('workbench.global.save')"
           />
 
+          <template v-if="currentSecondaryActions.length">
+            <v-btn
+              v-for="action in currentSecondaryActions"
+              :key="action.id"
+              @click="onCustomAction(action.id, action.skipValidation)"
+              :disabled="isSaving"
+              :color="action.color ?? 'primary'"
+              :variant="action.variant ?? 'outlined'"
+              :prepend-icon="action.prependIcon"
+              :append-icon="action.appendIcon"
+              :text="$t(action.labelKey)"
+            />
+          </template>
+
           <v-btn
-            v-if="!isLastStep"
+            v-if="showDefaultNextButton"
             @click="nextStep()"
             :disabled="isSaving"
             color="primary"
@@ -132,7 +177,19 @@
           />
 
           <v-btn
-            v-else-if="!showSaveButton"
+            v-else-if="showCustomPrimaryButton"
+            @click="onCustomAction(currentStep!.primaryActionId!)"
+            :disabled="isSaving"
+            :loading="isSaving"
+            :color="currentStepPrimaryColor"
+            variant="flat"
+            :prepend-icon="currentStepPrimaryPrependIcon"
+            :append-icon="currentStepPrimaryAppendIcon"
+            :text="currentStepPrimaryLabel"
+          />
+
+          <v-btn
+            v-else-if="showDefaultFinishButton"
             @click="save(true)"
             :disabled="isSaving"
             :loading="isSaving"
@@ -148,7 +205,9 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue"
-import { Step, StepChangeType } from "./StepNavigatorTypes"
+import { useI18n } from "vue-i18n"
+import { useRouteState } from "@raclettejs/core/orchestrator/composables"
+import { Step, StepChangeType, StepFooterAction } from "./StepNavigatorTypes"
 
 const NAVIGATION_HEIGHT = 84
 
@@ -161,6 +220,14 @@ const props = withDefaults(
     canFinish?: boolean
     isSaving?: boolean
     showSaveButton?: boolean
+    /** When true, Next is shown on non-last steps even if `showSaveButton` is enabled */
+    showNextWithSave?: boolean
+    /** When true with `showSaveButton`, last step shows Save & Finish in addition to Save */
+    showFinishOnLastStep?: boolean
+    /** Back + title above content on the first step (e.g. return to list) */
+    showExitBack?: boolean
+    headerTitle?: string
+    exitBackInteractionLinkId?: string
     paddingTop?: boolean
     paddingBottom?: boolean
   }>(),
@@ -177,14 +244,79 @@ const emit = defineEmits<{
   "validation-failed": [{ step: Step; stepIndex: number }]
   save: [void]
   "save-and-finish": [void]
+  "custom-action": [string]
+  "exit-back": [void]
 }>()
 
+const { t } = useI18n()
+const { triggerInteractionLinkById } = useRouteState()
+
 const currentStepIndex = ref(props.initialStep)
 
 const currentStep = computed(() => props.steps[currentStepIndex.value - 1])
 const isFirstStep = computed(() => currentStepIndex.value === 1)
 const isLastStep = computed(() => currentStepIndex.value === props.steps.length)
 
+const showFooterBackButton = computed(
+  () => props.steps.length > 1 && !currentStep.value?.disableFooterBack,
+)
+
+const showDefaultNextButton = computed(() => {
+  if (isLastStep.value || currentStep.value?.primaryAction === "custom") {
+    return false
+  }
+
+  if (props.showNextWithSave) {
+    return true
+  }
+
+  return !props.showSaveButton
+})
+
+const showCustomPrimaryButton = computed(
+  () => currentStep.value?.primaryAction === "custom",
+)
+
+const showDefaultFinishButton = computed(() => {
+  if (!isLastStep.value || currentStep.value?.primaryAction === "custom") {
+    return false
+  }
+
+  if (props.showFinishOnLastStep) {
+    return true
+  }
+
+  return !props.showSaveButton
+})
+
+const currentStepPrimaryLabel = computed(() =>
+  currentStep.value?.primaryLabelKey
+    ? t(currentStep.value.primaryLabelKey)
+    : "",
+)
+
+const currentStepPrimaryColor = computed(() =>
+  isLastStep.value && currentStep.value?.primaryAction === "custom"
+    ? "success"
+    : "primary",
+)
+
+const currentStepPrimaryPrependIcon = computed(() =>
+  isLastStep.value && currentStep.value?.primaryAction === "custom"
+    ? "mdi-check"
+    : undefined,
+)
+
+const currentStepPrimaryAppendIcon = computed(() =>
+  !isLastStep.value && currentStep.value?.primaryAction === "custom"
+    ? "mdi-chevron-right"
+    : undefined,
+)
+
+const currentSecondaryActions = computed<StepFooterAction[]>(
+  () => currentStep.value?.secondaryActions ?? [],
+)
+
 const isStepAccessible = (stepNumber: number) => {
   if (props.allowFreeNavigation) return true
 
@@ -208,7 +340,10 @@ const validateCurrentStep = () => {
   }
 }
 
-const setCurrentStep = (step: number) => {
+const setCurrentStep = (
+  step: number,
+  options?: { skipValidation?: boolean },
+) => {
   if (currentStepIndex.value === step) {
     // Step is already active
     return
@@ -219,13 +354,8 @@ const setCurrentStep = (step: number) => {
     return
   }
 
-  // // Validate step access
-  // if (!isStepAccessible(step)) {
-  //   return
-  // }
-
   // If moving forward (not backward), validate current step first
-  if (step > currentStepIndex.value) {
+  if (!options?.skipValidation && step > currentStepIndex.value) {
     const isValid = validateCurrentStep()
     if (!isValid) {
       emit("validation-failed", {
@@ -249,6 +379,18 @@ const setCurrentStep = (step: number) => {
   })
 }
 
+const onCustomAction = (actionId: string, skipValidation = false) => {
+  if (!skipValidation && !validateCurrentStep()) {
+    emit("validation-failed", {
+      step: currentStep.value,
+      stepIndex: currentStepIndex.value - 1,
+    })
+    return
+  }
+
+  emit("custom-action", actionId)
+}
+
 const save = (finish = false) => {
   if (validateCurrentStep()) {
     if (finish) {
@@ -259,9 +401,18 @@ const save = (finish = false) => {
   }
 }
 
+const onExitBack = () => {
+  if (props.exitBackInteractionLinkId) {
+    triggerInteractionLinkById(props.exitBackInteractionLinkId)
+    return
+  }
+
+  emit("exit-back")
+}
+
 // Public methods (exposed to parent)
-const goToStep = (step) => {
-  setCurrentStep(step)
+const goToStep = (step: number, options?: { skipValidation?: boolean }) => {
+  setCurrentStep(step, options)
 }
 
 const nextStep = () => {

package/services/frontend/src/app/components/stepNavigator/StepNavigatorTypes.ts

@@ -1,8 +1,26 @@
+export type StepFooterAction = {
+  id: string
+  labelKey: string
+  color?: string
+  variant?: "flat" | "outlined" | "text" | "elevated" | "tonal" | "plain"
+  prependIcon?: string
+  appendIcon?: string
+  /** When true, the action does not run the step validator before emitting */
+  skipValidation?: boolean
+}
+
 export type Step<T = string> = {
   id: T
   title?: string
   subtitle?: string
   validator?: () => boolean
+  /** Primary footer button: `next` (default for non-last steps) or `custom` */
+  primaryAction?: "next" | "custom"
+  primaryActionId?: string
+  primaryLabelKey?: string
+  secondaryActions?: StepFooterAction[]
+  /** When true, the footer Back button is hidden on this step */
+  disableFooterBack?: boolean
 }
 
 export type StepChangeType<T = string> = {

package/services/frontend/src/app/composables/useInteractionLinkBehaviorFields.ts

@@ -0,0 +1,83 @@
+import type {
+  InteractionLinkCreate,
+  InteractionLinkUpdate,
+} from "@raclettejs/core"
+import type { DynamicFormItem } from "@app/components/dynamicForm/DynamicFormTypes"
+import {
+  DEFAULT_SLOT_NAME,
+  DEFAULT_INLINE_SLOT_NAME,
+  DEFAULT_MODAL_SLOT_NAME,
+} from "@raclettejs/core/orchestrator/router/routeParserHelper"
+import { computed } from "vue"
+import { useI18n } from "vue-i18n"
+
+export const useInteractionLinkBehaviorFields = () => {
+  const { t } = useI18n()
+
+  const behaviorFields = computed<
+    DynamicFormItem<InteractionLinkCreate | InteractionLinkUpdate>[]
+  >(() => [
+    {
+      title: t("workbench.interactionLinkConfiguration.description.title"),
+      description: t(
+        "workbench.interactionLinkConfiguration.description.description",
+      ),
+      inputType: "textarea",
+      field: "description",
+      prependIcon: "text",
+    },
+    {
+      title: t("workbench.interactionLinkConfiguration.tags.title"),
+      description: t("workbench.interactionLinkConfiguration.tags.description"),
+      inputType: "tags",
+      field: "tags",
+      prependIcon: "tag-multiple",
+    },
+    {
+      divider: t("workbench.interactionLinkConfiguration.dividers.behavior"),
+    },
+    {
+      title: t("workbench.interactionLinkConfiguration.slotType.title"),
+      description: t(
+        "workbench.interactionLinkConfiguration.slotType.description",
+      ),
+      inputType: "select",
+      field: "slotType",
+      selectItems: [
+        DEFAULT_SLOT_NAME,
+        DEFAULT_MODAL_SLOT_NAME,
+        DEFAULT_INLINE_SLOT_NAME,
+      ],
+      prependIcon: "dock-window",
+      validation: {
+        required: true,
+      },
+    },
+    {
+      title: t("workbench.interactionLinkConfiguration.triggers.title"),
+      description: t(
+        "workbench.interactionLinkConfiguration.triggers.description",
+      ),
+      inputType: "triggers",
+      field: "triggers",
+    },
+    {
+      title: t("workbench.interactionLinkConfiguration.queryParameters.title"),
+      description: t(
+        "workbench.interactionLinkConfiguration.queryParameters.description",
+      ),
+      inputType: "list",
+      field: "queryParameters",
+    },
+    {
+      title: t("workbench.interactionLinkConfiguration.isLandingPage.title"),
+      description: t(
+        "workbench.interactionLinkConfiguration.isLandingPage.description",
+      ),
+      inputType: "switch",
+      field: "isLandingPage",
+    },
+  ])
+
+  return { behaviorFields }
+}

package/services/frontend/src/app/composables/useRacletteUserIsAdmin.ts

@@ -0,0 +1,25 @@
+import type { User } from "@raclettejs/core"
+import {
+  isSystemAdminTag,
+  userHasAdminTag,
+} from "@shared/helper/adminTag"
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import { computed } from "vue"
+
+export const useRacletteUserIsAdmin = () => {
+  const { $data } = usePluginApi("raclette__core")
+
+  const { data: tags, isLoading: tagsLoading } = $data.tag.getAll({
+    options: { immediate: true },
+  })
+
+  const adminTag = computed(() => {
+    if (!tags.value) return undefined
+    return Object.values(tags.value).find(isSystemAdminTag)
+  })
+
+  const isRacletteUserAdmin = (user: User | null | undefined): boolean =>
+    userHasAdminTag(user, adminTag.value)
+
+  return { isRacletteUserAdmin, adminTag, tagsLoading }
+}

package/services/frontend/src/orchestrator/assets/styles/themes/light.ts

@@ -6,7 +6,7 @@ export default {
   surface: "#ffffff",
   "surface-light": "#ffffff",
   primary: "#DD8B41",
-  "primary-darken-1": "#B26F34",
+  "primary-darken-1": "#DA7C2B",
   "primary-darken-2": "#9D612E",
   "primary-darken-3": "#875428",
   "primary-darken-4": "#724622",