fleet/frontend/components/FileDetails/FileDetails.tsx

import React from "react";

import classnames from "classnames";

import { IFileDetails } from "utilities/file/fileUtils";

import Button from "components/buttons/Button";
import { ISupportedGraphicNames } from "components/FileUploader/FileUploader";
import Graphic from "components/Graphic";
import Icon from "components/Icon";
import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";

export type IFileDetailsSupportedGraphicNames =
  | ISupportedGraphicNames
  | "app-store"; // For VPP apps (non-editable)

interface IFileDetailsProps {
  graphicNames:
    | IFileDetailsSupportedGraphicNames
    | IFileDetailsSupportedGraphicNames[];
  fileDetails: IFileDetails;
  canEdit: boolean;
  /** If present, will default to a custom editor section instead of edit icon */
  customEditor?: () => React.ReactNode;
  /** If present, will show a trash icon */
  onDeleteFile?: () => void;
  onFileSelect?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  accept?: string;
  progress?: number;
  /** Set to false for one instance we allow users to edit a file as it shows them the YAML */
  gitopsCompatible?: boolean;
  gitOpsModeEnabled?: boolean;
}

const baseClass = "file-details";

const FileDetails = ({
  graphicNames,
  fileDetails,
  canEdit,
  customEditor,
  onDeleteFile,
  onFileSelect,
  accept,
  progress,
  gitopsCompatible = true,
  gitOpsModeEnabled = false,
}: IFileDetailsProps) => {
  const inputRef = React.useRef<HTMLInputElement | null>(null);

  const handleClickEdit = (disabled?: boolean) => {
    if (disabled) return;
    inputRef.current?.click();
  };

  const infoClasses = classnames(`${baseClass}__info`, {
    [`${baseClass}__info--disabled-by-gitops-mode`]:
      gitOpsModeEnabled && gitopsCompatible,
  });

  const renderEditButton = (disabled?: boolean) => {
    if (customEditor) {
      return (
        <div
          onClick={(e) => {
            e.stopPropagation();
          }}
        >
          {customEditor()}
        </div>
      );
    }

    return (
      <div className={`${baseClass}__edit`}>
        <Button
          disabled={disabled}
          className={`${baseClass}__edit-button`}
          variant="icon"
          onClick={() => handleClickEdit(disabled)}
          title="Replace file"
        >
          <Icon name="pencil" color="ui-fleet-black-75" />
        </Button>
        <input
          ref={inputRef}
          type="file"
          accept={accept}
          onChange={onFileSelect}
          className="file-input-visually-hidden"
        />
      </div>
    );
  };

  return (
    <div className={baseClass}>
      {/* disabling at this level preserves funcitonality of GitOpsModeTooltipWrapper around the edit icon */}
      <div className={infoClasses}>
        <Graphic
          name={
            typeof graphicNames === "string" ? graphicNames : graphicNames[0]
          }
        />
        <div className={`${baseClass}__content`}>
          <div className={`${baseClass}__name`}>{fileDetails.name}</div>
          {fileDetails.description && (
            <div className={`${baseClass}__description`}>
              {fileDetails.description}
            </div>
          )}
        </div>
      </div>
      {!progress &&
        canEdit &&
        onFileSelect &&
        (gitopsCompatible ? (
          <GitOpsModeTooltipWrapper
            position="left"
            tipOffset={4}
            renderChildren={(disableChildren) =>
              renderEditButton(disableChildren)
            }
          />
        ) : (
          renderEditButton()
        ))}
      {!progress && onDeleteFile && (
        <div className={`${baseClass}__delete`}>
          <Button
            className={`${baseClass}__delete-button`}
            variant="icon"
            onClick={onDeleteFile}
          >
            <label htmlFor="delete-file">
              <Icon name="trash" color="ui-fleet-black-75" />
            </label>
          </Button>
        </div>
      )}
      {!!progress && (
        <div className={`${baseClass}__progress-wrapper`}>
          <div className={`${baseClass}__progress-bar`}>
            <div
              className={`${baseClass}__progress-bar--uploaded`}
              style={{
                width: `${progress * 100}%`,
              }}
              title="upload progress bar"
            />
          </div>
          <div className={`${baseClass}__progress-text`}>
            {Math.round(progress * 100)}%
          </div>
        </div>
      )}
    </div>
  );
};

export default FileDetails;