lens/src/renderer/components/dock/upgrade-chart.tsx

/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

import React from "react";
import { computed, makeObservable, observable } from "mobx";
import { observer } from "mobx-react";
import { InfoPanel, InfoPanelProps } from "./info-panel";
import { upgradeChartStore } from "./upgrade-chart.store";
import { releaseStore } from "../+apps-releases/release.store";
import { Badge } from "../badge";
import { Select, SelectOption } from "../select";
import type { IChartVersion } from "../+apps-helm-charts/helm-chart.store";
import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
import { TabKind } from "./dock.store";
import { dockViewsManager } from "./dock.views-manager";

interface Props extends InfoPanelProps {
}

@observer
export class UpgradeChart extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    makeObservable(this);
  }

  get tabId() {
    return this.props.tabId;
  }

  get release(): HelmRelease | null {
    return upgradeChartStore.getRelease(this.tabId);
  }

  @observable selectedVersion: IChartVersion | undefined;

  @computed get releaseVersion(): IChartVersion {
    return this.getChartVersionByRelease(this.release);
  }

  @computed get chartVersionOptions(): SelectOption<IChartVersion>[] {
    return upgradeChartStore.versions.map(version => ({
      value: version,
      disabled: this.selectedVersion == this.releaseVersion,
    }));
  }

  @computed get chartValues(): string {
    return upgradeChartStore.values.get(this.tabId);
  }

  getChartVersionByRelease(release: HelmRelease): IChartVersion | undefined {
    return upgradeChartStore.versions.find(({ version, repo }) => (
      release?.getChart() == repo &&
      release?.getVersion() === version
    ));
  }

  upgrade = async () => {
    const { releaseVersion, selectedVersion, release, chartValues } = this;
    const newVersionNotSelected = !selectedVersion || selectedVersion == releaseVersion;

    if (!release || newVersionNotSelected) {
      throw new Error(`You have not selected new version for "${releaseVersion}"`); // skip: nothing to upgrade
    }

    const { version, repo } = selectedVersion;
    const releaseName = release.getName();
    const releaseNs = release.getNs();

    await releaseStore.update(releaseName, releaseNs, {
      chart: release.getChart(),
      values: chartValues,
      repo, version,
    });

    return (
      <p>
        Release <b>{releaseName}</b> successfully upgraded to version <b>{version}</b>
      </p>
    );
  };

  formatVersionLabel = ({ value }: SelectOption<IChartVersion>) => {
    const chartName = this.release.getChart();
    const { repo, version } = value;

    return `${repo}/${chartName}-${version}`;
  };

  render() {
    const { release, chartVersionOptions } = this;

    return (
      <InfoPanel
        {...this.props}
        submit={this.upgrade}
        submitLabel="Upgrade"
        submittingMessage="Updating.."
        controls={
          <div className="upgrade flex gaps align-center">
            <span>Release</span> <Badge label={release?.getName()}/>
            <span>Namespace</span> <Badge label={release?.getNs()}/>
            <span>Version</span> <Badge label={release?.getVersion()}/>
            <span>Upgrade version</span>
            <Select
              className="chart-version"
              menuPlacement="top"
              themeName="outlined"
              value={this.selectedVersion ?? this.releaseVersion}
              options={chartVersionOptions}
              formatOptionLabel={this.formatVersionLabel}
              onChange={({ value }: SelectOption<IChartVersion>) => this.selectedVersion = value}
            />
          </div>
        }
      />
    );
  }
}

dockViewsManager.register(TabKind.UPGRADE_CHART, {
  InfoPanel: UpgradeChart,
  editor: {
    getValue(tabId): string {
      return upgradeChartStore.values.get(tabId);
    },
    setValue(tabId, value) {
      upgradeChartStore.values.set(tabId, value);
    },
  }
});