mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fix crash in HelmChartDetails (#5667)
* Fix crash in HelmChartDetails Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix bug in helm chart icon fallback Signed-off-by: Sebastian Malton <sebastian@malton.name> * Update snapshots Signed-off-by: Sebastian Malton <sebastian@malton.name> * Factor out HelmChartIcon for better reusability Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix compile error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix remaining type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * Remove HelmChart list figure background Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing dangerouslySetInnerHTML usage Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Snapshots update Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using currentColor from cascade instead of specific one Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Sebastian Malton
GitHub
parent
14d5a1c3cc
commit
32b84d1658
@ -315,6 +315,8 @@ export class HelmChart implements HelmChartData {
|
||||
autoBind(this);
|
||||
}
|
||||
|
||||
static create(data: RawHelmChart): HelmChart;
|
||||
static create(data: RawHelmChart, opts?: HelmChartCreateOpts): HelmChart | undefined;
|
||||
static create(data: RawHelmChart, { onError = "throw" }: HelmChartCreateOpts = {}): HelmChart | undefined {
|
||||
const result = helmChartValidator.validate(data, {
|
||||
abortEarly: false,
|
||||
|
||||
@ -0,0 +1,423 @@
|
||||
// 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>
|
||||
`;
|
||||
@ -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 { GetChartDetailsOptions, IHelmChartDetails } from "../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import { getChartDetails } from "../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
|
||||
export type GetChartDetails = (repo: string, name: string, opts?: GetChartDetailsOptions) => Promise<IHelmChartDetails>;
|
||||
|
||||
const getChartDetailsInjectable = getInjectable({
|
||||
id: "get-chart-details",
|
||||
instantiate: (): GetChartDetails => getChartDetails,
|
||||
causesSideEffects: true,
|
||||
});
|
||||
|
||||
export default getChartDetailsInjectable;
|
||||
@ -14,6 +14,10 @@
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
div.intro-logo {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.Select__option {
|
||||
span.deprecated {
|
||||
text-decoration: line-through;
|
||||
|
||||
@ -0,0 +1,92 @@
|
||||
/**
|
||||
* 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,7 +7,6 @@ import "./helm-chart-details.scss";
|
||||
|
||||
import React, { Component } from "react";
|
||||
import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import { getChartDetails } from "../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import { computed, observable, reaction, runInAction } from "mobx";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { Drawer, DrawerItem } from "../drawer";
|
||||
@ -20,10 +19,13 @@ import { Badge } from "../badge";
|
||||
import { Tooltip, withStyles } from "@material-ui/core";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import createInstallChartTabInjectable from "../dock/install-chart/create-install-chart-tab.injectable";
|
||||
import { Notifications } from "../notifications";
|
||||
import HelmLogoPlaceholder from "./helm-placeholder.svg";
|
||||
import type { ShowCheckedErrorNotification } from "../notifications/show-checked-error.injectable";
|
||||
import type { SingleValue } from "react-select";
|
||||
import { AbortController } from "abort-controller";
|
||||
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";
|
||||
|
||||
export interface HelmChartDetailsProps {
|
||||
chart: HelmChart;
|
||||
@ -38,6 +40,8 @@ const LargeTooltip = withStyles({
|
||||
|
||||
interface Dependencies {
|
||||
createInstallChartTab: (helmChart: HelmChart) => void;
|
||||
showCheckedErrorNotification: ShowCheckedErrorNotification;
|
||||
getChartDetails: GetChartDetails;
|
||||
}
|
||||
|
||||
@observer
|
||||
@ -73,7 +77,7 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
});
|
||||
|
||||
try {
|
||||
const { readme, versions } = await getChartDetails(repo, name, { version });
|
||||
const { readme, versions } = await this.props.getChartDetails(repo, name, { version });
|
||||
|
||||
runInAction(() => {
|
||||
this.readme.set(readme);
|
||||
@ -81,7 +85,7 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
this.selectedChart.set(versions[0]);
|
||||
});
|
||||
} catch (error) {
|
||||
Notifications.checkedError(error, "Unknown error occured while getting chart details");
|
||||
this.props.showCheckedErrorNotification(error, "Unknown error occured while getting chart details");
|
||||
}
|
||||
}, {
|
||||
fireImmediately: true,
|
||||
@ -101,11 +105,11 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
this.abortController.abort();
|
||||
this.abortController = new AbortController();
|
||||
const { chart: { name, repo }} = this.props;
|
||||
const { readme } = await getChartDetails(repo, name, { version: chart.version, reqInit: { signal: this.abortController.signal }});
|
||||
const { readme } = await this.props.getChartDetails(repo, name, { version: chart.version, reqInit: { signal: this.abortController.signal }});
|
||||
|
||||
this.readme.set(readme);
|
||||
} catch (error) {
|
||||
Notifications.checkedError(error, "Unknown error occured while getting chart details");
|
||||
this.props.showCheckedErrorNotification(error, "Unknown error occured while getting chart details");
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,13 +121,12 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
renderIntroduction(selectedChart: HelmChart) {
|
||||
return (
|
||||
<div className="introduction flex align-flex-start">
|
||||
<img
|
||||
<HelmChartIcon
|
||||
chart={selectedChart}
|
||||
className="intro-logo"
|
||||
src={selectedChart.getIcon() || HelmLogoPlaceholder}
|
||||
onError={(event) => event.currentTarget.src = HelmLogoPlaceholder}
|
||||
/>
|
||||
<div className="intro-contents box grow">
|
||||
<div className="description flex align-center justify-space-between">
|
||||
<div className="description flex align-center justify-space-between" data-testid="selected-chart-description">
|
||||
{selectedChart.getDescription()}
|
||||
<Button
|
||||
primary
|
||||
@ -194,7 +197,7 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="chart-description">
|
||||
<div className="chart-description" data-testid="helmchart-readme">
|
||||
<MarkdownViewer markdown={readme} />
|
||||
</div>
|
||||
);
|
||||
@ -232,13 +235,11 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
|
||||
}
|
||||
}
|
||||
|
||||
export const HelmChartDetails = withInjectables<Dependencies, HelmChartDetailsProps>(
|
||||
NonInjectedHelmChartDetails,
|
||||
|
||||
{
|
||||
export const HelmChartDetails = withInjectables<Dependencies, HelmChartDetailsProps>(NonInjectedHelmChartDetails, {
|
||||
getProps: (di, props) => ({
|
||||
createInstallChartTab: di.inject(createInstallChartTabInjectable),
|
||||
...props,
|
||||
createInstallChartTab: di.inject(createInstallChartTabInjectable),
|
||||
showCheckedErrorNotification: di.inject(showCheckedErrorNotificationInjectable),
|
||||
getChartDetails: di.inject(getChartDetailsInjectable),
|
||||
}),
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
@ -31,19 +31,18 @@
|
||||
figure {
|
||||
width: $iconSize;
|
||||
height: $iconSize;
|
||||
border-radius: 50%;
|
||||
background: var(--helmImgBackground) url(helm-placeholder.svg) center center no-repeat;
|
||||
background-size: 72%; // bg size looks same as image on top of it
|
||||
margin: auto;
|
||||
|
||||
svg {
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
visibility: hidden;
|
||||
border-radius: inherit;
|
||||
background-color: var(--helmImgBackground);
|
||||
padding: $padding * 0.5;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
|
||||
@ -17,6 +17,7 @@ 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";
|
||||
|
||||
enum columnId {
|
||||
name = "name",
|
||||
@ -114,10 +115,7 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
|
||||
]}
|
||||
renderTableContents={chart => [
|
||||
<figure key="image">
|
||||
<img
|
||||
src={chart.getIcon() || require("./helm-placeholder.svg")}
|
||||
onLoad={evt => evt.currentTarget.classList.add("visible")}
|
||||
/>
|
||||
<HelmChartIcon chart={chart} />
|
||||
</figure>,
|
||||
chart.getName(),
|
||||
chart.getDescription(),
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg enable-background="new 0 0 722.8 702" viewBox="0 0 722.8 702" xmlns="http://www.w3.org/2000/svg"><g fill="#929ba6"><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>
|
||||
|
Before Width: | Height: | Size: 3.7 KiB |
49
src/renderer/components/+helm-charts/icon.tsx
Normal file
49
src/renderer/components/+helm-charts/icon.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import React, { useState } from "react";
|
||||
import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
|
||||
export interface HelmChartIconProps {
|
||||
className?: string;
|
||||
chart: HelmChart;
|
||||
}
|
||||
|
||||
export const HelmChartIcon = ({
|
||||
chart,
|
||||
className,
|
||||
}: HelmChartIconProps) => {
|
||||
const [failedToLoad, setFailedToLoad] = useState(false);
|
||||
const icon = chart.getIcon();
|
||||
|
||||
if (!icon || failedToLoad) {
|
||||
return (
|
||||
<div className={className}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
className={className}
|
||||
src={icon}
|
||||
onLoad={evt => evt.currentTarget.classList.add("visible")}
|
||||
onError={() => setFailedToLoad(true)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -9,9 +9,7 @@ import type {
|
||||
DockTab,
|
||||
DockTabCreate,
|
||||
DockTabCreateSpecific } from "../dock/store";
|
||||
import {
|
||||
TabKind,
|
||||
} from "../dock/store";
|
||||
import { TabKind } from "../dock/store";
|
||||
import type { InstallChartTabStore } from "./store";
|
||||
import createDockTabInjectable from "../dock/create-dock-tab.injectable";
|
||||
|
||||
@ -20,6 +18,8 @@ interface Dependencies {
|
||||
installChartStore: InstallChartTabStore;
|
||||
}
|
||||
|
||||
export type CreateInstallChartTab = (chart: HelmChart, tabParams?: DockTabCreateSpecific) => DockTab;
|
||||
|
||||
const createInstallChartTab = ({ createDockTab, installChartStore }: Dependencies) => (chart: HelmChart, tabParams: DockTabCreateSpecific = {}) => {
|
||||
const { name, repo, version } = chart;
|
||||
|
||||
|
||||
@ -19,6 +19,12 @@ export enum NotificationStatus {
|
||||
INFO = "info",
|
||||
}
|
||||
|
||||
export interface CreateNotificationOptions {
|
||||
id?: NotificationId;
|
||||
timeout?: number;
|
||||
onClose?(): void;
|
||||
}
|
||||
|
||||
export interface Notification {
|
||||
id?: NotificationId;
|
||||
message: NotificationMessage;
|
||||
|
||||
@ -9,14 +9,22 @@ import React from "react";
|
||||
import { reaction } from "mobx";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
|
||||
import type { Disposer } from "../../utils";
|
||||
import { cssNames, prevDefault } from "../../utils";
|
||||
import type { Notification, NotificationMessage, NotificationsStore } from "./notifications.store";
|
||||
import { NotificationStatus } from "./notifications.store";
|
||||
import type { CreateNotificationOptions, Notification, NotificationMessage, NotificationsStore } from "./notifications.store";
|
||||
import { Animate } from "../animate";
|
||||
import { Icon } from "../icon";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
|
||||
import notificationsStoreInjectable from "./notifications-store.injectable";
|
||||
import { asLegacyGlobalFunctionForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-function-for-extension-api";
|
||||
import showSuccessNotificationInjectable from "./show-success-notification.injectable";
|
||||
import type { ShowCheckedErrorNotification } from "./show-checked-error.injectable";
|
||||
import showCheckedErrorNotificationInjectable from "./show-checked-error.injectable";
|
||||
import showErrorNotificationInjectable from "./show-error-notification.injectable";
|
||||
import showInfoNotificationInjectable from "./show-info-notification.injectable";
|
||||
import showShortInfoNotificationInjectable from "./show-short-info.injectable";
|
||||
|
||||
export type ShowNotification = (message: NotificationMessage, opts?: CreateNotificationOptions) => Disposer;
|
||||
|
||||
interface Dependencies {
|
||||
store: NotificationsStore;
|
||||
@ -103,58 +111,16 @@ export const Notifications = withInjectables<Dependencies>(
|
||||
}),
|
||||
},
|
||||
) as React.FC & {
|
||||
ok: (message: NotificationMessage) => () => void;
|
||||
checkedError: (message: unknown, fallback: string, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
|
||||
error: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
|
||||
shortInfo: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
|
||||
info: (message: NotificationMessage, customOpts?: Partial<Omit<Notification, "message">>) => () => void;
|
||||
ok: ShowNotification;
|
||||
checkedError: ShowCheckedErrorNotification;
|
||||
error: ShowNotification;
|
||||
shortInfo: ShowNotification;
|
||||
info: ShowNotification;
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
const _notificationStore = asLegacyGlobalForExtensionApi(notificationsStoreInjectable);
|
||||
|
||||
Notifications.ok = (message: NotificationMessage) => {
|
||||
return _notificationStore.add({
|
||||
message,
|
||||
timeout: 2_500,
|
||||
status: NotificationStatus.OK,
|
||||
});
|
||||
};
|
||||
|
||||
Notifications.checkedError = (message, fallback, customOpts = {}) => {
|
||||
if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
|
||||
return Notifications.error(message, customOpts);
|
||||
}
|
||||
|
||||
console.warn("Unknown notification error message, falling back to default", message);
|
||||
|
||||
return Notifications.error(fallback, customOpts);
|
||||
};
|
||||
|
||||
Notifications.error = (message, customOpts= {}) => {
|
||||
return _notificationStore.add({
|
||||
message,
|
||||
timeout: 10_000,
|
||||
status: NotificationStatus.ERROR,
|
||||
...customOpts,
|
||||
});
|
||||
};
|
||||
|
||||
Notifications.shortInfo = (message, customOpts = {}) => {
|
||||
return Notifications.info(message, {
|
||||
timeout: 5_000,
|
||||
...customOpts,
|
||||
});
|
||||
};
|
||||
|
||||
Notifications.info = (message, customOpts = {}) => {
|
||||
return _notificationStore.add({
|
||||
status: NotificationStatus.INFO,
|
||||
timeout: 0,
|
||||
message,
|
||||
...customOpts,
|
||||
});
|
||||
};
|
||||
Notifications.ok = asLegacyGlobalFunctionForExtensionApi(showSuccessNotificationInjectable);
|
||||
Notifications.error = asLegacyGlobalFunctionForExtensionApi(showErrorNotificationInjectable);
|
||||
Notifications.checkedError = asLegacyGlobalFunctionForExtensionApi(showCheckedErrorNotificationInjectable);
|
||||
Notifications.info = asLegacyGlobalFunctionForExtensionApi(showInfoNotificationInjectable);
|
||||
Notifications.shortInfo = asLegacyGlobalFunctionForExtensionApi(showShortInfoNotificationInjectable);
|
||||
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* 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 { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
|
||||
import loggerInjectable from "../../../common/logger.injectable";
|
||||
import type { Disposer } from "../../utils";
|
||||
import type { CreateNotificationOptions } from "./notifications.store";
|
||||
import showErrorNotificationInjectable from "./show-error-notification.injectable";
|
||||
|
||||
export type ShowCheckedErrorNotification = (message: unknown, fallback: string, opts?: CreateNotificationOptions) => Disposer;
|
||||
|
||||
const showCheckedErrorNotificationInjectable = getInjectable({
|
||||
id: "show-checked-error-notififcation",
|
||||
instantiate: (di): ShowCheckedErrorNotification => {
|
||||
const showErrorNotification = di.inject(showErrorNotificationInjectable);
|
||||
const logger = di.inject(loggerInjectable);
|
||||
|
||||
return (message, fallback, opts) => {
|
||||
if (typeof message === "string" || message instanceof Error || message instanceof JsonApiErrorParsed) {
|
||||
return showErrorNotification(message, opts);
|
||||
}
|
||||
|
||||
logger.warn("[NOTIFICATIONS]: Unknown notification error message, falling back to default", message);
|
||||
|
||||
return showErrorNotification(fallback, opts);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default showCheckedErrorNotificationInjectable;
|
||||
@ -3,17 +3,17 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import type { NotificationMessage, Notification } from "./notifications.store";
|
||||
import type { ShowNotification } from "./notifications";
|
||||
import { NotificationStatus } from "./notifications.store";
|
||||
import notificationsStoreInjectable from "./notifications-store.injectable";
|
||||
|
||||
const showErrorNotificationInjectable = getInjectable({
|
||||
id: "show-error-notification",
|
||||
|
||||
instantiate: (di) => {
|
||||
instantiate: (di): ShowNotification => {
|
||||
const notificationsStore = di.inject(notificationsStoreInjectable);
|
||||
|
||||
return (message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) =>
|
||||
return (message, customOpts = {}) =>
|
||||
notificationsStore.add({
|
||||
status: NotificationStatus.ERROR,
|
||||
timeout: 5000,
|
||||
|
||||
@ -3,17 +3,17 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import type { NotificationMessage, Notification } from "./notifications.store";
|
||||
import type { ShowNotification } from "./notifications";
|
||||
import { NotificationStatus } from "./notifications.store";
|
||||
import notificationsStoreInjectable from "./notifications-store.injectable";
|
||||
|
||||
const showInfoNotificationInjectable = getInjectable({
|
||||
id: "show-info-notification",
|
||||
|
||||
instantiate: (di) => {
|
||||
instantiate: (di): ShowNotification => {
|
||||
const notificationsStore = di.inject(notificationsStoreInjectable);
|
||||
|
||||
return (message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) =>
|
||||
return (message, customOpts = {}) =>
|
||||
notificationsStore.add({
|
||||
status: NotificationStatus.INFO,
|
||||
timeout: 5000,
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
/**
|
||||
* 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 { ShowNotification } from "./notifications";
|
||||
import showInfoNotificationInjectable from "./show-info-notification.injectable";
|
||||
|
||||
const showShortInfoNotificationInjectable = getInjectable({
|
||||
id: "show-short-info-notification",
|
||||
instantiate: (di): ShowNotification => {
|
||||
const showInfoNotification = di.inject(showInfoNotificationInjectable);
|
||||
|
||||
return (message, customOpts = {}) => {
|
||||
return showInfoNotification(message, {
|
||||
timeout: 5_000,
|
||||
...customOpts,
|
||||
});
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default showShortInfoNotificationInjectable;
|
||||
@ -3,17 +3,17 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
import { getInjectable } from "@ogre-tools/injectable";
|
||||
import type { NotificationMessage, Notification } from "./notifications.store";
|
||||
import type { ShowNotification } from "./notifications";
|
||||
import { NotificationStatus } from "./notifications.store";
|
||||
import notificationsStoreInjectable from "./notifications-store.injectable";
|
||||
|
||||
const showSuccessNotificationInjectable = getInjectable({
|
||||
id: "show-success-notification",
|
||||
|
||||
instantiate: (di) => {
|
||||
instantiate: (di): ShowNotification => {
|
||||
const notificationsStore = di.inject(notificationsStoreInjectable);
|
||||
|
||||
return (message: NotificationMessage, customOpts: Partial<Omit<Notification, "message">> = {}) =>
|
||||
return (message, customOpts = {}) =>
|
||||
notificationsStore.add({
|
||||
status: NotificationStatus.OK,
|
||||
timeout: 5000,
|
||||
|
||||
@ -50,7 +50,6 @@ const lensDarkTheme: Theme = {
|
||||
"tableHeaderColor": "#ffffff",
|
||||
"tableSelectedRowColor": "#ffffff",
|
||||
"helmLogoBackground": "#ffffff",
|
||||
"helmImgBackground": "#414448",
|
||||
"helmStableRepo": "#3d90ce",
|
||||
"helmIncubatorRepo": "#ff7043",
|
||||
"helmDescriptionHr": "#41474a",
|
||||
|
||||
@ -49,7 +49,6 @@ const lensLightTheme: Theme = {
|
||||
"tableHeaderColor": "#555555",
|
||||
"tableSelectedRowColor": "#222222",
|
||||
"helmLogoBackground": "#ffffff",
|
||||
"helmImgBackground": "#e8e8e8",
|
||||
"helmStableRepo": "#3d90ce",
|
||||
"helmIncubatorRepo": "#ff7043",
|
||||
"helmDescriptionHr": "#dddddd",
|
||||
|
||||
@ -43,7 +43,6 @@
|
||||
--tableHeaderColor: #ffffff;
|
||||
--tableSelectedRowColor: #ffffff;
|
||||
--helmLogoBackground: #ffffff;
|
||||
--helmImgBackground: #414448;
|
||||
--helmStableRepo: #3d90ce;
|
||||
--helmIncubatorRepo: #ff7043;
|
||||
--helmDescriptionHr: #41474a;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user