refactor(sidebar): migrate sidebar to react [EE-2907] (#6725)

* refactor(sidebar): migrate sidebar to react [EE-2907]

fixes [EE-2907]

feat(sidebar): show label for help

fix(sidebar): apply changes from ddExtension

fix(sidebar): resolve conflicts

style(ts): add explanation for ddExtension

fix(sidebar): use enum for status

refactor(sidebar): rename to EdgeComputeSidebar

refactor(sidebar): removed the need of `ident` prop

style(sidebar): add ref for mobile breakpoint

refactor(app): document testing props

refactor(sidebar): use single sidebar item

refactor(sidebar): use section for nav

refactor(sidebar): rename sidebarlink to link

refactor(sidebar): memoize menu paths

fix(kubectl-shell): infinite loop on hooks dependencies

refactor(sidebar): use authorized element

feat(k8s/shell): track open shell

refactor(k8s/shell): remove memoization

refactor(settings): move settings queries to queries

fix(sidebar): close sidebar on mobile

refactor(settings): use mutation helpers

refactor(sidebar): remove memo

refactor(sidebar): rename sidebar item for storybook

refactor(sidebar): move to react

gprefactor(sidebar): remove dependence on EndProvider

feat(environments): rename settings type

feat(kube): move kubeconfig button

fix(sidebar): open submenus

fix(sidebar): open on expand

fix(sibebar): show kube shell correctly

* fix(sidebar): import from react component

* chore(tests): fix missing prop

app/docker/components/docker-sidebar/docker-sidebar.html

@@ -1,186 +0,0 @@
-<sidebar-menu-item
-  path="docker.dashboard"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-tachometer-alt fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-dashboard"
-  title="Dashboard"
->
-  Dashboard
-</sidebar-menu-item>
-
-<sidebar-menu
-  ng-if="!$ctrl.offlineMode"
-  label="App Templates"
-  icon-class="fa-rocket fa-fw"
-  path="docker.templates"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  is-sidebar-open="$ctrl.isSidebarOpen"
-  children-paths="[]"
->
-  <sidebar-menu-item
-    path="docker.templates.custom"
-    path-params="{ endpointId: $ctrl.endpointId }"
-    class-name="sidebar-sublist"
-    data-cy="dockerSidebar-customTemplates"
-    title="Custom Templates"
-  >
-    Custom Templates
-  </sidebar-menu-item>
-</sidebar-menu>
-
-<sidebar-menu-item
-  ng-if="$ctrl.showStacks"
-  path="docker.stacks"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-th-list fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-stacks"
-  title="Stacks"
->
-  Stacks
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  ng-if="$ctrl.swarmManagement"
-  path="docker.services"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-list-alt fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-services"
-  title="Services"
->
-  Services
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  path="docker.containers"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-cubes fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-containers"
-  title="Containers"
->
-  Containers
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  path="docker.images"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-clone fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-images"
-  title="Images"
->
-  Images
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  path="docker.networks"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-sitemap fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-networks"
-  title="Networks"
->
-  Networks
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  path="docker.volumes"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-hdd fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-volumes"
-  title="Volumes"
->
-  Volumes
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  ng-if="$ctrl.endpointApiVersion >= 1.3 && $ctrl.swarmManagement"
-  path="docker.configs"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-file-code fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-configs"
-  title="Configs"
->
-  Configs
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  ng-if="$ctrl.endpointApiVersion >= 1.25 && $ctrl.swarmManagement"
-  path="docker.secrets"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-user-secret fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-secrets"
-  title="Secrets"
->
-  Secrets
-</sidebar-menu-item>
-
-<sidebar-menu-item
-  ng-if="$ctrl.standaloneManagement && $ctrl.adminAccess && !$ctrl.offlineMode"
-  path="docker.events"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  icon-class="fa-history fa-fw"
-  class-name="sidebar-list"
-  data-cy="dockerSidebar-events"
-  title="Events"
->
-  Events
-</sidebar-menu-item>
-
-<sidebar-menu
-  ng-if="$ctrl.standaloneManagement"
-  label="Host"
-  icon-class="fa-th fa-fw"
-  path="docker.host"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  is-sidebar-open="$ctrl.isSidebarOpen"
-  children-paths="['docker.registries', 'docker.registries.access', 'docker.featuresConfiguration']"
->
-  <sidebar-menu-item
-    ng-if="$ctrl.adminAccess"
-    authorization="PortainerEndpointUpdateSettings"
-    path="docker.featuresConfiguration"
-    path-params="{ endpointId: $ctrl.endpointId }"
-    class-name="sidebar-sublist"
-    data-cy="dockerSidebar-setup"
-    title="Setup"
-  >
-    Setup
-  </sidebar-menu-item>
-
-  <sidebar-menu-item path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="dockerSidebar-registries" title="Registries">
-    Registries
-  </sidebar-menu-item>
-</sidebar-menu>
-
-<sidebar-menu
-  ng-if="$ctrl.swarmManagement"
-  label="Swarm"
-  icon-class="fa-object-group fa-fw"
-  path="docker.swarm"
-  path-params="{ endpointId: $ctrl.endpointId }"
-  is-sidebar-open="$ctrl.isSidebarOpen"
-  children-paths="['docker.registries', 'docker.registries.access', 'docker.featuresConfiguration']"
->
-  <sidebar-menu-item
-    ng-if="$ctrl.adminAccess"
-    authorization="PortainerEndpointUpdateSettings"
-    path="docker.featuresConfiguration"
-    path-params="{ endpointId: $ctrl.endpointId }"
-    class-name="sidebar-sublist"
-    data-cy="swarmSidebar-setup"
-    title="Setup"
-  >
-    Setup
-  </sidebar-menu-item>
-
-  <sidebar-menu-item path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="swarmSidebar-registries" title="Registries">
-    Registries
-  </sidebar-menu-item>
-</sidebar-menu>

app/docker/components/docker-sidebar/docker-sidebar.js

@@ -1,15 +0,0 @@
-angular.module('portainer.docker').component('dockerSidebar', {
-  templateUrl: './docker-sidebar.html',
-  bindings: {
-    isSidebarOpen: '<',
-
-    endpointApiVersion: '<',
-    swarmManagement: '<',
-    standaloneManagement: '<',
-    adminAccess: '<',
-    offlineMode: '<',
-    currentRouteName: '<',
-    endpointId: '<',
-    showStacks: '<',
-  },
-});