feat: Queue package manager commands (#3418)

* feat: Queue package manager commands
* adjust tests
* fix: force run whynot command synchronously
* chore: maximize command output box's height
* chore: more user instructions on background queue
* feat: track command peak memory usage
* feat: exit of CLI php version doesn't match web php version
* chore: install deps
* chore: format and typing workflow fix

Signed-off-by: Sami Mazouz <ilyasmazouz@gmail.com>

extensions/package-manager/less/admin/ControlSection.less

@@ -0,0 +1,133 @@
+.PackageManager-lastUpdatedAt {
+  color: var(--control-color);
+
+  &-label {
+    font-weight: bold;
+  }
+}
+
+.PackageManager-updaterControls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  grid-area: controls;
+}
+
+.PackageManager-extensions {
+  &-grid {
+    --gap: 12px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, calc(~"100% / 3 - var(--gap)"));
+    gap: var(--gap);
+    margin-top: 16px;
+  }
+}
+
+.PackageManager-extension {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: var(--control-bg);
+  padding: 8px;
+  border-radius: var(--border-radius);
+
+  &-controls {
+    margin-left: auto;
+  }
+
+  &-icon {
+    --size: 40px;
+  }
+
+  &-name {
+    font-weight: bold;
+  }
+
+  &-version {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &-latest {
+      text-transform: lowercase;
+      padding: 2px 6px;
+      font-size: 0.7rem;
+    }
+  }
+
+  &--core {
+    --bg-hover: darken(#e7672e, 5);
+    background-color: #e7672e;
+    color: #fff;
+    --button-color: #fff;
+    --button-bg-hover: var(--bg-hover);
+
+    .Button--danger {
+      color: #fff;
+      --button-bg-hover: var(--bg-hover);
+    }
+  }
+
+  &--core &-icon {
+    background-size: 100%;
+    background-color: transparent;
+    filter: grayscale(1) brightness(3.5);
+  }
+
+  &--danger {
+    background-color: var(--control-danger-bg);
+  }
+}
+
+.PackageManager-majorUpdate {
+  --space: 16px;
+  padding: var(--space);
+  display: grid;
+  grid-template-areas:
+    "title logo"
+    "helpText logo"
+    "controls logo"
+    "extensions extensions"
+    "failure failure";
+  grid-gap: 0 var(--space);
+  align-items: center;
+
+  > img {
+    grid-area: logo;
+  }
+
+  > label {
+    grid-area: title;
+  }
+
+  > .helpText {
+    grid-area: helpText;
+  }
+
+  &-failure {
+    --border-radius: 0;
+    grid-area: failure;
+    margin: var(--space) calc(~"0px - var(--space)") calc(~"0px - var(--space)");
+  }
+
+  &-incompatibleExtensions {
+    grid-area: extensions;
+    margin-top: var(--space);
+    padding-top: var(--space);
+    border-top: 1px solid var(--control-bg);
+  }
+}
+
+.WhyNotModal {
+  &-contents {
+    overflow-x: auto;
+  }
+}
+
+.PackageManager-installer .FormControl-container {
+  max-width: 400px;
+
+  .FormControl {
+    width: 300px;
+  }
+}

extensions/package-manager/less/admin/Label.less

@@ -0,0 +1,41 @@
+:root {
+  --label-bg: var(--control-bg);
+  --label-color: var(--control-color);
+  --label-success-bg: var(--alert-success-bg);
+  --label-success-color: var(--alert-success-color);
+  --label-error-bg: var(--alert-error-bg);
+  --label-error-color: var(--alert-error-color);
+  --label-warning-bg: var(--alert-bg);
+  --label-warning-color: var(--alert-color);
+  --label-neutral-bg: #2781dd;
+  --label-neutral-color: #f0f6ff;
+}
+
+.Label {
+  background-color: var(--label-bg);
+  color: var(--label-color);
+  font-weight: 600;
+  font-size: 0.65rem;
+  padding: 4px 6px;
+  border-radius: var(--border-radius);
+
+  &--success {
+    --label-bg: var(--label-success-bg);
+    --label-color: var(--label-success-color);
+  }
+
+  &--error {
+    --label-bg: var(--label-error-bg);
+    --label-color: var(--label-error-color);
+  }
+
+  &--warning {
+    --label-bg: var(--label-warning-bg);
+    --label-color: var(--label-warning-color);
+  }
+
+  &--neutral {
+    --label-bg: var(--label-neutral-bg);
+    --label-color: var(--label-neutral-color);
+  }
+}

extensions/package-manager/less/admin/QueueSection.less

@@ -0,0 +1,57 @@
+.PackageManager-queueSection {
+  &-header > .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &::before, &::after {
+      content: none;
+    }
+  }
+
+  .Label {
+    text-transform: uppercase;
+  }
+
+  .Table {
+    width: 100%;
+
+    // @TODO move to core
+    height: 100%;
+
+    &-controls-item {
+      height: 100%;
+    }
+  }
+}
+
+.PackageManager-queueTable {
+  &-package {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &-icon {
+      --size: 30px;
+    }
+
+    &-details {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-name {
+      font-size: 0.7rem;
+    }
+  }
+
+  &-operation {
+    display: flex;
+    gap: 16px;
+
+    &-icon {
+      width: 20px;
+      text-align: center;
+    }
+  }
+}

extensions/package-manager/less/admin/TaskOutputModal.less

@@ -0,0 +1,5 @@
+.TaskOutputModal-data-output {
+  height: auto;
+  overflow: auto;
+  max-height: 40vh;
+}