Make workflow step name editable (#8677)

- Use TextInput in header title - add onTitleChange prop - rename field name instead of label To fix : - padding right on title comes from current TextInput component. It needs to be refactored https://github.com/user-attachments/assets/535cd6d3-866b-4a61-9c5d-cdbe7710396a
2024-11-22 16:25:01 +01:00
parent 4d8445a34a
commit 5ec6cb0e6f
24 changed files with 217 additions and 157 deletions
--- a/packages/twenty-front/src/modules/workflow/utils/tests/addCreateStepNodes.test.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/tests/addCreateStepNodes.test.ts
@ -5,6 +5,7 @@ import { addCreateStepNodes } from '../addCreateStepNodes';
 describe('addCreateStepNodes', () => {
  it("adds a create step node to the end of a single-branch flow and doesn't change the shape of other nodes", () => {
    const trigger: WorkflowTrigger = {
+      name: 'Company created',
      type: 'DATABASE_EVENT',
      settings: {
        eventName: 'company.created',
--- a/packages/twenty-front/src/modules/workflow/utils/tests/generateWorkflowDiagram.test.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/tests/generateWorkflowDiagram.test.ts
@ -4,6 +4,7 @@ import { generateWorkflowDiagram } from '../generateWorkflowDiagram';
 describe('generateWorkflowDiagram', () => {
  it('should generate a single trigger node when no step is provided', () => {
    const trigger: WorkflowTrigger = {
+      name: 'Company created',
      type: 'DATABASE_EVENT',
      settings: {
        eventName: 'company.created',
@ -19,7 +20,6 @@ describe('generateWorkflowDiagram', () => {

    expect(result.nodes[0]).toMatchObject({
      data: {
-        label: 'Company is Created',
        nodeType: 'trigger',
      },
    });
@ -27,6 +27,7 @@ describe('generateWorkflowDiagram', () => {

  it('should generate a diagram with nodes and edges corresponding to the steps', () => {
    const trigger: WorkflowTrigger = {
+      name: 'Company created',
      type: 'DATABASE_EVENT',
      settings: {
        eventName: 'company.created',
@ -85,13 +86,14 @@ describe('generateWorkflowDiagram', () => {
      expect(stepNodes[index].data).toEqual({
        nodeType: 'action',
        actionType: 'CODE',
-        label: step.name,
+        name: step.name,
      });
    }
  });

  it('should correctly link nodes with edges', () => {
    const trigger: WorkflowTrigger = {
+      name: 'Company created',
      type: 'DATABASE_EVENT',
      settings: {
        eventName: 'company.created',
--- a/packages/twenty-front/src/modules/workflow/utils/tests/getWorkflowVersionDiagram.test.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/tests/getWorkflowVersionDiagram.test.ts
@ -42,6 +42,7 @@ describe('getWorkflowVersionDiagram', () => {
      name: '',
      steps: null,
      trigger: {
+        name: 'Company created',
        settings: { eventName: 'company.created', outputSchema: {} },
        type: 'DATABASE_EVENT',
      },
@ -53,7 +54,7 @@ describe('getWorkflowVersionDiagram', () => {
      nodes: [
        {
          data: {
-            label: 'Company is Created',
+            name: 'Company created',
            nodeType: 'trigger',
            triggerType: 'DATABASE_EVENT',
          },
@ -93,6 +94,7 @@ describe('getWorkflowVersionDiagram', () => {
        },
      ],
      trigger: {
+        name: 'Company created',
        settings: { eventName: 'company.created', outputSchema: {} },
        type: 'DATABASE_EVENT',
      },
--- a/packages/twenty-front/src/modules/workflow/utils/tests/insertStep.test.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/tests/insertStep.test.ts
@ -11,6 +11,7 @@ describe('insertStep', () => {
      name: '',
      steps: [],
      trigger: {
+        name: 'Company created',
        settings: { eventName: 'company.created', outputSchema: {} },
        type: 'DATABASE_EVENT',
      },
@ -54,6 +55,7 @@ describe('insertStep', () => {
      name: '',
      steps: [],
      trigger: {
+        name: 'Company created',
        settings: { eventName: 'company.created', outputSchema: {} },
        type: 'DATABASE_EVENT',
      },
@ -135,6 +137,7 @@ describe('insertStep', () => {
        },
      ],
      trigger: {
+        name: 'Company created',
        settings: { eventName: 'company.created', outputSchema: {} },
        type: 'DATABASE_EVENT',
      },
@ -220,6 +223,7 @@ describe('insertStep', () => {
        },
      ],
      trigger: {
+        name: 'Company created',
        settings: { eventName: 'company.created', outputSchema: {} },
        type: 'DATABASE_EVENT',
      },
--- a/packages/twenty-front/src/modules/workflow/utils/tests/mergeWorkflowDiagrams.test.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/tests/mergeWorkflowDiagrams.test.ts
@ -5,7 +5,7 @@ it('Preserves the properties defined in the previous version but not in the next
  const previousDiagram: WorkflowDiagram = {
    nodes: [
      {
-        data: { nodeType: 'action', label: '', actionType: 'CODE' },
+        data: { nodeType: 'action', name: '', actionType: 'CODE' },
        id: '1',
        position: { x: 0, y: 0 },
        selected: true,
@ -16,7 +16,7 @@ it('Preserves the properties defined in the previous version but not in the next
  const nextDiagram: WorkflowDiagram = {
    nodes: [
      {
-        data: { nodeType: 'action', label: '', actionType: 'CODE' },
+        data: { nodeType: 'action', name: '', actionType: 'CODE' },
        id: '1',
        position: { x: 0, y: 0 },
      },
@ -27,7 +27,7 @@ it('Preserves the properties defined in the previous version but not in the next
  expect(mergeWorkflowDiagrams(previousDiagram, nextDiagram)).toEqual({
    nodes: [
      {
-        data: { nodeType: 'action', label: '', actionType: 'CODE' },
+        data: { nodeType: 'action', name: '', actionType: 'CODE' },
        id: '1',
        position: { x: 0, y: 0 },
        selected: true,
@ -41,7 +41,7 @@ it('Replaces duplicated properties with the next value', () => {
  const previousDiagram: WorkflowDiagram = {
    nodes: [
      {
-        data: { nodeType: 'action', label: '', actionType: 'CODE' },
+        data: { nodeType: 'action', name: '', actionType: 'CODE' },
        id: '1',
        position: { x: 0, y: 0 },
      },
@ -51,7 +51,7 @@ it('Replaces duplicated properties with the next value', () => {
  const nextDiagram: WorkflowDiagram = {
    nodes: [
      {
-        data: { nodeType: 'action', label: '2', actionType: 'CODE' },
+        data: { nodeType: 'action', name: '2', actionType: 'CODE' },
        id: '1',
        position: { x: 0, y: 0 },
      },
@ -62,7 +62,7 @@ it('Replaces duplicated properties with the next value', () => {
  expect(mergeWorkflowDiagrams(previousDiagram, nextDiagram)).toEqual({
    nodes: [
      {
-        data: { nodeType: 'action', label: '2', actionType: 'CODE' },
+        data: { nodeType: 'action', name: '2', actionType: 'CODE' },
        id: '1',
        position: { x: 0, y: 0 },
      },
--- a/packages/twenty-front/src/modules/workflow/utils/tests/removeStep.test.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/tests/removeStep.test.ts
@ -28,6 +28,7 @@ it('returns a deep copy of the provided steps array instead of mutating it', ()
    name: '',
    steps: [stepToBeRemoved],
    trigger: {
+      name: 'Company created',
      settings: { eventName: 'company.created', outputSchema: {} },
      type: 'DATABASE_EVENT',
    },
@ -108,6 +109,7 @@ it('removes a step in a non-empty steps array', () => {
      },
    ],
    trigger: {
+      name: 'Company created',
      settings: { eventName: 'company.created', outputSchema: {} },
      type: 'DATABASE_EVENT',
    },
--- a/packages/twenty-front/src/modules/workflow/utils/tests/replaceStep.test.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/tests/replaceStep.test.ts
@ -29,6 +29,7 @@ describe('replaceStep', () => {
      name: '',
      steps: [stepToBeReplaced],
      trigger: {
+        name: 'Company created',
        settings: { eventName: 'company.created', outputSchema: {} },
        type: 'DATABASE_EVENT',
      },
@ -123,6 +124,7 @@ describe('replaceStep', () => {
        },
      ],
      trigger: {
+        name: 'Company created',
        settings: {
          eventName: 'company.created',
          outputSchema: {},
--- a/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts
@ -53,7 +53,7 @@ export const generateWorkflowDiagram = ({
      data: {
        nodeType: 'action',
        actionType: nodeActionType,
-        label: nodeLabel,
+        name: isDefined(step.name) ? step.name : nodeLabel,
      },
      position: {
        x: xPos,
@ -110,7 +110,7 @@ export const generateWorkflowDiagram = ({
      data: {
        nodeType: 'trigger',
        triggerType: trigger.type,
-        label: triggerLabel,
+        name: isDefined(trigger.name) ? trigger.name : triggerLabel,
      },
      position: {
        x: 0,
--- a/packages/twenty-front/src/modules/workflow/utils/getStepDefaultDefinition.ts
+++ b/packages/twenty-front/src/modules/workflow/utils/getStepDefaultDefinition.ts
@ -65,7 +65,7 @@ export const getStepDefaultDefinition = ({
    case 'RECORD_CRUD.CREATE': {
      return {
        id: newStepId,
-        name: 'Record Create',
+        name: 'Create Record',
        type: 'RECORD_CRUD',
        valid: false,
        settings: {