mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fix installation of helm charts (#5841)
* Relax validator for installing charts Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Tweak spacing between words in confirmation dialog Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Add mocks for monaco editor and virtualized auto sizer to allow components to be rendered in unit tests Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Improve typing for a function Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove usage of shared global state from a component Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Provide a way to unit test usages of storages Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Add way to get current value from select in behavioural unit tests Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Rework installation of helm charts to get rid of the majority of bugs Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Update snapshots Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove technical test for being covered in behaviours Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Split behaviour to smaller pieces Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Add tests accidentally removed back Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Mark functions causing side effects Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove behaviour covered by other behaviours Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Tweak naming Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove unused dependency Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen authored and 
GitHub committed
1 parent
c70788569f
commit
f281df1693
65 files changed
+28987
-1523
No files matched your search
@@ -1,423 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<HelmChartDetails /> before getChartDetails resolves renders 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class="Notifications flex column align-flex-end"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Animate slide-right Drawer HelmChartDetails right enter"
|
||||
style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
|
||||
>
|
||||
<div
|
||||
class="drawer-wrapper flex column"
|
||||
>
|
||||
<div
|
||||
class="drawer-title flex align-center"
|
||||
>
|
||||
<div
|
||||
class="drawer-title-text flex gaps align-center"
|
||||
>
|
||||
Chart: a galaxy far far away/a name
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
id="tooltip_target_1"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="content_copy"
|
||||
>
|
||||
content_copy
|
||||
</span>
|
||||
<div />
|
||||
</i>
|
||||
</div>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
id="tooltip_target_2"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="close"
|
||||
>
|
||||
close
|
||||
</span>
|
||||
<div />
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="drawer-content flex column box grow"
|
||||
>
|
||||
<div
|
||||
class="Spinner singleColor center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ResizingAnchor horizontal leading"
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`<HelmChartDetails /> before getChartDetails resolves when getChartDetails resolves with one version renders 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class="Notifications flex column align-flex-end"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Animate slide-right Drawer HelmChartDetails right enter"
|
||||
style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
|
||||
>
|
||||
<div
|
||||
class="drawer-wrapper flex column"
|
||||
>
|
||||
<div
|
||||
class="drawer-title flex align-center"
|
||||
>
|
||||
<div
|
||||
class="drawer-title-text flex gaps align-center"
|
||||
>
|
||||
Chart: a galaxy far far away/a name
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
id="tooltip_target_3"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="content_copy"
|
||||
>
|
||||
content_copy
|
||||
</span>
|
||||
<div />
|
||||
</i>
|
||||
</div>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
id="tooltip_target_4"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="close"
|
||||
>
|
||||
close
|
||||
</span>
|
||||
<div />
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="drawer-content flex column box grow"
|
||||
>
|
||||
<div
|
||||
class="box grow"
|
||||
>
|
||||
<div
|
||||
class="introduction flex align-flex-start"
|
||||
>
|
||||
<div
|
||||
class="intro-logo"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 722.8 702"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="m318 299.5c2.1 1.6 4.8 2.5 7.6 2.5 6.9 0 12.6-5.5 12.9-12.3l.3-.2 4.3-76.7c-5.2.6-10.4 1.5-15.6 2.7-28.5 6.5-53.2 20.5-72.6 39.5l62.9 44.6z"
|
||||
/>
|
||||
<path
|
||||
d="m309.5 411.9c-1.4-5.9-6.6-9.9-12.4-10-.8 0-1.7.1-2.5.2l-.1-.2-75.5 12.8c11.7 32.2 33.4 58.5 60.8 76.1l29.2-70.7-.2-.3c1.1-2.4 1.4-5.2.7-7.9z"
|
||||
/>
|
||||
<path
|
||||
d="m284.4 357.5c2.5-.7 4.9-2.2 6.7-4.4 4.3-5.4 3.6-13.2-1.6-17.8l.1-.3-57.4-51.4c-17 27.8-25.1 61.1-21.4 95.3l73.6-21.2z"
|
||||
/>
|
||||
<path
|
||||
d="m340.2 380 21.2 10.2 21.1-10.1 5.3-22.9-14.6-18.2h-23.6l-14.6 18.2z"
|
||||
/>
|
||||
<path
|
||||
d="m384.2 289.4c.1 2.6 1 5.2 2.8 7.5 4.3 5.4 12.1 6.4 17.7 2.4l.2.1 62.5-44.3c-23.6-23.1-54.4-38.2-87.6-42.2z"
|
||||
/>
|
||||
<path
|
||||
d="m490.3 283.7-57.1 51.1v.2c-2 1.7-3.5 4.1-4.1 6.8-1.5 6.8 2.5 13.5 9.2 15.3l.1.3 74 21.3c1.6-16 .6-32.5-3.2-49-3.9-16.8-10.4-32.2-18.9-46z"
|
||||
/>
|
||||
<path
|
||||
d="m372.8 439.6c-1.2-2.3-3.2-4.3-5.8-5.5-2-.9-4-1.4-6-1.3-4.5.2-8.7 2.6-10.9 6.8h-.1l-37.1 67.1c25.7 8.8 54.1 10.7 82.5 4.2 5.1-1.2 10-2.5 14.9-4.2l-37.3-67.1z"
|
||||
/>
|
||||
<path
|
||||
d="m711.7 425-60.4-262.2c-3.2-13.7-12.5-25.3-25.3-31.4l-244.4-116.8c-7.1-3.4-14.8-4.9-22.7-4.5-6.2.3-12.3 1.9-17.9 4.5l-244.3 116.7c-12.8 6.1-22.1 17.7-25.3 31.4l-60.2 262.3c-2.8 12.2-.5 25 6.3 35.5.8 1.3 1.7 2.5 2.7 3.7l169.1 210.3c8.9 11 22.3 17.4 36.5 17.4l271.2-.1c14.2 0 27.7-6.4 36.5-17.4l169.1-210.3c8.9-10.9 12.2-25.4 9.1-39.1zm-93-3.2c-1.8 7.8-10.2 12.6-18.9 10.7-.1 0-.2 0-.2 0-.1 0-.2-.1-.3-.1-1.2-.3-2.7-.5-3.8-.8-5-1.3-8.6-3.3-13.1-5.1-9.7-3.5-17.7-6.4-25.5-7.5-4-.3-6 1.6-8.2 3-1.1-.2-4.4-.8-6.2-1.1-14 44-43.9 82.2-84.3 106.1.7 1.7 1.9 5.3 2.4 5.9-.9 2.5-2.3 4.8-1.1 8.6 2.8 7.4 7.4 14.6 13 23.2 2.7 4 5.4 7.1 7.8 11.7.6 1.1 1.3 2.8 1.9 3.9 3.8 8 1 17.3-6.2 20.8-7.3 3.5-16.3-.2-20.2-8.3-.6-1.1-1.3-2.7-1.8-3.8-2.1-4.7-2.8-8.8-4.2-13.4-3.3-9.7-6-17.8-10-24.6-2.2-3.3-5-3.7-7.5-4.5-.5-.8-2.2-4-3.1-5.6-8.1 3.1-16.4 5.6-25.1 7.6-37.9 8.6-75.9 5.1-109.9-7.9l-3.3 6c-2.5.7-4.8 1.3-6.3 3.1-5.3 6.4-7.5 16.6-11.3 26.3-1.5 4.6-2.1 8.7-4.2 13.4-.5 1.1-1.3 2.6-1.8 3.7-3.9 8.1-12.9 11.7-20.2 8.2-7.2-3.5-10-12.7-6.2-20.8.6-1.2 1.3-2.8 1.9-3.9 2.4-4.6 5.2-7.7 7.8-11.7 5.5-8.7 10.4-16.4 13.2-23.8.7-2.4-.3-5.8-1.3-8.3l2.7-6.4c-38.9-23.1-69.7-59.8-84.3-105.3l-6.4 1.1c-1.7-1-5.1-3.2-8.4-3-7.8 1.1-15.8 4-25.5 7.5-4.5 1.7-8.1 3.7-13.1 5-1.1.3-2.6.6-3.8.8-.1 0-.2.1-.3.1s-.2 0-.2 0c-8.7 1.9-17.1-2.9-18.9-10.7s3.8-15.7 12.4-17.8c.1 0 .2 0 .2-.1h.1c1.2-.3 2.8-.7 3.9-.9 5.1-1 9.2-.7 14-1.1 10.2-1.1 18.7-1.9 26.2-4.3 2.4-1 4.7-4.3 6.3-6.3l6.1-1.8c-6.9-47.5 4.8-94.2 29.8-131.9l-4.7-4.2c-.3-1.8-.7-6-2.9-8.4-5.8-5.4-13-9.9-21.8-15.3-4.2-2.4-8-4-12.1-7.1-.9-.7-2.1-1.7-3-2.4-.1-.1-.1-.1-.2-.2-7-5.6-8.6-15.2-3.6-21.6 2.8-3.6 7.2-5.3 11.7-5.2 3.5.1 7.1 1.4 10.2 3.8 1 .8 2.4 1.8 3.2 2.6 3.9 3.4 6.3 6.7 9.6 10.2 7.2 7.3 13.2 13.4 19.7 17.8 3.4 2 6.1 1.2 8.7.8.8.6 3.7 2.6 5.3 3.8 24.9-26.4 57.6-46 95.6-54.6 8.8-2 17.7-3.3 26.4-4.1l.3-6.2c1.9-1.9 4.1-4.6 4.8-7.6.6-7.9-.4-16.3-1.6-26.5-.7-4.8-1.8-8.7-2-13.9 0-1.1 0-2.5 0-3.8 0-.1 0-.3 0-.4 0-9 6.5-16.2 14.6-16.2s14.6 7.3 14.6 16.2c0 1.3.1 3 0 4.2-.2 5.2-1.3 9.1-2 13.9-1.2 10.2-2.3 18.7-1.7 26.5.6 3.9 2.9 5.5 4.8 7.3 0 1.1.2 4.6.3 6.5 46.5 4.1 89.7 25.4 121.4 58.7l5.6-4c1.9.1 6 .7 8.9-1 6.5-4.4 12.5-10.5 19.7-17.8 3.3-3.5 5.7-6.8 9.7-10.2.9-.8 2.3-1.8 3.2-2.6 7-5.6 16.8-5 21.8 1.3s3.4 16-3.6 21.6c-1 .8-2.3 1.9-3.2 2.6-4.2 3.1-8 4.7-12.2 7.1-8.7 5.4-16 9.9-21.8 15.3-2.7 2.9-2.5 5.7-2.8 8.3-.8.7-3.7 3.3-5.2 4.7 12.6 18.8 22.1 40.1 27.4 63.3 5.3 23.1 6.1 46.1 3.1 68.3l5.9 1.7c1.1 1.5 3.2 5.2 6.3 6.3 7.5 2.4 16 3.2 26.2 4.3 4.8.4 8.9.2 14 1.1 1.2.2 3 .7 4.2 1 8.9 2.4 14.4 10.4 12.6 18.2z"
|
||||
/>
|
||||
<path
|
||||
d="m428 401.7c-1-.2-2-.3-3-.2-1.7.1-3.3.5-4.9 1.3-6.2 3-9 10.4-6.2 16.7l-.1.1 29.6 71.4c28.5-18.2 49.8-45.3 61-76.6l-76.2-12.9z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="intro-contents box grow"
|
||||
>
|
||||
<div
|
||||
class="description flex align-center justify-space-between"
|
||||
data-testid="selected-chart-description"
|
||||
>
|
||||
|
||||
<button
|
||||
class="Button primary"
|
||||
type="button"
|
||||
>
|
||||
Install
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="DrawerItem version"
|
||||
>
|
||||
<span
|
||||
class="name"
|
||||
>
|
||||
Version
|
||||
</span>
|
||||
<span
|
||||
class="value"
|
||||
>
|
||||
<div
|
||||
class="Select theme-outlined css-b62m3t-container"
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-chart-version-input-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
/>
|
||||
<div
|
||||
class="Select__control css-1s2u09g-control"
|
||||
>
|
||||
<div
|
||||
class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
|
||||
>
|
||||
<div
|
||||
class="Select__single-value css-qc6sy-singleValue"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div
|
||||
class="Select__input-container css-6j8wv5-Input"
|
||||
data-value=""
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
class="Select__input"
|
||||
id="chart-version-input"
|
||||
role="combobox"
|
||||
spellcheck="false"
|
||||
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
|
||||
tabindex="0"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
|
||||
>
|
||||
<span
|
||||
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="css-tj5bde-Svg"
|
||||
focusable="false"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<path
|
||||
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="DrawerItem"
|
||||
>
|
||||
<span
|
||||
class="name"
|
||||
>
|
||||
Home
|
||||
</span>
|
||||
<span
|
||||
class="value"
|
||||
>
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="DrawerItem maintainers"
|
||||
>
|
||||
<span
|
||||
class="name"
|
||||
>
|
||||
Maintainers
|
||||
</span>
|
||||
<span
|
||||
class="value"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="chart-description"
|
||||
data-testid="helmchart-readme"
|
||||
>
|
||||
<div
|
||||
class="MarkDownViewer"
|
||||
>
|
||||
<p>
|
||||
I am a readme
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ResizingAnchor horizontal leading"
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`<HelmChartDetails /> before getChartDetails resolves with getChartDetails rejects renders 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class="Notifications flex column align-flex-end"
|
||||
>
|
||||
<div
|
||||
class="Animate opacity notification flex error enter"
|
||||
style="--enter-duration: 100ms; --leave-duration: 100ms;"
|
||||
>
|
||||
<div
|
||||
class="box"
|
||||
>
|
||||
<i
|
||||
class="Icon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="info_outline"
|
||||
>
|
||||
info_outline
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="message box grow"
|
||||
>
|
||||
Error: some error
|
||||
</div>
|
||||
<div
|
||||
class="box"
|
||||
>
|
||||
<i
|
||||
class="Icon close material interactive focusable"
|
||||
data-testid="close-notification-for-notification_20"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="close"
|
||||
>
|
||||
close
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Animate slide-right Drawer HelmChartDetails right enter"
|
||||
style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
|
||||
>
|
||||
<div
|
||||
class="drawer-wrapper flex column"
|
||||
>
|
||||
<div
|
||||
class="drawer-title flex align-center"
|
||||
>
|
||||
<div
|
||||
class="drawer-title-text flex gaps align-center"
|
||||
>
|
||||
Chart: a galaxy far far away/a name
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
id="tooltip_target_18"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="content_copy"
|
||||
>
|
||||
content_copy
|
||||
</span>
|
||||
<div />
|
||||
</i>
|
||||
</div>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
id="tooltip_target_19"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="close"
|
||||
>
|
||||
close
|
||||
</span>
|
||||
<div />
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="drawer-content flex column box grow"
|
||||
>
|
||||
<div
|
||||
class="Spinner singleColor center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ResizingAnchor horizontal leading"
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
|
||||
import { asyncComputed } from "@ogre-tools/injectable-react";
|
||||
import callForHelmChartReadmeInjectable from "./readme/call-for-helm-chart-readme.injectable";
|
||||
import helmChartDetailsVersionSelectionInjectable from "./versions/helm-chart-details-version-selection.injectable";
|
||||
import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
|
||||
const readmeOfSelectedHelmChartInjectable = getInjectable({
|
||||
id: "readme-of-selected-helm-chart",
|
||||
|
||||
instantiate: (di, chart: HelmChart) => {
|
||||
const selection = di.inject(helmChartDetailsVersionSelectionInjectable, chart);
|
||||
const callForHelmChartReadme = di.inject(callForHelmChartReadmeInjectable);
|
||||
|
||||
return asyncComputed(async () => {
|
||||
const chartVersion = selection.value.get();
|
||||
|
||||
if (!chartVersion) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return await callForHelmChartReadme(
|
||||
chartVersion.getRepository(),
|
||||
chartVersion.getName(),
|
||||
chartVersion.getVersion(),
|
||||
);
|
||||
}, "");
|
||||
},
|
||||
|
||||
lifecycle: lifecycleEnum.keyedSingleton({
|
||||
getInstanceKey: (di, chart: HelmChart) => chart.getId(),
|
||||
}),
|
||||
});
|
||||
|
||||
export default readmeOfSelectedHelmChartInjectable;
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { getChartDetails } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
|
||||
export type CallForHelmChartReadme = (
|
||||
repo: string,
|
||||
name: string,
|
||||
version: string,
|
||||
) => Promise<string>;
|
||||
|
||||
const callForHelmChartReadmeInjectable = getInjectable({
|
||||
id: "call-for-helm-chart-readme",
|
||||
|
||||
instantiate:
|
||||
(): CallForHelmChartReadme =>
|
||||
async (repository: string, name: string, version: string) => {
|
||||
// TODO: Dismantle wrong abstraction
|
||||
const details = await getChartDetails(repository, name, { version });
|
||||
|
||||
return details.readme;
|
||||
},
|
||||
|
||||
causesSideEffects: true,
|
||||
});
|
||||
|
||||
export default callForHelmChartReadmeInjectable;
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
|
||||
import { asyncComputed } from "@ogre-tools/injectable-react";
|
||||
import callForHelmChartVersionsInjectable from "./versions/call-for-helm-chart-versions.injectable";
|
||||
import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
|
||||
const versionsOfSelectedHelmChartInjectable = getInjectable({
|
||||
id: "versions-of-selected-helm-chart",
|
||||
|
||||
instantiate: (di, chart: HelmChart) => {
|
||||
const callForHelmChartVersions = di.inject(callForHelmChartVersionsInjectable);
|
||||
|
||||
return asyncComputed(
|
||||
async () =>
|
||||
await callForHelmChartVersions(chart.getRepository(), chart.getName()),
|
||||
[],
|
||||
);
|
||||
},
|
||||
|
||||
lifecycle: lifecycleEnum.keyedSingleton({
|
||||
getInstanceKey: (di, chart: HelmChart) => chart.getId(),
|
||||
}),
|
||||
});
|
||||
|
||||
export default versionsOfSelectedHelmChartInjectable;
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import type { HelmChart } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import { getChartDetails } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
|
||||
export type CallForHelmChartVersions = (
|
||||
repo: string,
|
||||
name: string
|
||||
) => Promise<HelmChart[]>;
|
||||
|
||||
const callForHelmChartVersionsInjectable = getInjectable({
|
||||
id: "call-for-helm-chart-versions",
|
||||
|
||||
instantiate:
|
||||
(): CallForHelmChartVersions => async (repository: string, name: string) => {
|
||||
// TODO: Dismantle wrong abstraction
|
||||
const details = await getChartDetails(repository, name);
|
||||
|
||||
return details.versions;
|
||||
},
|
||||
|
||||
causesSideEffects: true,
|
||||
});
|
||||
|
||||
export default callForHelmChartVersionsInjectable;
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
|
||||
import type { IComputedValue } from "mobx";
|
||||
import { computed, observable } from "mobx";
|
||||
import versionsOfSelectedHelmChartInjectable from "../versions-of-selected-helm-chart.injectable";
|
||||
import type { HelmChart } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import type { SingleValue } from "react-select";
|
||||
|
||||
interface VersionSelectionOption {
|
||||
label: string;
|
||||
value: HelmChart;
|
||||
}
|
||||
|
||||
export interface HelmChartDetailsVersionSelection {
|
||||
value: IComputedValue<HelmChart | undefined>;
|
||||
options: IComputedValue<VersionSelectionOption[]>;
|
||||
onChange: (option: SingleValue<VersionSelectionOption>) => void;
|
||||
}
|
||||
|
||||
const helmChartDetailsVersionSelectionInjectable = getInjectable({
|
||||
id: "helm-chart-details-version-selection",
|
||||
|
||||
instantiate: (di, chart: HelmChart): HelmChartDetailsVersionSelection => {
|
||||
const versionsOfSelectedHelmChart = di.inject(
|
||||
versionsOfSelectedHelmChartInjectable,
|
||||
chart,
|
||||
);
|
||||
|
||||
const state = observable.box<HelmChart>();
|
||||
|
||||
return {
|
||||
value: computed(
|
||||
() => state.get() || versionsOfSelectedHelmChart.value.get()[0],
|
||||
),
|
||||
|
||||
options: computed(() =>
|
||||
versionsOfSelectedHelmChart.value.get().map((chartVersion) => ({
|
||||
label: chartVersion.version,
|
||||
value: chartVersion,
|
||||
})),
|
||||
),
|
||||
|
||||
onChange: (option) => {
|
||||
if (option) {
|
||||
state.set(option.value);
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
lifecycle: lifecycleEnum.keyedSingleton({
|
||||
getInstanceKey: (di, chart: HelmChart) => chart.getId(),
|
||||
}),
|
||||
});
|
||||
|
||||
export default helmChartDetailsVersionSelectionInjectable;
|
||||
@@ -1,92 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import type { AsyncFnMock } from "@async-fn/jest";
|
||||
import asyncFn from "@async-fn/jest";
|
||||
import type { DiContainer } from "@ogre-tools/injectable";
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import React from "react";
|
||||
import directoryForLensLocalStorageInjectable from "../../../common/directory-for-lens-local-storage/directory-for-lens-local-storage.injectable";
|
||||
import { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import { getDiForUnitTesting } from "../../getDiForUnitTesting";
|
||||
import { noop } from "../../utils";
|
||||
import type { CreateInstallChartTab } from "../dock/install-chart/create-install-chart-tab.injectable";
|
||||
import createInstallChartTabInjectable from "../dock/install-chart/create-install-chart-tab.injectable";
|
||||
import { Notifications } from "../notifications";
|
||||
import type { DiRender } from "../test-utils/renderFor";
|
||||
import { renderFor } from "../test-utils/renderFor";
|
||||
import type { GetChartDetails } from "./get-char-details.injectable";
|
||||
import getChartDetailsInjectable from "./get-char-details.injectable";
|
||||
import { HelmChartDetails } from "./helm-chart-details";
|
||||
|
||||
describe("<HelmChartDetails />", () => {
|
||||
let di: DiContainer;
|
||||
let getChartDetails: AsyncFnMock<GetChartDetails>;
|
||||
let chart: HelmChart;
|
||||
let render: DiRender;
|
||||
let result: RenderResult;
|
||||
let createInstallChartTab: jest.MockedFunction<CreateInstallChartTab>;
|
||||
|
||||
beforeEach(() => {
|
||||
di = getDiForUnitTesting({ doGeneralOverrides: true });
|
||||
getChartDetails = asyncFn<GetChartDetails>();
|
||||
createInstallChartTab = jest.fn();
|
||||
chart = HelmChart.create({
|
||||
apiVersion: "some-api-version",
|
||||
created: "a long time ago",
|
||||
name: "a name",
|
||||
repo: "a galaxy far far away",
|
||||
version: "1",
|
||||
});
|
||||
|
||||
di.override(directoryForLensLocalStorageInjectable, () => "some-directory-for-lens-local-storage");
|
||||
di.override(getChartDetailsInjectable, () => getChartDetails);
|
||||
di.override(createInstallChartTabInjectable, () => createInstallChartTab);
|
||||
render = renderFor(di);
|
||||
result = render((
|
||||
<>
|
||||
<HelmChartDetails chart={chart} hideDetails={noop} />
|
||||
<Notifications />
|
||||
</>
|
||||
));
|
||||
});
|
||||
|
||||
describe("before getChartDetails resolves", () => {
|
||||
it("renders", () => {
|
||||
expect(result.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("when getChartDetails resolves with one version", () => {
|
||||
beforeEach(async () => {
|
||||
await getChartDetails.resolve({
|
||||
readme: "I am a readme",
|
||||
versions: [chart],
|
||||
});
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(result.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows the readme", () => {
|
||||
expect(result.queryByTestId("helmchart-readme")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("shows the selected chart", () => {
|
||||
expect(result.queryByTestId("selected-chart-description")).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("with getChartDetails rejects", () => {
|
||||
beforeEach(async () => {
|
||||
await getChartDetails.reject(new Error("some error"));
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(result.baseElement).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -7,8 +7,7 @@ import "./helm-chart-details.scss";
|
||||
|
||||
import React, { Component } from "react";
|
||||
import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import { computed, observable, reaction, runInAction } from "mobx";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Drawer, DrawerItem } from "../drawer";
|
||||
import { autoBind, stopPropagation } from "../../utils";
|
||||
import { MarkdownViewer } from "../markdown-viewer";
|
||||
@@ -17,19 +16,19 @@ import { Button } from "../button";
|
||||
import { Select } from "../select";
|
||||
import { Badge } from "../badge";
|
||||
import { Tooltip, withStyles } from "@material-ui/core";
|
||||
import type { IAsyncComputed } from "@ogre-tools/injectable-react";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import createInstallChartTabInjectable from "../dock/install-chart/create-install-chart-tab.injectable";
|
||||
import type { ShowCheckedErrorNotification } from "../notifications/show-checked-error.injectable";
|
||||
import type { SingleValue } from "react-select";
|
||||
import AbortController from "abort-controller";
|
||||
import showCheckedErrorNotificationInjectable from "../notifications/show-checked-error.injectable";
|
||||
import type { GetChartDetails } from "./get-char-details.injectable";
|
||||
import getChartDetailsInjectable from "./get-char-details.injectable";
|
||||
import { HelmChartIcon } from "./icon";
|
||||
import readmeOfSelectHelmChartInjectable from "./details/readme-of-selected-helm-chart.injectable";
|
||||
import versionsOfSelectedHelmChartInjectable from "./details/versions-of-selected-helm-chart.injectable";
|
||||
import type { HelmChartDetailsVersionSelection } from "./details/versions/helm-chart-details-version-selection.injectable";
|
||||
import helmChartDetailsVersionSelectionInjectable from "./details/versions/helm-chart-details-version-selection.injectable";
|
||||
import assert from "assert";
|
||||
|
||||
export interface HelmChartDetailsProps {
|
||||
chart: HelmChart;
|
||||
hideDetails(): void;
|
||||
chart: HelmChart;
|
||||
}
|
||||
|
||||
const LargeTooltip = withStyles({
|
||||
@@ -40,85 +39,34 @@ const LargeTooltip = withStyles({
|
||||
|
||||
interface Dependencies {
|
||||
createInstallChartTab: (helmChart: HelmChart) => void;
|
||||
showCheckedErrorNotification: ShowCheckedErrorNotification;
|
||||
getChartDetails: GetChartDetails;
|
||||
versions: IAsyncComputed<HelmChart[]>;
|
||||
readme: IAsyncComputed<string>;
|
||||
versionSelection: HelmChartDetailsVersionSelection;
|
||||
}
|
||||
|
||||
@observer
|
||||
class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Dependencies> {
|
||||
readonly chartVersions = observable.array<HelmChart>();
|
||||
readonly selectedChart = observable.box<HelmChart | undefined>();
|
||||
readonly readme = observable.box<string | undefined>(undefined);
|
||||
readonly chartVerionOptions = computed(() => (
|
||||
this.chartVersions.map(chart => ({
|
||||
value: chart,
|
||||
label: chart.version,
|
||||
}))
|
||||
));
|
||||
|
||||
private abortController = new AbortController();
|
||||
|
||||
constructor(props: HelmChartDetailsProps & Dependencies) {
|
||||
super(props);
|
||||
autoBind(this);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.abortController.abort();
|
||||
get chart() {
|
||||
return this.props.chart;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
disposeOnUnmount(this, [
|
||||
reaction(() => this.props.chart, async ({ name, repo, version }) => {
|
||||
runInAction(() => {
|
||||
this.selectedChart.set(undefined);
|
||||
this.chartVersions.clear();
|
||||
this.readme.set("");
|
||||
});
|
||||
install() {
|
||||
const chart = this.props.versionSelection.value.get();
|
||||
|
||||
try {
|
||||
const { readme, versions } = await this.props.getChartDetails(repo, name, { version });
|
||||
assert(chart);
|
||||
|
||||
runInAction(() => {
|
||||
this.readme.set(readme);
|
||||
this.chartVersions.replace(versions);
|
||||
this.selectedChart.set(versions[0]);
|
||||
});
|
||||
} catch (error) {
|
||||
this.props.showCheckedErrorNotification(error, "Unknown error occured while getting chart details");
|
||||
}
|
||||
}, {
|
||||
fireImmediately: true,
|
||||
}),
|
||||
]);
|
||||
}
|
||||
|
||||
async onVersionChange(option: SingleValue<{ value: HelmChart }>) {
|
||||
const chart = option?.value ?? this.chartVersions[0];
|
||||
|
||||
runInAction(() => {
|
||||
this.selectedChart.set(chart ?? undefined);
|
||||
this.readme.set(undefined);
|
||||
});
|
||||
|
||||
try {
|
||||
this.abortController.abort();
|
||||
this.abortController = new AbortController();
|
||||
const { chart: { name, repo }} = this.props;
|
||||
const { readme } = await this.props.getChartDetails(repo, name, { version: chart.version, reqInit: { signal: this.abortController.signal }});
|
||||
|
||||
this.readme.set(readme);
|
||||
} catch (error) {
|
||||
this.props.showCheckedErrorNotification(error, "Unknown error occured while getting chart details");
|
||||
}
|
||||
}
|
||||
|
||||
install(selectedChart: HelmChart) {
|
||||
this.props.createInstallChartTab(selectedChart);
|
||||
this.props.createInstallChartTab(chart);
|
||||
this.props.hideDetails();
|
||||
}
|
||||
|
||||
renderIntroduction(selectedChart: HelmChart) {
|
||||
const testId = selectedChart.getFullName("-");
|
||||
|
||||
return (
|
||||
<div className="introduction flex align-flex-start">
|
||||
<HelmChartIcon
|
||||
@@ -131,7 +79,8 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
<Button
|
||||
primary
|
||||
label="Install"
|
||||
onClick={() => this.install(selectedChart)}
|
||||
onClick={this.install}
|
||||
data-testid={`install-chart-for-${testId}`}
|
||||
/>
|
||||
</div>
|
||||
<DrawerItem
|
||||
@@ -140,10 +89,10 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
onClick={stopPropagation}
|
||||
>
|
||||
<Select
|
||||
id="chart-version-input"
|
||||
id={`helm-chart-version-selector-${testId}`}
|
||||
themeName="outlined"
|
||||
menuPortalTarget={null}
|
||||
options={this.chartVerionOptions.get()}
|
||||
options={this.props.versionSelection.options.get()}
|
||||
formatOptionLabel={({ value: chart }) => (
|
||||
chart.deprecated
|
||||
? (
|
||||
@@ -154,8 +103,8 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
: chart.version
|
||||
)}
|
||||
isOptionDisabled={({ value: chart }) => chart.deprecated}
|
||||
value={selectedChart}
|
||||
onChange={this.onVersionChange}
|
||||
value={this.props.versionSelection.value.get()}
|
||||
onChange={this.props.versionSelection.onChange}
|
||||
/>
|
||||
</DrawerItem>
|
||||
<DrawerItem name="Home">
|
||||
@@ -190,44 +139,42 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
}
|
||||
|
||||
renderReadme() {
|
||||
const readme = this.readme.get();
|
||||
|
||||
if (readme === undefined) {
|
||||
return <Spinner center />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="chart-description" data-testid="helmchart-readme">
|
||||
<MarkdownViewer markdown={readme} />
|
||||
<MarkdownViewer markdown={this.props.readme.value.get()} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
const selectedChart = this.selectedChart.get();
|
||||
const readmeIsLoading = this.props.readme.pending.get();
|
||||
const versionsAreLoading = this.props.versions.pending.get();
|
||||
|
||||
if (!selectedChart) {
|
||||
return <Spinner center />;
|
||||
if (!this.chart || versionsAreLoading) {
|
||||
return <Spinner center data-testid="spinner-for-chart-details" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="box grow">
|
||||
{this.renderIntroduction(selectedChart)}
|
||||
{this.renderReadme()}
|
||||
{this.renderIntroduction(this.chart)}
|
||||
|
||||
{readmeIsLoading ? (
|
||||
<Spinner center data-testid="spinner-for-chart-readme" />
|
||||
) : (
|
||||
this.renderReadme()
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { chart, hideDetails } = this.props;
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
className="HelmChartDetails"
|
||||
usePortal={true}
|
||||
open={!!chart}
|
||||
title={chart ? `Chart: ${chart.getFullName()}` : ""}
|
||||
onClose={hideDetails}
|
||||
open={!!this.chart}
|
||||
title={this.chart ? `Chart: ${this.chart.getFullName()}` : ""}
|
||||
onClose={this.props.hideDetails}
|
||||
>
|
||||
{this.renderContent()}
|
||||
</Drawer>
|
||||
@@ -239,7 +186,8 @@ export const HelmChartDetails = withInjectables<Dependencies, HelmChartDetailsPr
|
||||
getProps: (di, props) => ({
|
||||
...props,
|
||||
createInstallChartTab: di.inject(createInstallChartTabInjectable),
|
||||
showCheckedErrorNotification: di.inject(showCheckedErrorNotificationInjectable),
|
||||
getChartDetails: di.inject(getChartDetailsInjectable),
|
||||
readme: di.inject(readmeOfSelectHelmChartInjectable, props.chart),
|
||||
versions: di.inject(versionsOfSelectedHelmChartInjectable, props.chart),
|
||||
versionSelection: di.inject(helmChartDetailsVersionSelectionInjectable, props.chart),
|
||||
}),
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { HelmChartStore } from "./helm-chart.store";
|
||||
|
||||
const helmChartStoreInjectable = getInjectable({
|
||||
id: "helm-chart-store",
|
||||
instantiate: () => new HelmChartStore(),
|
||||
});
|
||||
|
||||
export default helmChartStoreInjectable;
|
||||
@@ -12,12 +12,15 @@ import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.ap
|
||||
import { HelmChartDetails } from "./helm-chart-details";
|
||||
import { ItemListLayout } from "../item-object-list/list-layout";
|
||||
import type { IComputedValue } from "mobx";
|
||||
import type { IAsyncComputed } from "@ogre-tools/injectable-react";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
|
||||
import helmChartsRouteParametersInjectable from "./helm-charts-route-parameters.injectable";
|
||||
import type { NavigateToHelmCharts } from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
|
||||
import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
|
||||
import { HelmChartIcon } from "./icon";
|
||||
import helmChartsInjectable from "./helm-charts/helm-charts.injectable";
|
||||
import selectedHelmChartInjectable from "./helm-charts/selected-helm-chart.injectable";
|
||||
|
||||
enum columnId {
|
||||
name = "name",
|
||||
@@ -34,27 +37,15 @@ interface Dependencies {
|
||||
};
|
||||
|
||||
navigateToHelmCharts: NavigateToHelmCharts;
|
||||
|
||||
charts: IAsyncComputed<HelmChart[]>;
|
||||
selectedChart: IComputedValue<HelmChart | undefined>;
|
||||
}
|
||||
|
||||
@observer
|
||||
class NonInjectedHelmCharts extends Component<Dependencies> {
|
||||
componentDidMount() {
|
||||
helmChartStore.loadAll();
|
||||
}
|
||||
|
||||
get selectedChart() {
|
||||
const chartName = this.props.routeParameters.chartName.get();
|
||||
const repo = this.props.routeParameters.repo.get();
|
||||
|
||||
if (!chartName || !repo) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return helmChartStore.getByName(chartName, repo);
|
||||
}
|
||||
|
||||
onDetails = (chart: HelmChart) => {
|
||||
if (chart === this.selectedChart) {
|
||||
if (chart === this.props.selectedChart.get()) {
|
||||
this.hideDetails();
|
||||
} else {
|
||||
this.showDetails(chart);
|
||||
@@ -78,6 +69,8 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const selectedChart = this.props.selectedChart.get();
|
||||
|
||||
return (
|
||||
<SiblingsInTabLayout>
|
||||
<div data-testid="page-for-helm-charts" style={{ display: "none" }}/>
|
||||
@@ -87,7 +80,7 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
|
||||
tableId="helm_charts"
|
||||
className="HelmCharts"
|
||||
store={helmChartStore}
|
||||
getItems={() => helmChartStore.items}
|
||||
getItems={() => this.props.charts.value.get()}
|
||||
isSelectable={false}
|
||||
sortingCallbacks={{
|
||||
[columnId.name]: chart => chart.getName(),
|
||||
@@ -105,6 +98,7 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
|
||||
placeholder: "Search Helm Charts...",
|
||||
},
|
||||
})}
|
||||
customizeTableRowProps={(item) => ({ testId: `helm-chart-row-for-${item.getFullName("-")}` })}
|
||||
renderTableHeader={[
|
||||
{ className: "icon", showWithColumn: columnId.name },
|
||||
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
|
||||
@@ -124,12 +118,12 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
|
||||
{ title: chart.getRepository(), className: chart.getRepository().toLowerCase() },
|
||||
{ className: "menu" },
|
||||
]}
|
||||
detailsItem={this.selectedChart}
|
||||
detailsItem={selectedChart}
|
||||
onDetails={this.onDetails}
|
||||
/>
|
||||
{this.selectedChart && (
|
||||
{selectedChart && (
|
||||
<HelmChartDetails
|
||||
chart={this.selectedChart}
|
||||
chart={selectedChart}
|
||||
hideDetails={this.hideDetails}
|
||||
/>
|
||||
)}
|
||||
@@ -145,6 +139,8 @@ export const HelmCharts = withInjectables<Dependencies>(
|
||||
getProps: (di) => ({
|
||||
routeParameters: di.inject(helmChartsRouteParametersInjectable),
|
||||
navigateToHelmCharts: di.inject(navigateToHelmChartsInjectable),
|
||||
charts: di.inject(helmChartsInjectable),
|
||||
selectedChart: di.inject(selectedHelmChartInjectable),
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import { listCharts } from "../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
|
||||
export type CallForHelmCharts = () => Promise<HelmChart[]>;
|
||||
|
||||
const callForHelmChartsInjectable = getInjectable({
|
||||
id: "call-for-helm-charts",
|
||||
instantiate: (): CallForHelmCharts => async () => await listCharts(),
|
||||
causesSideEffects: true,
|
||||
});
|
||||
|
||||
export default callForHelmChartsInjectable;
|
||||
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { asyncComputed } from "@ogre-tools/injectable-react";
|
||||
import callForHelmChartsInjectable from "./call-for-helm-charts.injectable";
|
||||
|
||||
const helmChartsInjectable = getInjectable({
|
||||
id: "helm-charts",
|
||||
|
||||
instantiate: (di) => {
|
||||
const callForHelmCharts = di.inject(callForHelmChartsInjectable);
|
||||
|
||||
return asyncComputed(async () => await callForHelmCharts(), []);
|
||||
},
|
||||
});
|
||||
|
||||
export default helmChartsInjectable;
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { computed } from "mobx";
|
||||
import helmChartsRouteParametersInjectable from "../helm-charts-route-parameters.injectable";
|
||||
import helmChartsInjectable from "./helm-charts.injectable";
|
||||
|
||||
const selectedHelmChartInjectable = getInjectable({
|
||||
id: "selected-helm-chart",
|
||||
|
||||
instantiate: (di) => {
|
||||
const { chartName, repo } = di.inject(helmChartsRouteParametersInjectable);
|
||||
const helmCharts = di.inject(helmChartsInjectable);
|
||||
|
||||
return computed(() => {
|
||||
const dereferencedChartName = chartName.get();
|
||||
const deferencedRepository = repo.get();
|
||||
|
||||
if (!dereferencedChartName || !deferencedRepository) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return helmCharts.value
|
||||
.get()
|
||||
.find(
|
||||
(chart) =>
|
||||
chart.getName() === dereferencedChartName &&
|
||||
chart.getRepository() === deferencedRepository,
|
||||
);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export default selectedHelmChartInjectable;
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import type { HelmReleaseCreatePayload, HelmReleaseUpdateDetails } from "../../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { createRelease } from "../../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
|
||||
export type CallForCreateHelmRelease = (
|
||||
payload: HelmReleaseCreatePayload
|
||||
) => Promise<HelmReleaseUpdateDetails>;
|
||||
|
||||
const callForCreateHelmReleaseInjectable = getInjectable({
|
||||
id: "call-for-create-helm-release",
|
||||
instantiate: (): CallForCreateHelmRelease => createRelease,
|
||||
causesSideEffects: true,
|
||||
});
|
||||
|
||||
export default callForCreateHelmReleaseInjectable;
|
||||
@@ -6,19 +6,18 @@ import { getInjectable } from "@ogre-tools/injectable";
|
||||
|
||||
import type {
|
||||
HelmReleaseCreatePayload } from "../../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import {
|
||||
createRelease,
|
||||
} from "../../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import releasesInjectable from "../releases.injectable";
|
||||
import callForCreateHelmReleaseInjectable from "./call-for-create-helm-release.injectable";
|
||||
|
||||
const createReleaseInjectable = getInjectable({
|
||||
id: "create-release",
|
||||
|
||||
instantiate: (di) => {
|
||||
const releases = di.inject(releasesInjectable);
|
||||
const callForCreateRelease = di.inject(callForCreateHelmReleaseInjectable);
|
||||
|
||||
return async (payload: HelmReleaseCreatePayload) => {
|
||||
const release = await createRelease(payload);
|
||||
const release = await callForCreateRelease(payload);
|
||||
|
||||
releases.invalidate();
|
||||
|
||||
|
||||
@@ -85,6 +85,7 @@ class NonInjectedHelmReleaseMenu extends React.Component<HelmReleaseMenuProps &
|
||||
removeConfirmationMessage={() => (
|
||||
<p>
|
||||
Remove Helm Release
|
||||
{" "}
|
||||
<b>{release.name}</b>
|
||||
?
|
||||
</p>
|
||||
|
||||
@@ -77,6 +77,7 @@ class NonInjectedHelmReleases extends Component<Dependencies> {
|
||||
<div>
|
||||
<>
|
||||
Remove
|
||||
{" "}
|
||||
<b>{releaseNames}</b>
|
||||
?
|
||||
</>
|
||||
|
||||
@@ -13,8 +13,7 @@ import { Notifications } from "../notifications";
|
||||
import { Button } from "../button";
|
||||
import { Icon } from "../icon";
|
||||
import { clipboard } from "electron";
|
||||
|
||||
// todo: make as external BrowserWindow (?)
|
||||
import { kebabCase } from "lodash/fp";
|
||||
|
||||
export interface LogsDialogProps extends DialogProps {
|
||||
title: string;
|
||||
@@ -26,6 +25,7 @@ export function LogsDialog({ title, logs, ...dialogProps }: LogsDialogProps) {
|
||||
<Dialog
|
||||
{...dialogProps}
|
||||
className="LogsDialog"
|
||||
data-testid={`logs-dialog-for-${kebabCase(title)}`}
|
||||
>
|
||||
<Wizard
|
||||
header={<h5>{title}</h5>}
|
||||
|
||||
@@ -115,6 +115,7 @@ class NonInjectedDockTab extends React.Component<DockTabProps & Dependencies> {
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
data-testid={`dock-tab-for-${id}`}
|
||||
/>
|
||||
{this.renderMenu(id)}
|
||||
</>
|
||||
|
||||
@@ -11,8 +11,8 @@ import { DockTab } from "./dock-tab";
|
||||
import type { DockTab as DockTabModel } from "./dock/store";
|
||||
import { TabKind } from "./dock/store";
|
||||
import { TerminalTab } from "./terminal/dock-tab";
|
||||
import { useResizeObserver } from "../../hooks";
|
||||
import { cssVar } from "../../utils";
|
||||
import { useResizeObserver } from "../../hooks";
|
||||
|
||||
export interface DockTabsProps {
|
||||
tabs: DockTabModel[];
|
||||
|
||||
@@ -124,7 +124,10 @@ class NonInjectedDock extends React.Component<DockProps & Dependencies> {
|
||||
if (!isOpen || !selectedTab) return null;
|
||||
|
||||
return (
|
||||
<div className={`tab-content ${selectedTab.kind}`} style={{ flexBasis: height }}>
|
||||
<div
|
||||
className={`tab-content ${selectedTab.kind}`}
|
||||
style={{ flexBasis: height }}
|
||||
data-testid={`dock-tab-content-for-${selectedTab.id}`}>
|
||||
{this.renderTab(selectedTab)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -8,3 +8,7 @@
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -22,6 +22,7 @@ export interface EditorPanelProps {
|
||||
autoFocus?: boolean; // default: true
|
||||
onChange: MonacoEditorProps["onChange"];
|
||||
onError?: MonacoEditorProps["onError"];
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
interface Dependencies {
|
||||
@@ -36,6 +37,7 @@ const NonInjectedEditorPanel = observer(({
|
||||
autoFocus = true,
|
||||
className,
|
||||
onError,
|
||||
hidden,
|
||||
}: Dependencies & EditorPanelProps) => {
|
||||
const editor = createRef<MonacoEditorRef>();
|
||||
|
||||
@@ -59,7 +61,7 @@ const NonInjectedEditorPanel = observer(({
|
||||
autoFocus={autoFocus}
|
||||
id={tabId}
|
||||
value={value}
|
||||
className={cssNames(styles.EditorPanel, className)}
|
||||
className={cssNames(styles.EditorPanel, className, { hidden })}
|
||||
onChange={onChange}
|
||||
onError={onError}
|
||||
ref={editor}
|
||||
|
||||
@@ -14,9 +14,12 @@ import { Button } from "../button";
|
||||
import { Icon } from "../icon";
|
||||
import { Spinner } from "../spinner";
|
||||
import type { DockStore, TabId } from "./dock/store";
|
||||
import { Notifications } from "../notifications";
|
||||
import type { ShowNotification } from "../notifications";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import dockStoreInjectable from "./dock/store.injectable";
|
||||
import type { ShowCheckedErrorNotification } from "../notifications/show-checked-error.injectable";
|
||||
import showSuccessNotificationInjectable from "../notifications/show-success-notification.injectable";
|
||||
import showCheckedErrorNotificationInjectable from "../notifications/show-checked-error.injectable";
|
||||
|
||||
export interface InfoPanelProps extends OptionalProps {
|
||||
tabId: TabId;
|
||||
@@ -35,10 +38,15 @@ export interface OptionalProps {
|
||||
showInlineInfo?: boolean;
|
||||
showNotifications?: boolean;
|
||||
showStatusPanel?: boolean;
|
||||
submitTestId?: string;
|
||||
cancelTestId?: string;
|
||||
submittingTestId?: string;
|
||||
}
|
||||
|
||||
interface Dependencies {
|
||||
dockStore: DockStore;
|
||||
showSuccessNotification: ShowNotification;
|
||||
showCheckedErrorNotification: ShowCheckedErrorNotification;
|
||||
}
|
||||
|
||||
@observer
|
||||
@@ -82,11 +90,11 @@ class NonInjectedInfoPanel extends Component<InfoPanelProps & Dependencies> {
|
||||
const result = await this.props.submit?.();
|
||||
|
||||
if (showNotifications && result) {
|
||||
Notifications.ok(result);
|
||||
this.props.showSuccessNotification(result);
|
||||
}
|
||||
} catch (error) {
|
||||
if (showNotifications) {
|
||||
Notifications.checkedError(error, "Unknown error while submitting");
|
||||
this.props.showCheckedErrorNotification(error, "Unknown error while submitting");
|
||||
}
|
||||
} finally {
|
||||
this.waiting = false;
|
||||
@@ -128,7 +136,7 @@ class NonInjectedInfoPanel extends Component<InfoPanelProps & Dependencies> {
|
||||
<div className="flex gaps align-center">
|
||||
{waiting ? (
|
||||
<>
|
||||
<Spinner />
|
||||
<Spinner data-testid={this.props.submittingTestId} />
|
||||
{" "}
|
||||
{submittingMessage}
|
||||
</>
|
||||
@@ -140,7 +148,8 @@ class NonInjectedInfoPanel extends Component<InfoPanelProps & Dependencies> {
|
||||
<Button
|
||||
plain
|
||||
label="Cancel"
|
||||
onClick={close}
|
||||
onClick={close}
|
||||
data-testid={this.props.cancelTestId}
|
||||
/>
|
||||
<Button
|
||||
active
|
||||
@@ -149,6 +158,7 @@ class NonInjectedInfoPanel extends Component<InfoPanelProps & Dependencies> {
|
||||
label={submitLabel}
|
||||
onClick={submit}
|
||||
disabled={isDisabled}
|
||||
data-testid={this.props.submitTestId}
|
||||
/>
|
||||
{showSubmitClose && (
|
||||
<Button
|
||||
@@ -172,6 +182,8 @@ export const InfoPanel = withInjectables<Dependencies, InfoPanelProps>(
|
||||
{
|
||||
getProps: (di, props) => ({
|
||||
dockStore: di.inject(dockStoreInjectable),
|
||||
showSuccessNotification: di.inject(showSuccessNotificationInjectable),
|
||||
showCheckedErrorNotification: di.inject(showCheckedErrorNotificationInjectable),
|
||||
...props,
|
||||
}),
|
||||
},
|
||||
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { getChartValues } from "../../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
|
||||
export type CallForHelmChartValues = (
|
||||
repo: string,
|
||||
name: string,
|
||||
version: string
|
||||
) => Promise<string>;
|
||||
|
||||
const callForHelmChartValuesInjectable = getInjectable({
|
||||
id: "call-for-helm-chart-values",
|
||||
instantiate: (): CallForHelmChartValues => getChartValues,
|
||||
causesSideEffects: true,
|
||||
});
|
||||
|
||||
export default callForHelmChartValuesInjectable;
|
||||
@@ -5,52 +5,46 @@
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import installChartTabStoreInjectable from "./store.injectable";
|
||||
import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import type {
|
||||
DockTab,
|
||||
DockTabCreate,
|
||||
DockTabCreateSpecific } from "../dock/store";
|
||||
import type { DockTab, DockTabCreateSpecific } from "../dock/store";
|
||||
import { TabKind } from "../dock/store";
|
||||
import type { InstallChartTabStore } from "./store";
|
||||
import createDockTabInjectable from "../dock/create-dock-tab.injectable";
|
||||
|
||||
interface Dependencies {
|
||||
createDockTab: (rawTab: DockTabCreate, addNumber: boolean) => DockTab;
|
||||
installChartStore: InstallChartTabStore;
|
||||
}
|
||||
import getRandomInstallChartTabIdInjectable from "./get-random-install-chart-tab-id.injectable";
|
||||
|
||||
export type CreateInstallChartTab = (chart: HelmChart, tabParams?: DockTabCreateSpecific) => DockTab;
|
||||
|
||||
const createInstallChartTab = ({ createDockTab, installChartStore }: Dependencies) => (chart: HelmChart, tabParams: DockTabCreateSpecific = {}) => {
|
||||
const { name, repo, version } = chart;
|
||||
|
||||
const tab = createDockTab(
|
||||
{
|
||||
title: `Helm Install: ${repo}/${name}`,
|
||||
...tabParams,
|
||||
kind: TabKind.INSTALL_CHART,
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
installChartStore.setData(tab.id, {
|
||||
name,
|
||||
repo,
|
||||
version,
|
||||
namespace: "default",
|
||||
releaseName: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
return tab;
|
||||
};
|
||||
|
||||
const createInstallChartTabInjectable = getInjectable({
|
||||
id: "create-install-chart-tab",
|
||||
|
||||
instantiate: (di) => createInstallChartTab({
|
||||
installChartStore: di.inject(installChartTabStoreInjectable),
|
||||
createDockTab: di.inject(createDockTabInjectable),
|
||||
}),
|
||||
instantiate: (di) => {
|
||||
const installChartStore = di.inject(installChartTabStoreInjectable);
|
||||
const createDockTab = di.inject(createDockTabInjectable);
|
||||
const getRandomId = di.inject(getRandomInstallChartTabIdInjectable);
|
||||
|
||||
return (chart: HelmChart, tabParams: DockTabCreateSpecific = {}) => {
|
||||
const { name, repo, version } = chart;
|
||||
|
||||
const tab = createDockTab(
|
||||
{
|
||||
id: getRandomId(),
|
||||
title: `Helm Install: ${repo}/${name}`,
|
||||
...tabParams,
|
||||
kind: TabKind.INSTALL_CHART,
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
installChartStore.setData(tab.id, {
|
||||
name,
|
||||
repo,
|
||||
version,
|
||||
namespace: "default",
|
||||
releaseName: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
return tab;
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default createInstallChartTabInjectable;
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import getRandomIdInjectable from "../../../../common/utils/get-random-id.injectable";
|
||||
|
||||
const getRandomInstallChartTabIdInjectable = getInjectable({
|
||||
id: "get-random-install-chart-tab-id",
|
||||
instantiate: (di) => di.inject(getRandomIdInjectable),
|
||||
});
|
||||
|
||||
export default getRandomInstallChartTabIdInjectable;
|
||||
@@ -0,0 +1,282 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
|
||||
import installChartTabStoreInjectable from "./store.injectable";
|
||||
import { waitUntilDefined } from "../../../../common/utils";
|
||||
import type { CallForHelmChartValues } from "./chart-data/call-for-helm-chart-values.injectable";
|
||||
import callForHelmChartValuesInjectable from "./chart-data/call-for-helm-chart-values.injectable";
|
||||
import type { IChartInstallData, InstallChartTabStore } from "./store";
|
||||
import type { HelmChart } from "../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import React from "react";
|
||||
import {
|
||||
action,
|
||||
computed,
|
||||
observable,
|
||||
runInAction,
|
||||
} from "mobx";
|
||||
import assert from "assert";
|
||||
import type { CallForCreateHelmRelease } from "../../+helm-releases/create-release/call-for-create-helm-release.injectable";
|
||||
import callForCreateHelmReleaseInjectable from "../../+helm-releases/create-release/call-for-create-helm-release.injectable";
|
||||
import type { HelmReleaseUpdateDetails } from "../../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import dockStoreInjectable from "../dock/store.injectable";
|
||||
import type { NavigateToHelmReleases } from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
|
||||
import navigateToHelmReleasesInjectable from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
|
||||
import type { SingleValue } from "react-select";
|
||||
import type { CallForHelmChartVersions } from "../../+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
|
||||
import callForHelmChartVersionsInjectable from "../../+helm-charts/details/versions/call-for-helm-chart-versions.injectable";
|
||||
|
||||
const installChartModelInjectable = getInjectable({
|
||||
id: "install-chart-model",
|
||||
|
||||
instantiate: async (di, tabId: string) => {
|
||||
const store = di.inject(installChartTabStoreInjectable);
|
||||
const callForHelmChartValues = di.inject(callForHelmChartValuesInjectable);
|
||||
const callForHelmChartVersions = di.inject(callForHelmChartVersionsInjectable);
|
||||
const callForCreateHelmRelease = di.inject(callForCreateHelmReleaseInjectable);
|
||||
const dockStore = di.inject(dockStoreInjectable);
|
||||
const navigateToHelmReleases = di.inject(navigateToHelmReleasesInjectable);
|
||||
const closeTab = () => dockStore.closeTab(tabId);
|
||||
|
||||
const waitForChart = async () => {
|
||||
await waitUntilDefined(() => store.getData(tabId));
|
||||
};
|
||||
|
||||
const model = new InstallChartModel({
|
||||
tabId,
|
||||
waitForChart,
|
||||
callForCreateHelmRelease,
|
||||
closeTab,
|
||||
navigateToHelmReleases,
|
||||
callForHelmChartValues,
|
||||
callForHelmChartVersions,
|
||||
store,
|
||||
});
|
||||
|
||||
await model.load();
|
||||
|
||||
return model;
|
||||
},
|
||||
|
||||
lifecycle: lifecycleEnum.keyedSingleton({
|
||||
getInstanceKey: (di, tabId: string) => tabId,
|
||||
}),
|
||||
});
|
||||
|
||||
export default installChartModelInjectable;
|
||||
|
||||
interface Dependencies {
|
||||
tabId: string;
|
||||
closeTab: () => void;
|
||||
navigateToHelmReleases: NavigateToHelmReleases;
|
||||
waitForChart: () => Promise<void>;
|
||||
callForCreateHelmRelease: CallForCreateHelmRelease;
|
||||
callForHelmChartValues: CallForHelmChartValues;
|
||||
callForHelmChartVersions: CallForHelmChartVersions;
|
||||
store: InstallChartTabStore;
|
||||
}
|
||||
|
||||
export class InstallChartModel {
|
||||
readonly namespace = {
|
||||
value: computed(() => this.chart?.namespace || "default"),
|
||||
|
||||
onChange: action(
|
||||
(option: SingleValue<{ label: string; value: string }>) => {
|
||||
if (option) {
|
||||
const namespace = option.value;
|
||||
|
||||
this.save({ namespace });
|
||||
}
|
||||
},
|
||||
),
|
||||
};
|
||||
|
||||
readonly customName = {
|
||||
value: computed(() => this.chart?.releaseName || ""),
|
||||
|
||||
onChange: action((customName: string) => {
|
||||
this.save({ releaseName: customName });
|
||||
}),
|
||||
};
|
||||
|
||||
private readonly versions = observable.array<HelmChart>([]);
|
||||
readonly installed = observable.box<HelmReleaseUpdateDetails | undefined>();
|
||||
|
||||
private save = (data: Partial<IChartInstallData>) => {
|
||||
assert(this.chart);
|
||||
|
||||
const chart = { ...this.chart, ...data };
|
||||
|
||||
this.dependencies.store.setData(this.dependencies.tabId, chart);
|
||||
};
|
||||
|
||||
readonly version = {
|
||||
value: computed(() => this.chart?.version),
|
||||
|
||||
onChange: async (version: string | undefined) => {
|
||||
assert(this.chart);
|
||||
|
||||
if (!version) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.save({ version });
|
||||
|
||||
runInAction(() => {
|
||||
this.configuration.isLoading.set(true);
|
||||
});
|
||||
|
||||
const configuration = await this.dependencies.callForHelmChartValues(
|
||||
this.chart.repo,
|
||||
this.chart.name,
|
||||
version,
|
||||
);
|
||||
|
||||
runInAction(() => {
|
||||
this.configuration.onChange(configuration);
|
||||
this.configuration.isLoading.set(false);
|
||||
});
|
||||
},
|
||||
|
||||
options: computed(() =>
|
||||
this.versions.map((chart) => ({
|
||||
label: chart.version,
|
||||
value: chart.version,
|
||||
})),
|
||||
),
|
||||
};
|
||||
|
||||
readonly configuration = {
|
||||
value: computed(() => this.chart?.values || ""),
|
||||
isLoading: observable.box(false),
|
||||
|
||||
onChange: action((configuration: string) => {
|
||||
this.errorInConfiguration.value.set(undefined);
|
||||
|
||||
this.save({ values: configuration });
|
||||
}),
|
||||
};
|
||||
|
||||
readonly errorInConfiguration = {
|
||||
value: observable.box<string | undefined>(),
|
||||
|
||||
onChange: action((error: unknown) => {
|
||||
this.errorInConfiguration.value.set(error as string);
|
||||
}),
|
||||
};
|
||||
|
||||
readonly executionOutput = {
|
||||
isShown: observable.box(false),
|
||||
|
||||
show: action(() => {
|
||||
this.executionOutput.isShown.set(true);
|
||||
}),
|
||||
|
||||
close: action(() => {
|
||||
this.executionOutput.isShown.set(false);
|
||||
}),
|
||||
};
|
||||
|
||||
constructor(private readonly dependencies: Dependencies) {}
|
||||
|
||||
@computed
|
||||
private get chart() {
|
||||
const chart = this.dependencies.store.getData(this.dependencies.tabId);
|
||||
|
||||
assert(chart);
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
load = async () => {
|
||||
await this.dependencies.waitForChart();
|
||||
|
||||
const [defaultConfiguration, versions] = await Promise.all([
|
||||
this.dependencies.callForHelmChartValues(
|
||||
this.chart.repo,
|
||||
this.chart.name,
|
||||
this.chart.version,
|
||||
),
|
||||
|
||||
this.dependencies.callForHelmChartVersions(
|
||||
this.chart.repo,
|
||||
this.chart.name,
|
||||
),
|
||||
]);
|
||||
|
||||
runInAction(() => {
|
||||
// TODO: Make "default" not hard-coded
|
||||
const namespace = this.chart.namespace || "default";
|
||||
|
||||
this.versions.replace(versions);
|
||||
|
||||
this.save({
|
||||
version: this.chart.version,
|
||||
namespace,
|
||||
values: this.chart.values || defaultConfiguration,
|
||||
releaseName: this.chart.releaseName,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@computed
|
||||
get isValid() {
|
||||
return !this.configuration.isLoading.get();
|
||||
}
|
||||
|
||||
get chartName() {
|
||||
return `${this.repository}/${this.name}`;
|
||||
}
|
||||
|
||||
private get name() {
|
||||
assert(this.chart);
|
||||
|
||||
return this.chart.name;
|
||||
}
|
||||
|
||||
private get repository() {
|
||||
assert(this.chart);
|
||||
|
||||
return this.chart.repo;
|
||||
}
|
||||
|
||||
install = async () => {
|
||||
const installed = await this.dependencies.callForCreateHelmRelease({
|
||||
name: this.customName.value.get() || undefined,
|
||||
chart: this.name,
|
||||
repo: this.repository,
|
||||
namespace: this.namespace.value.get() || "",
|
||||
version: this.version.value.get() || "",
|
||||
values: this.configuration.value.get() || "",
|
||||
});
|
||||
|
||||
runInAction(() => {
|
||||
this.installed.set(installed);
|
||||
});
|
||||
|
||||
return (
|
||||
<p>
|
||||
{"Chart Release "}
|
||||
<b>{installed.release.name}</b>
|
||||
{" successfully created."}
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
navigateToInstalledRelease = () => {
|
||||
const installed = this.installed.get();
|
||||
|
||||
assert(installed);
|
||||
|
||||
const release = installed.release;
|
||||
|
||||
this.dependencies.navigateToHelmReleases({
|
||||
name: release.name,
|
||||
namespace: release.namespace,
|
||||
});
|
||||
|
||||
this.dependencies.closeTab();
|
||||
};
|
||||
}
|
||||
|
||||
@@ -3,13 +3,10 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import { action, makeObservable } from "mobx";
|
||||
import type { TabId } from "../dock/store";
|
||||
import { makeObservable } from "mobx";
|
||||
import type { DockTabStoreDependencies } from "../dock-tab-store/dock-tab.store";
|
||||
import { DockTabStore } from "../dock-tab-store/dock-tab.store";
|
||||
import { getChartDetails, getChartValues } from "../../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import type { HelmReleaseUpdateDetails } from "../../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { waitUntilDefined } from "../../../../common/utils/wait";
|
||||
|
||||
export interface IChartInstallData {
|
||||
name: string;
|
||||
@@ -40,42 +37,4 @@ export class InstallChartTabStore extends DockTabStore<IChartInstallData> {
|
||||
get details() {
|
||||
return this.dependencies.detailsStore;
|
||||
}
|
||||
|
||||
@action
|
||||
async loadData(tabId: string) {
|
||||
const promises = [];
|
||||
const data = await waitUntilDefined(() => this.getData(tabId));
|
||||
|
||||
if (!this.getData(tabId)?.values) {
|
||||
promises.push(this.loadValues(tabId));
|
||||
}
|
||||
|
||||
if (!this.versions.getData(tabId)) {
|
||||
promises.push(this.loadVersions(tabId, data));
|
||||
}
|
||||
|
||||
await Promise.all(promises);
|
||||
}
|
||||
|
||||
@action
|
||||
private async loadVersions(tabId: TabId, { repo, name, version }: IChartInstallData) {
|
||||
this.versions.clearData(tabId); // reset
|
||||
const charts = await getChartDetails(repo, name, { version });
|
||||
const versions = charts.versions.map(chartVersion => chartVersion.version);
|
||||
|
||||
this.versions.setData(tabId, versions);
|
||||
}
|
||||
|
||||
@action
|
||||
async loadValues(tabId: TabId, attempt = 0): Promise<void> {
|
||||
const data = await waitUntilDefined(() => this.getData(tabId));
|
||||
const { repo, name, version } = data;
|
||||
const values = await getChartValues(repo, name, version);
|
||||
|
||||
if (values) {
|
||||
this.setData(tabId, { ...data, values });
|
||||
} else if (attempt < 4) {
|
||||
return this.loadValues(tabId, attempt + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,154 +5,44 @@
|
||||
|
||||
import "./install-chart.scss";
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { action, makeObservable, observable } from "mobx";
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import type { DockStore, DockTab } from "../dock/store";
|
||||
import type { DockTab } from "../dock/store";
|
||||
import { InfoPanel } from "../info-panel";
|
||||
import { Badge } from "../../badge";
|
||||
import { NamespaceSelect } from "../../+namespaces/namespace-select";
|
||||
import { prevDefault } from "../../../utils";
|
||||
import type { IChartInstallData, InstallChartTabStore } from "./store";
|
||||
import { Spinner } from "../../spinner";
|
||||
import { Icon } from "../../icon";
|
||||
import { Button } from "../../button";
|
||||
import { LogsDialog } from "../../dialog/logs-dialog";
|
||||
import type { SelectOption } from "../../select";
|
||||
import { Select } from "../../select";
|
||||
import { Input } from "../../input";
|
||||
import { EditorPanel } from "../editor-panel";
|
||||
import type { HelmReleaseCreatePayload, HelmReleaseUpdateDetails } from "../../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import installChartTabStoreInjectable from "./store.injectable";
|
||||
import dockStoreInjectable from "../dock/store.injectable";
|
||||
import createReleaseInjectable from "../../+helm-releases/create-release/create-release.injectable";
|
||||
import { Notifications } from "../../notifications";
|
||||
import type { NavigateToHelmReleases } from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
|
||||
import navigateToHelmReleasesInjectable from "../../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
|
||||
import assert from "assert";
|
||||
import type { SingleValue } from "react-select";
|
||||
import type { InstallChartModel } from "./install-chart-model.injectable";
|
||||
import installChartModelInjectable from "./install-chart-model.injectable";
|
||||
import { Spinner } from "../../spinner";
|
||||
|
||||
export interface InstallCharProps {
|
||||
tab: DockTab;
|
||||
}
|
||||
|
||||
interface Dependencies {
|
||||
createRelease: (payload: HelmReleaseCreatePayload) => Promise<HelmReleaseUpdateDetails>;
|
||||
installChartStore: InstallChartTabStore;
|
||||
dockStore: DockStore;
|
||||
navigateToHelmReleases: NavigateToHelmReleases;
|
||||
model: InstallChartModel;
|
||||
}
|
||||
|
||||
@observer
|
||||
class NonInjectedInstallChart extends Component<InstallCharProps & Dependencies> {
|
||||
@observable error = "";
|
||||
@observable showNotes = false;
|
||||
const NonInjectedInstallChart = observer(
|
||||
({ model: model, tab: { id: tabId }}: InstallCharProps & Dependencies) => {
|
||||
const installed = model.installed.get();
|
||||
|
||||
constructor(props: InstallCharProps & Dependencies) {
|
||||
super(props);
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
this.props.installChartStore.loadData(this.tabId)
|
||||
.catch(err => Notifications.error(String(err)));
|
||||
}
|
||||
|
||||
get chartData() {
|
||||
return this.props.installChartStore.getData(this.tabId);
|
||||
}
|
||||
|
||||
get tabId() {
|
||||
return this.props.tab.id;
|
||||
}
|
||||
|
||||
get versions() {
|
||||
return this.props.installChartStore.versions.getData(this.tabId);
|
||||
}
|
||||
|
||||
get releaseDetails() {
|
||||
return this.props.installChartStore.details.getData(this.tabId);
|
||||
}
|
||||
|
||||
viewRelease = ({ release }: HelmReleaseUpdateDetails) => {
|
||||
this.props.navigateToHelmReleases({
|
||||
name: release.name,
|
||||
namespace: release.namespace,
|
||||
});
|
||||
this.props.dockStore.closeTab(this.tabId);
|
||||
};
|
||||
|
||||
save(data: Partial<IChartInstallData>) {
|
||||
assert(this.chartData, "Cannot update data before data exists");
|
||||
|
||||
this.props.installChartStore.setData(this.tabId, { ...this.chartData, ...data });
|
||||
}
|
||||
|
||||
onVersionChange = (option: SingleValue<SelectOption<string>>) => {
|
||||
if (option) {
|
||||
this.save({ ...option, values: "" });
|
||||
this.props.installChartStore.loadValues(this.tabId);
|
||||
}
|
||||
};
|
||||
|
||||
onChange = action((values: string) => {
|
||||
this.error = "";
|
||||
this.save({ values });
|
||||
});
|
||||
|
||||
onError = action((error: Error | string) => {
|
||||
this.error = error.toString();
|
||||
});
|
||||
|
||||
onNamespaceChange = (option: SingleValue<SelectOption<string>>) => {
|
||||
if (option) {
|
||||
this.save({ namespace: option.value });
|
||||
}
|
||||
};
|
||||
|
||||
onReleaseNameChange = (name: string) => {
|
||||
this.save({ releaseName: name });
|
||||
};
|
||||
|
||||
install = async ({ repo, name, version, namespace, values = "", releaseName }: IChartInstallData) => {
|
||||
const details = await this.props.createRelease({
|
||||
name: releaseName || undefined,
|
||||
chart: name,
|
||||
repo,
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
namespace: namespace!,
|
||||
version,
|
||||
values,
|
||||
});
|
||||
|
||||
this.props.installChartStore.details.setData(this.tabId, details);
|
||||
|
||||
return (
|
||||
<p>
|
||||
{"Chart Release "}
|
||||
<b>{details.release.name}</b>
|
||||
{" successfully created."}
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { tabId, chartData, versions, install, releaseDetails } = this;
|
||||
|
||||
if (chartData?.values === undefined || !versions) {
|
||||
return <Spinner center />;
|
||||
}
|
||||
|
||||
if (releaseDetails) {
|
||||
if (installed) {
|
||||
return (
|
||||
<div className="InstallChartDone flex column gaps align-center justify-center">
|
||||
<p>
|
||||
<Icon
|
||||
material="check"
|
||||
big
|
||||
sticker
|
||||
/>
|
||||
sticker />
|
||||
</p>
|
||||
<p>Installation complete!</p>
|
||||
<div className="flex gaps align-center">
|
||||
@@ -160,30 +50,34 @@ class NonInjectedInstallChart extends Component<InstallCharProps & Dependencies>
|
||||
autoFocus
|
||||
primary
|
||||
label="View Helm Release"
|
||||
onClick={prevDefault(() => this.viewRelease(releaseDetails))}
|
||||
onClick={prevDefault(model.navigateToInstalledRelease)}
|
||||
data-testid={`show-release-${installed.release.name}-for-${tabId}`}
|
||||
/>
|
||||
<Button
|
||||
plain
|
||||
active
|
||||
label="Show Notes"
|
||||
onClick={() => this.showNotes = true}
|
||||
onClick={model.executionOutput.show}
|
||||
data-testid={`show-execution-output-for-${installed.release.name}-in-${tabId}`}
|
||||
/>
|
||||
</div>
|
||||
<LogsDialog
|
||||
title="Helm Chart Install"
|
||||
isOpen={this.showNotes}
|
||||
close={() => this.showNotes = false}
|
||||
logs={releaseDetails.log}
|
||||
isOpen={model.executionOutput.isShown.get()}
|
||||
close={model.executionOutput.close}
|
||||
logs={installed.log}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { repo, name, version, namespace, releaseName } = chartData;
|
||||
const versionOptions = versions.map(version => ({
|
||||
value: version,
|
||||
label: version,
|
||||
}));
|
||||
const {
|
||||
configuration,
|
||||
version,
|
||||
namespace,
|
||||
customName,
|
||||
errorInConfiguration,
|
||||
} = model;
|
||||
|
||||
return (
|
||||
<div className="InstallChart flex column">
|
||||
@@ -192,60 +86,77 @@ class NonInjectedInstallChart extends Component<InstallCharProps & Dependencies>
|
||||
controls={(
|
||||
<div className="install-controls flex gaps align-center">
|
||||
<span>Chart</span>
|
||||
<Badge label={`${repo}/${name}`} title="Repo/Name" />
|
||||
<Badge label={model.chartName} title="Repo/Name" />
|
||||
<span>Version</span>
|
||||
<Select
|
||||
className="chart-version"
|
||||
value={version}
|
||||
options={versionOptions}
|
||||
onChange={this.onVersionChange}
|
||||
value={version.value.get()}
|
||||
options={version.options.get()}
|
||||
onChange={(changed) => version.onChange(changed?.value)}
|
||||
menuPlacement="top"
|
||||
themeName="outlined"
|
||||
id={`install-chart-version-select-for-${tabId}`}
|
||||
/>
|
||||
<span>Namespace</span>
|
||||
<NamespaceSelect
|
||||
showIcons={false}
|
||||
menuPlacement="top"
|
||||
themeName="outlined"
|
||||
value={namespace}
|
||||
onChange={this.onNamespaceChange}
|
||||
value={namespace.value.get()}
|
||||
onChange={namespace.onChange}
|
||||
id={`install-chart-namespace-select-for-${tabId}`}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Name (optional)"
|
||||
title="Release name"
|
||||
maxLength={50}
|
||||
value={releaseName}
|
||||
onChange={this.onReleaseNameChange}
|
||||
value={customName.value.get()}
|
||||
onChange={customName.onChange}
|
||||
data-testid={`install-chart-custom-name-input-for-${tabId}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
error={this.error}
|
||||
submit={() => install(chartData)}
|
||||
disableSubmit={!chartData.namespace}
|
||||
error={errorInConfiguration.value.get()}
|
||||
submit={model.install}
|
||||
disableSubmit={!model.isValid} // !namespace
|
||||
submitLabel="Install"
|
||||
submittingMessage="Installing..."
|
||||
showSubmitClose={false}
|
||||
cancelTestId={`cancel-install-chart-from-tab-for-${tabId}`}
|
||||
submitTestId={`install-chart-from-tab-for-${tabId}`}
|
||||
submittingTestId={`installing-chart-from-tab-${tabId}`}
|
||||
/>
|
||||
|
||||
{configuration.isLoading.get() && (
|
||||
<Spinner center data-testid="install-chart-configuration-spinner" />
|
||||
)}
|
||||
|
||||
<EditorPanel
|
||||
tabId={tabId}
|
||||
value={chartData.values}
|
||||
onChange={this.onChange}
|
||||
onError={this.onError}
|
||||
value={configuration.value.get()}
|
||||
onChange={configuration.onChange}
|
||||
onError={errorInConfiguration.onChange}
|
||||
hidden={configuration.isLoading.get()}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export const InstallChart = withInjectables<Dependencies, InstallCharProps>(
|
||||
NonInjectedInstallChart,
|
||||
|
||||
{
|
||||
getProps: (di, props) => ({
|
||||
createRelease: di.inject(createReleaseInjectable),
|
||||
installChartStore: di.inject(installChartTabStoreInjectable),
|
||||
dockStore: di.inject(dockStoreInjectable),
|
||||
navigateToHelmReleases: di.inject(navigateToHelmReleasesInjectable),
|
||||
getPlaceholder: () => (
|
||||
<Spinner
|
||||
center
|
||||
data-testid="install-chart-tab-spinner"
|
||||
/>
|
||||
),
|
||||
|
||||
getProps: async (di, props) => ({
|
||||
model: await di.inject(installChartModelInjectable, props.tab.id),
|
||||
...props,
|
||||
}),
|
||||
},
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import type { editor } from "monaco-editor";
|
||||
import React from "react";
|
||||
import type { MonacoEditorProps, MonacoEditorRef } from "../monaco-editor";
|
||||
import { monacoValidators } from "../monaco-validators";
|
||||
|
||||
class FakeMonacoEditor extends React.Component<MonacoEditorProps> {
|
||||
render() {
|
||||
const { id, value, onChange, onError, language = "yaml" } = this.props;
|
||||
|
||||
return (
|
||||
<input
|
||||
data-testid={`monaco-editor-for-${id}`}
|
||||
|
||||
onChange={(event) => {
|
||||
const newValue = event.target.value;
|
||||
|
||||
onChange?.(
|
||||
newValue,
|
||||
{} as editor.IModelContentChangedEvent,
|
||||
);
|
||||
|
||||
const validator = monacoValidators[language];
|
||||
|
||||
try {
|
||||
validator(newValue);
|
||||
} catch(e) {
|
||||
onError?.(e);
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const MonacoEditor = React.forwardRef<
|
||||
MonacoEditorRef,
|
||||
MonacoEditorProps
|
||||
>((props, ref) => <FakeMonacoEditor innerRef={ref} {...props} />);
|
||||
@@ -12,10 +12,11 @@ import type { MonacoTheme } from "./monaco-themes";
|
||||
import { type MonacoValidator, monacoValidators } from "./monaco-validators";
|
||||
import { debounce, merge } from "lodash";
|
||||
import { autoBind, cssNames, disposer } from "../../utils";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
import type { UserStore } from "../../../common/user-store";
|
||||
import type { ThemeStore } from "../../themes/store";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import themeStoreInjectable from "../../themes/store.injectable";
|
||||
import userStoreInjectable from "../../../common/user-store/user-store.injectable";
|
||||
|
||||
export type MonacoEditorId = string;
|
||||
|
||||
@@ -39,6 +40,7 @@ export interface MonacoEditorProps {
|
||||
|
||||
interface Dependencies {
|
||||
themeStore: ThemeStore;
|
||||
userStore: UserStore;
|
||||
}
|
||||
|
||||
export function createMonacoUri(id: MonacoEditorId): Uri {
|
||||
@@ -99,7 +101,7 @@ class NonInjectedMonacoEditor extends React.Component<MonacoEditorProps & Depend
|
||||
|
||||
@computed get options(): editor.IStandaloneEditorConstructionOptions {
|
||||
return merge({},
|
||||
UserStore.getInstance().editorConfiguration,
|
||||
this.props.userStore.editorConfiguration,
|
||||
this.props.options,
|
||||
);
|
||||
}
|
||||
@@ -305,6 +307,7 @@ export const MonacoEditor = withInjectables<Dependencies, MonacoEditorProps, Mon
|
||||
getProps: (di, props) => ({
|
||||
...props,
|
||||
themeStore: di.inject(themeStoreInjectable),
|
||||
userStore: di.inject(userStoreInjectable),
|
||||
}),
|
||||
},
|
||||
);
|
||||
@@ -19,15 +19,19 @@ export interface TableRowProps<Item> extends React.DOMAttributes<HTMLDivElement>
|
||||
sortItem?: Item; // data for sorting callback in <Table sortable={}/>
|
||||
searchItem?: Item; // data for searching filters in <Table searchable={}/>
|
||||
disabled?: boolean;
|
||||
testId?: string;
|
||||
}
|
||||
|
||||
export class TableRow<Item> extends React.Component<TableRowProps<Item>> {
|
||||
render() {
|
||||
const { className, nowrap, selected, disabled, children, sortItem, searchItem, ...rowProps } = this.props;
|
||||
const { className, nowrap, selected, disabled, children, sortItem, searchItem, testId, ...rowProps } = this.props;
|
||||
const classNames = cssNames("TableRow", className, { selected, nowrap, disabled });
|
||||
|
||||
return (
|
||||
<div className={classNames} {...rowProps}>
|
||||
<div
|
||||
className={classNames}
|
||||
data-testid={testId}
|
||||
{...rowProps}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -12,7 +12,7 @@ import { Router } from "react-router";
|
||||
import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
|
||||
import allowedResourcesInjectable from "../../cluster-frame-context/allowed-resources.injectable";
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import { getByText, fireEvent } from "@testing-library/react";
|
||||
import { queryByText, fireEvent } from "@testing-library/react";
|
||||
import type { KubeResource } from "../../../common/rbac";
|
||||
import type { DiContainer } from "@ogre-tools/injectable";
|
||||
import clusterStoreInjectable from "../../../common/cluster-store/cluster-store.injectable";
|
||||
@@ -26,6 +26,7 @@ import type { MenuItemOpts } from "../../../main/menu/application-menu-items.inj
|
||||
import applicationMenuItemsInjectable from "../../../main/menu/application-menu-items.injectable";
|
||||
import type { MenuItemConstructorOptions, MenuItem } from "electron";
|
||||
import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
|
||||
import type { NavigateToHelmCharts } from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
|
||||
import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
|
||||
import hostedClusterInjectable from "../../cluster-frame-context/hosted-cluster.injectable";
|
||||
import { ClusterFrameContext } from "../../cluster-frame-context/cluster-frame-context";
|
||||
@@ -110,12 +111,13 @@ export interface ApplicationBuilder {
|
||||
};
|
||||
|
||||
helmCharts: {
|
||||
navigate: () => void;
|
||||
navigate: NavigateToHelmCharts;
|
||||
};
|
||||
|
||||
select: {
|
||||
openMenu: (id: string) => void;
|
||||
openMenu: (id: string) => ({ selectOption: (labelText: string) => void });
|
||||
selectOption: (menuId: string, labelText: string) => void;
|
||||
getValue: (menuId: string) => string;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -244,6 +246,20 @@ export const getApplicationBuilder = () => {
|
||||
const disableRendererExtension = disableExtensionsFor(rendererExtensionsState, rendererDi);
|
||||
const disableMainExtension = disableExtensionsFor(mainExtensionsState, mainDi);
|
||||
|
||||
const selectOptionFor = (menuId: string) => (labelText: string) => {
|
||||
const menuOptions = rendered.baseElement.querySelector<HTMLElement>(
|
||||
`.${menuId}-options`,
|
||||
);
|
||||
|
||||
assert(menuOptions, `Could not find select options for menu with ID "${menuId}"`);
|
||||
|
||||
const option = queryByText(menuOptions, labelText);
|
||||
|
||||
assert(option, `Could not find select option with label "${labelText}" for menu with ID "${menuId}"`);
|
||||
|
||||
userEvent.click(option);
|
||||
};
|
||||
|
||||
const builder: ApplicationBuilder = {
|
||||
dis,
|
||||
|
||||
@@ -364,10 +380,10 @@ export const getApplicationBuilder = () => {
|
||||
},
|
||||
|
||||
helmCharts: {
|
||||
navigate: () => {
|
||||
navigate: (parameters) => {
|
||||
const navigateToHelmCharts = rendererDi.inject(navigateToHelmChartsInjectable);
|
||||
|
||||
navigateToHelmCharts();
|
||||
navigateToHelmCharts(parameters);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -391,6 +407,7 @@ export const getApplicationBuilder = () => {
|
||||
const namespaceStoreStub = {
|
||||
contextNamespaces: [],
|
||||
items: [],
|
||||
selectNamespaces: () => {},
|
||||
} as unknown as NamespaceStore;
|
||||
|
||||
const clusterFrameContextFake = new ClusterFrameContext(
|
||||
@@ -500,25 +517,33 @@ export const getApplicationBuilder = () => {
|
||||
|
||||
select: {
|
||||
openMenu: (menuId) => {
|
||||
const selector = rendered.container.querySelector<HTMLElement>(
|
||||
const select = rendered.baseElement.querySelector<HTMLElement>(
|
||||
`#${menuId}`,
|
||||
);
|
||||
|
||||
assert(selector);
|
||||
assert(select, `Could not find select with ID "${menuId}"`);
|
||||
|
||||
openMenu(selector);
|
||||
openMenu(select);
|
||||
|
||||
return {
|
||||
selectOption: selectOptionFor(menuId),
|
||||
};
|
||||
},
|
||||
|
||||
selectOption: (menuId, labelText) => {
|
||||
const menuOptions = rendered.baseElement.querySelector<HTMLElement>(
|
||||
`.${menuId}-options`,
|
||||
selectOption: (menuId, labelText) => selectOptionFor(menuId)(labelText),
|
||||
|
||||
getValue: (menuId) => {
|
||||
const select = rendered.baseElement.querySelector<HTMLInputElement>(
|
||||
`#${menuId}`,
|
||||
);
|
||||
|
||||
assert(menuOptions);
|
||||
assert(select, `Could not find select with ID "${menuId}"`);
|
||||
|
||||
const option = getByText(menuOptions, labelText);
|
||||
const controlElement = select.closest(".Select__control");
|
||||
|
||||
userEvent.click(option);
|
||||
assert(controlElement, `Could not find select value for menu with ID "${menuId}"`);
|
||||
|
||||
return controlElement.textContent || "";
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -372,6 +372,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
|
||||
>
|
||||
<div
|
||||
class="Tab flex gaps align-center DockTab TerminalTab active"
|
||||
data-testid="dock-tab-for-terminal"
|
||||
id="tab-terminal"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
@@ -852,6 +853,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
|
||||
>
|
||||
<div
|
||||
class="Tab flex gaps align-center DockTab TerminalTab active"
|
||||
data-testid="dock-tab-for-terminal"
|
||||
id="tab-terminal"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
@@ -1391,6 +1393,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
|
||||
>
|
||||
<div
|
||||
class="Tab flex gaps align-center DockTab TerminalTab active"
|
||||
data-testid="dock-tab-for-terminal"
|
||||
id="tab-terminal"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
|
||||
@@ -72,6 +72,7 @@ import { asyncComputed } from "@ogre-tools/injectable-react";
|
||||
import forceUpdateModalRootFrameComponentInjectable from "./application-update/force-update-modal/force-update-modal-root-frame-component.injectable";
|
||||
import legacyOnChannelListenInjectable from "./ipc/legacy-channel-listen.injectable";
|
||||
import getEntitySettingCommandsInjectable from "./components/command-palette/registered-commands/get-entity-setting-commands.injectable";
|
||||
import storageSaveDelayInjectable from "./utils/create-storage/storage-save-delay.injectable";
|
||||
|
||||
export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {}) => {
|
||||
const {
|
||||
@@ -111,6 +112,9 @@ export const getDiForUnitTesting = (opts: { doGeneralOverrides?: boolean } = {})
|
||||
|
||||
di.override(historyInjectable, () => createMemoryHistory());
|
||||
di.override(legacyOnChannelListenInjectable, () => () => noop);
|
||||
|
||||
di.override(storageSaveDelayInjectable, () => 0);
|
||||
|
||||
di.override(requestAnimationFrameInjectable, () => (callback) => callback());
|
||||
di.override(lensResourcesDirInjectable, () => "/irrelevant");
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import { observable } from "mobx";
|
||||
import loggerInjectable from "../../../common/logger.injectable";
|
||||
import getAbsolutePathInjectable from "../../../common/path/get-absolute-path.injectable";
|
||||
import hostedClusterIdInjectable from "../../cluster-frame-context/hosted-cluster-id.injectable";
|
||||
import storageSaveDelayInjectable from "./storage-save-delay.injectable";
|
||||
|
||||
const createStorageInjectable = getInjectable({
|
||||
id: "create-storage",
|
||||
@@ -27,6 +28,7 @@ const createStorageInjectable = getInjectable({
|
||||
directoryForLensLocalStorage: di.inject(directoryForLensLocalStorageInjectable),
|
||||
getAbsolutePath: di.inject(getAbsolutePathInjectable),
|
||||
hostedClusterId: di.inject(hostedClusterIdInjectable),
|
||||
saveDelay: di.inject(storageSaveDelayInjectable),
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@ interface Dependencies {
|
||||
writeJsonFile: (filePath: string, contentObject: JsonObject) => Promise<void>;
|
||||
getAbsolutePath: GetAbsolutePath;
|
||||
hostedClusterId: string | undefined;
|
||||
saveDelay: number;
|
||||
}
|
||||
|
||||
export type CreateStorage = <T>(key: string, defaultValue: T) => StorageLayer<T>;
|
||||
@@ -36,6 +37,7 @@ export const createStorage = ({
|
||||
readJsonFile,
|
||||
writeJsonFile,
|
||||
hostedClusterId,
|
||||
saveDelay,
|
||||
}: Dependencies): CreateStorage => (key, defaultValue) => {
|
||||
const { logPrefix } = StorageHelper;
|
||||
|
||||
@@ -59,7 +61,7 @@ export const createStorage = ({
|
||||
|
||||
// bind auto-saving data changes to %storage-file.json
|
||||
reaction(() => toJS(storage.data), saveFile, {
|
||||
delay: 250, // lazy, avoid excessive writes to fs
|
||||
delay: saveDelay, // lazy, avoid excessive writes to fs
|
||||
equals: comparer.structural, // save only when something really changed
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
|
||||
const storageSaveDelayInjectable = getInjectable({
|
||||
id: "storage-save-delay",
|
||||
instantiate: () => 250,
|
||||
});
|
||||
|
||||
export default storageSaveDelayInjectable;
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import type { DiContainer } from "@ogre-tools/injectable";
|
||||
import type { CreateStorage } from "./create-storage";
|
||||
import createStorageInjectable from "./create-storage.injectable";
|
||||
|
||||
export const controlWhenStoragesAreReady = (di: DiContainer) => {
|
||||
const storagesAreReady: Promise<void>[] = [];
|
||||
|
||||
const decorated =
|
||||
(toBeDecorated: CreateStorage) =>
|
||||
(key: string, defaultValue: any) => {
|
||||
const storage = toBeDecorated(key, defaultValue);
|
||||
|
||||
storagesAreReady.push(storage.whenReady);
|
||||
|
||||
return storage;
|
||||
};
|
||||
|
||||
// TODO: Remove when typing is added to the library
|
||||
(di as any).decorateFunction(createStorageInjectable, decorated);
|
||||
|
||||
return async () => void await Promise.all(storagesAreReady);
|
||||
};
|
||||
Reference in new issue
Block a user