Function ConditionallyEnable

app/src/components/ConditionallyEnable.tsx:18–56

(
  props: {
    accessRequired?: AccessCheck;
    accessDeniedText?: string;
    checks?: [boolean, string][];
    hideTooltip?: boolean;
  } & TooltipProps,
)

};

const ConditionallyEnable = (
  props: {
    accessRequired?: AccessCheck;
    accessDeniedText?: string;
    checks?: [boolean, string][];
    hideTooltip?: boolean;
  } & TooltipProps,
) => {
  const {
    accessRequired = "requireNothing",
    accessDeniedText,
    checks = [],
    hideTooltip,
    children,
    ...rest
  } = props;

  const accessCheck = useAccessCheck(accessRequired);
  const selectedProjectNotHidden = useSelectedProject().data?.isHidden !== true;
  const failingCheck = [
    [selectedProjectNotHidden, "This project is archived. No further changes can be made."],
    ...checks,
  ]?.find(([check]) => !check);

  const disableChildren = !accessCheck.access || !!failingCheck;
  const tooltipText = !accessCheck.access
    ? accessDeniedText ?? accessCheck.message
    : failingCheck?.[1] ?? "";

  return (
    <Tooltip label={tooltipText} isDisabled={!disableChildren || hideTooltip} hasArrow {...rest}>
      <ButtonGroup isDisabled={disableChildren} w={rest.w}>
        <FormControl isDisabled={disableChildren} w={rest.w}>
          {children}
        </FormControl>
      </ButtonGroup>
    </Tooltip>
  );
};

export default ConditionallyEnable;