UVE: Update state management to @ngrx/signalStore

[fmontes]

Task description

The UI state of the UVE is huge and changes a lot, is global, it affects layout, properties, and other sections. So far, we have been managing that state with, but that library is not made for that, which we already are causing problems and is difficult to scale.

We need to use a better state management library for the UVE before it is too late.

Acceptance Criteria

• The global UVE state management should use @ngrx/signalStore.
• Local state management remains with @ngrx/component-store
• The updated UVE functions seamlessly without any errors or disruptions.

External Links

N/A

Assumptions & Initiation Needs

N/A

Quality Assurance Notes & Workarounds

N/A

Sub-Tasks & Estimates

N/A

[fmontes]

After meeting this is a possible schema for the state:

const shellState = {
  section: 'content | layout | rules | experiments', // ng handles this
  params: {
    language: 1,
    persona: 'default',
    variant: 'default'
  },
  menu: [
    {
      name: 'Content',
      href: '/content',
      selected: true,
      enable: true,
      tooltip: null
    },
    {
      name: 'Layout',
      href: '/Layout',
      selected: false,
      enable: false,
      tooltip: 'You don\'t have a license'
    },
    {
      name: 'Rules',
      href: '/rules',
      selected: false,
      enable: false,
      tooltip: 'You don\'t have a license'
    }
  ]
}

const editorState = {
  toolbar: {
    enable: true,
    items: [
      {
        id: 'preview',
        label: 'Preview',
        enable: true
      },
      {
        id: 'copy-url',
        label: 'Copy URL',
        enable: true
      },
      {
        id: 'api',
        label: 'API',
        enable: true
      },
      {
        id: 'edit-content',
        label: 'Edit Content',
        enable: true
      }
    ],
    selectors: [
      {
        id: 'language',
        label: 'Language',
        enable: true,
      },
      {
        id: 'persona',
        label: 'persona',
        enable: true,
      }
    ],
    actions: [
      {
        id: 'workflow',
        label: 'Workflow',
        enable: true
      },
      {
        id: 'unlock',
        label: 'Unlock',
        enable: true
      }
    ]
  },
  iframe: {
    src: '{clientHost}/{path}',
    enable: true,
    width: '100%',
    height: '100%',
    pointerEvents: 'auto', // might be a bool
    opacity: 1
  },
  progressBar: {
    show: true,
  },
  contentletTools: {
    active: true,
    area: {
      x: 0,
      y: 0,
      width: 100,
      height: 100
    },
    contentlet: {
      title: 'Contentlet',
      inode: '1234',
      identifier: 'contentlet-1234',
    }
  },
  dropzone: {
    active: true,
    dragItem: {
      title: 'Contentlet',
      inode: '1234',
      identifier: 'contentlet-1234',
      // mini contentlet
    },
    bounds: [
      {
        x: 0,
        y: 0,
        width: 100,
        height: 100
      },
      {
        x: 0,
        y: 0,
        width: 100,
        height: 100
      }
    ]
  },
  palette: {
    variant: 'default',
    language: 1,
    containers: []
  },
  infoBox: {
    closable: true,
    message: {
      icon: 'info',
      text: 'This is a message'
    }
  }
}

[fmontes]

[nollymar]

Internal QA: Failed

@fmontes found a related error. More details on this thread

[KevinDavilaDotCMS]

Passed IQA

Tested in master
We have some issues:
#29569
#29570
#29572
#29590

that will be resolved in other tickets, and the mainly functionallity of UVE in this ticket is working

Screen.Recording.2024-08-14.at.2.37.20.PM.mov

[bryanboza]

Fixed, we can close this for now and handle all the new issues in individual cards!