helm-dashboard/frontend/src/components/modal/InstallChartModal/ManifestDiff.tsx

import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui-base";
import hljs from "highlight.js/lib/core";
import yaml from "highlight.js/lib/languages/yaml";
import { useEffect, useRef } from "react";

import { diffConfiguration } from "../../../utils";
import Spinner from "../../Spinner";

hljs.registerLanguage("yaml", yaml);

interface ManifestDiffProps {
  diff?: string;
  isLoading: boolean;
  error: string;
}

const ManifestDiff = ({ diff, isLoading, error }: ManifestDiffProps) => {
  const diffContainerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (isLoading) {
      // we're listening to isLoading to draw new diffs which are not
      // always rerender, probably because of the use of ref
      return;
    }

    if (diff && diffContainerRef.current) {
      const diff2htmlUi = new Diff2HtmlUI(
        diffContainerRef.current,
        diff,
        diffConfiguration,
        hljs
      );
      diff2htmlUi.draw();
      diff2htmlUi.highlightCode();
    }
  }, [diff, isLoading]);

  if (isLoading && !error) {
    return (
      <div className="flex items-end text-lg">
        <Spinner />
        Calculating diff...
      </div>
    );
  }

  return (
    <div>
      <h4 className="text-xl">Manifest changes:</h4>

      {error ? (
        <p className="text-lg text-red-600">
          Failed to get upgrade info: {error.toString()}
        </p>
      ) : diff ? (
        <div
          ref={diffContainerRef}
          className="relative overflow-y-auto leading-5"
        ></div>
      ) : (
        <pre className="font-roboto text-base">
          No changes will happen to the cluster
        </pre>
      )}
    </div>
  );
};

export default ManifestDiff;