Tweak styling of new component, add deprecation warning to old component.

2025-01-15 12:24:33 +00:00 · 2025-01-15 12:24:33 +00:00 · 6dafe79e67
parent 96869c2b4d
commit 6dafe79e67
9 changed files with 68 additions and 70 deletions
--- a/packages/bbui/src/Tags/Tag.svelte
+++ b/packages/bbui/src/Tags/Tag.svelte
@ -6,6 +6,7 @@
  export let icon = ""
  export let avatar = ""
  export let invalid = false
+  export let emphasized = false
  export let disabled = false
  export let closable = false
 </script>
@ -13,6 +14,7 @@
 <div
  class:is-invalid={invalid}
  class:is-disabled={disabled}
+  class:is-emphasized={emphasized}
  class="spectrum-Tags-item"
  role="listitem"
 >
@ -40,4 +42,9 @@
    margin-bottom: 0;
    margin-top: 0;
  }
+
+  .is-emphasized {
+    border-color: var(--spectrum-global-color-blue-700);
+    color: var(--spectrum-global-color-blue-700);
+  }
 </style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@ -23,9 +23,8 @@
  let collectBlockAllowedSteps = [TriggerStepID.APP, TriggerStepID.WEBHOOK]
  let selectedAction
  let actions = Object.entries($automationStore.blockDefinitions.ACTION).filter(
-    entry => {
-      const [key] = entry
-      return key !== AutomationActionStepId.BRANCH
+    ([key, action]) => {
+      return key !== AutomationActionStepId.BRANCH && action.deprecated !== true
    }
  )
  let lockedFeatures = [
@ -187,11 +186,9 @@
            {:else if isDisabled}
              <Icon name="Help" tooltip={disabled()[idx].message} />
            {:else if action.new}
-              <div class="tag-color">
-                <Tags>
-                  <Tag>New</Tag>
-                </Tags>
-              </div>
+              <Tags>
+                <Tag emphasized>New</Tag>
+              </Tags>
            {/if}
          </div>
        </div>
@ -233,6 +230,10 @@
    grid-gap: var(--spectrum-alias-grid-baseline);
  }

+  .item :global(.spectrum-Tags-itemLabel) {
+    cursor: pointer;
+  }
+
  .item {
    cursor: pointer;
    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
@ -243,6 +244,8 @@
    border-radius: 5px;
    box-sizing: border-box;
    border-width: 2px;
+    min-height: 3.5rem;
+    display: flex;
  }
  .item:not(.disabled):hover,
  .selected {
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@ -1,6 +1,13 @@
 <script>
  import { automationStore, selectedAutomation } from "@/stores/builder"
-  import { Icon, Body, AbsTooltip, StatusLight } from "@budibase/bbui"
+  import {
+    Icon,
+    Body,
+    AbsTooltip,
+    StatusLight,
+    Tags,
+    Tag,
+  } from "@budibase/bbui"
  import { externalActions } from "./ExternalActions"
  import { createEventDispatcher } from "svelte"
  import { Features } from "@/constants/backend/automations"
@ -24,6 +31,7 @@
  $: blockRefs = $selectedAutomation?.blockRefs || {}
  $: stepNames = automation?.definition.stepNames || {}
  $: allSteps = automation?.definition.steps || []
+  $: blockDefinition = $automationStore.blockDefinitions.ACTION[block.stepId]
  $: automationName = itemName || stepNames?.[block.id] || block?.name || ""
  $: automationNameError = getAutomationNameError(automationName)
  $: status = updateStatus(testResult)
@ -135,7 +143,16 @@
        {#if isHeaderTrigger}
          <Body size="XS"><b>Trigger</b></Body>
        {:else}
-          <Body size="XS"><b>{isBranch ? "Branch" : "Step"}</b></Body>
+          <Body size="XS">
+            <div style="display: flex; gap: 0.5rem; align-items: center;">
+              <b>{isBranch ? "Branch" : "Step"}</b>
+              {#if blockDefinition.deprecated}
+                <Tags>
+                  <Tag invalid>Deprecated</Tag>
+                </Tags>
+              {/if}
+            </div>
+          </Body>
        {/if}

        {#if enableNaming}
--- a/packages/builder/src/stores/builder/automations.ts
+++ b/packages/builder/src/stores/builder/automations.ts
@ -30,6 +30,8 @@ import {
  AutomationTriggerSchema,
  BranchPath,
  BlockDefinitions,
+  GetAutomationTriggerDefinitionsResponse,
+  GetAutomationActionDefinitionsResponse,
 } from "@budibase/types"
 import { ActionStepID } from "@/constants/backend/automations"
 import { FIELDS } from "@/constants/backend"
@ -65,16 +67,19 @@ const initialAutomationState: AutomationState = {
 }

 const getFinalDefinitions = (
-  triggers: Record<string, any>,
-  actions: Record<string, any>
+  triggers: GetAutomationTriggerDefinitionsResponse,
+  actions: GetAutomationActionDefinitionsResponse
 ): BlockDefinitions => {
-  const creatable: Record<string, any> = {}
-  Object.entries(triggers).forEach(entry => {
-    if (entry[0] === AutomationTriggerStepId.ROW_ACTION) {
-      return
+  const creatable: Partial<GetAutomationTriggerDefinitionsResponse> = {}
+  for (const [key, trigger] of Object.entries(triggers)) {
+    if (key === AutomationTriggerStepId.ROW_ACTION) {
+      continue
    }
-    creatable[entry[0]] = entry[1]
-  })
+    if (trigger.deprecated === true) {
+      continue
+    }
+    creatable[key as keyof GetAutomationTriggerDefinitionsResponse] = trigger
+  }
  return {
    TRIGGER: triggers,
    CREATABLE_TRIGGER: creatable,
--- a/packages/server/src/api/controllers/automation.ts
+++ b/packages/server/src/api/controllers/automation.ts
@ -1,7 +1,7 @@
 import * as triggers from "../../automations/triggers"
 import { sdk as coreSdk } from "@budibase/shared-core"
 import { DocumentType } from "../../db/utils"
-import { updateTestHistory, removeDeprecated } from "../../automations/utils"
+import { updateTestHistory } from "../../automations/utils"
 import { setTestFlag, clearTestFlag } from "../../utilities/redis"
 import { context, cache, events, db as dbCore } from "@budibase/backend-core"
 import { automations, features } from "@budibase/pro"
@ -34,14 +34,6 @@ import sdk from "../../sdk"
 import { builderSocket } from "../../websockets"
 import env from "../../environment"

-async function getActionDefinitions() {
-  return removeDeprecated(await actionDefs())
-}
-
-function getTriggerDefinitions() {
-  return removeDeprecated(triggers.TRIGGER_DEFINITIONS)
-}
-
 /*************************
 *                       *
 *   BUILDER FUNCTIONS   *
@ -141,21 +133,21 @@ export async function clearLogError(
 export async function getActionList(
  ctx: UserCtx<void, GetAutomationActionDefinitionsResponse>
 ) {
-  ctx.body = await getActionDefinitions()
+  ctx.body = await actionDefs()
 }

 export async function getTriggerList(
  ctx: UserCtx<void, GetAutomationTriggerDefinitionsResponse>
 ) {
-  ctx.body = getTriggerDefinitions()
+  ctx.body = triggers.TRIGGER_DEFINITIONS
 }

 export async function getDefinitionList(
  ctx: UserCtx<void, GetAutomationStepDefinitionsResponse>
 ) {
  ctx.body = {
-    trigger: getTriggerDefinitions(),
-    action: await getActionDefinitions(),
+    trigger: triggers.TRIGGER_DEFINITIONS,
+    action: await actionDefs(),
  }
 }

--- a/packages/server/src/api/routes/tests/automation.spec.ts
+++ b/packages/server/src/api/routes/tests/automation.spec.ts
@ -20,7 +20,6 @@ import {
 } from "@budibase/types"
 import { mocks } from "@budibase/backend-core/tests"
 import { FilterConditions } from "../../../automations/steps/filter"
-import { removeDeprecated } from "../../../automations/utils"
 import { createAutomationBuilder } from "../../../automations/tests/utilities/AutomationTestBuilder"

 const MAX_RETRIES = 4
@ -76,15 +75,11 @@ describe("/automations", () => {
        .expect("Content-Type", /json/)
        .expect(200)

-      let definitionsLength = Object.keys(
-        removeDeprecated(BUILTIN_ACTION_DEFINITIONS)
-      ).length
-
      expect(Object.keys(res.body.action).length).toBeGreaterThanOrEqual(
-        definitionsLength
+        Object.keys(BUILTIN_ACTION_DEFINITIONS).length
      )
      expect(Object.keys(res.body.trigger).length).toEqual(
-        Object.keys(removeDeprecated(TRIGGER_DEFINITIONS)).length
+        Object.keys(TRIGGER_DEFINITIONS).length
      )
    })
  })
--- a/packages/server/src/automations/steps/executeScriptV2.ts
+++ b/packages/server/src/automations/steps/executeScriptV2.ts
@ -12,9 +12,9 @@ import {
 import { processStringSync } from "@budibase/string-templates"

 export const definition: AutomationStepDefinition = {
-  name: "JS Scripting",
+  name: "JavaScript",
  tagline: "Execute JavaScript Code",
-  icon: "Code",
+  icon: "Brackets",
  description: "Run a piece of JavaScript code in your automation",
  type: AutomationStepType.ACTION,
  internal: true,
--- a/packages/server/src/automations/utils.ts
+++ b/packages/server/src/automations/utils.ts
@ -4,17 +4,8 @@ import { automationQueue } from "./bullboard"
 import { updateEntityMetadata } from "../utilities"
 import { context, db as dbCore, utils } from "@budibase/backend-core"
 import { getAutomationMetadataParams } from "../db/utils"
-import { cloneDeep } from "lodash/fp"
 import { quotas } from "@budibase/pro"
-import {
-  Automation,
-  AutomationActionStepId,
-  AutomationJob,
-  AutomationStepDefinition,
-  AutomationTriggerDefinition,
-  AutomationTriggerStepId,
-  MetadataType,
-} from "@budibase/types"
+import { Automation, AutomationJob, MetadataType } from "@budibase/types"
 import { automationsEnabled } from "../features"
 import { helpers, REBOOT_CRON } from "@budibase/shared-core"
 import tracer from "dd-trace"
@ -122,23 +113,6 @@ export async function updateTestHistory(
  )
 }

-export function removeDeprecated<
-  T extends
-    | Record<keyof typeof AutomationTriggerStepId, AutomationTriggerDefinition>
-    | Record<keyof typeof AutomationActionStepId, AutomationStepDefinition>
->(definitions: T): T {
-  const base: Record<
-    string,
-    AutomationTriggerDefinition | AutomationStepDefinition
-  > = cloneDeep(definitions)
-  for (let key of Object.keys(base)) {
-    if (base[key].deprecated) {
-      delete base[key]
-    }
-  }
-  return base as T
-}
-
 // end the repetition and the job itself
 export async function disableAllCrons(appId: any) {
  const promises = []
--- a/packages/types/src/ui/stores/automations.ts
+++ b/packages/types/src/ui/stores/automations.ts
@ -1,3 +1,8 @@
+import {
+  GetAutomationActionDefinitionsResponse,
+  GetAutomationTriggerDefinitionsResponse,
+} from "../../api"
+
 export interface BranchPath {
  stepIdx: number
  branchIdx: number
@ -6,7 +11,7 @@ export interface BranchPath {
 }

 export interface BlockDefinitions {
-  TRIGGER: Record<string, any>
-  CREATABLE_TRIGGER: Record<string, any>
-  ACTION: Record<string, any>
+  TRIGGER: Partial<GetAutomationTriggerDefinitionsResponse>
+  CREATABLE_TRIGGER: Partial<GetAutomationTriggerDefinitionsResponse>
+  ACTION: Partial<GetAutomationActionDefinitionsResponse>
 }