react-icons/md#MdInfoOutline TypeScript Examples

CapabilityLevelInfoModal = () => {
  const [onLoadedImage, setOnLoadedImage] = useState<boolean>(false);

  return (
    <Modal
      className="d-none d-lg-inline-block ms-2"
      buttonContent={<MdInfoOutline />}
      buttonType={`btn-link btn-sm px-0 pb-0 text-dark ${styles.btn}`}
      header={<div className={`h3 m-2 flex-grow-1 ${styles.title}`}>Capability level</div>}
    >
      <div className="my-3 mw-100">
        <div className={styles.imageWrapper}>
          {!onLoadedImage && <Loading />}
          <img
            src="/static/media/capability-level-diagram_v3.svg"
            alt="Capability Level Diagram"
            className="capability-level-diagram mw-100"
            onLoad={() => setOnLoadedImage(true)}
          />
        </div>
      </div>
    </Modal>
  );
}

RepositoryInfo = (props: Props) => {
  const history = useHistory();
  const ref = useRef(null);
  const [openStatus, setOpenStatus] = useState(false);
  const [onLinkHover, setOnLinkHover] = useState(false);
  const [onDropdownHover, setOnDropdownHover] = useState(false);
  useOutsideClick([ref], openStatus, () => setOpenStatus(false));

  useEffect(() => {
    let timeout: NodeJS.Timeout;
    if (!openStatus && (onLinkHover || onDropdownHover)) {
      timeout = setTimeout(() => {
        setOpenStatus(true);
      }, 100);
    }
    if (openStatus && !onLinkHover && !onDropdownHover) {
      timeout = setTimeout(() => {
        // Delay to hide the dropdown to let some time for changing between dropdown and link (for copying text)
        setOpenStatus(false);
      }, 50);
    }
    return () => {
      if (!isUndefined(timeout)) {
        clearTimeout(timeout);
      }
    };
  }, [onLinkHover, onDropdownHover, openStatus]);

  return (
    <>
      <div className={props.className}>
        <div className="position-absolute">
          <div
            ref={ref}
            role="complementary"
            className={classnames('dropdown-menu dropdown-menu-left text-wrap', styles.dropdown, {
              show: openStatus,
            })}
            onMouseEnter={() => setOnDropdownHover(true)}
            onMouseLeave={() => setOnDropdownHover(false)}
          >
            <div className={styles.content}>
              <div className="d-flex flex-column">
                <div className="d-flex flex-row align-items-center">
                  <small className="text-muted text-uppercase me-1">Repo: </small>
                  <RepositoryIcon kind={props.repository.kind} className={`me-1 w-auto ${styles.repoIconMini}`} />
                  <div className={`text-reset text-truncate ${styles.labelContent}`}>
                    {props.repository.displayName || props.repository.name}
                  </div>
                </div>

                {!isUndefined(props.repository.url) && (
                  <div className="mt-2 d-flex flex-row align-items-baseline">
                    <small className="text-muted text-uppercase me-1">Url: </small>
                    <div data-testid="repoUrl" className={`text-reset text-break ${styles.labelContent}`}>
                      <AttachedIconToText
                        text={props.repository.url}
                        isVisible={openStatus}
                        icon={
                          <ButtonCopyToClipboard
                            text={props.repository.url}
                            className="bg-transparent"
                            wrapperClassName="d-inline"
                            arrowClassName={styles.arrow}
                            tooltipClassName="p-0"
                            label="Copy repository url to clipboard"
                          />
                        }
                      />
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        <div className="d-flex flex-row text-truncate">
          <div className="d-flex flex-row align-items-baseline me-1 text-muted text-uppercase">
            <small>Repo:</small>
            {props.visibleIcon && (
              <RepositoryIconLabel
                kind={props.repository.kind}
                deprecated={props.deprecated}
                className="ms-1"
                clickable
              />
            )}
          </div>
          <span className="visually-hidden">{props.repository.name}</span>

          <button
            data-testid="repoLink"
            className={classnames(
              'd-flex flex-row p-0 border-0 text-dark text-truncate bg-transparent position-relative',
              styles.link,
              {
                [styles.moreMarginTop]: props.visibleIcon,
              }
            )}
            onClick={(e) => {
              e.preventDefault();
              history.push({
                pathname: '/packages/search',
                search: prepareQueryString({
                  pageNumber: 1,
                  filters: {
                    repo: [props.repository.name],
                  },
                  deprecated: props.deprecated,
                }),
              });
            }}
            onMouseEnter={(e) => {
              e.preventDefault();
              setOnLinkHover(true);
            }}
            onMouseLeave={() => {
              setOnLinkHover(false);
            }}
            aria-label={`Filter by repo ${props.repository.displayName || props.repository.name}`}
            aria-expanded={openStatus}
            aria-hidden="true"
            tabIndex={-1}
          >
            <>
              <div className="text-truncate">{props.repository.displayName || props.repository.name}</div>

              {props.repository.url && props.visibleInfoIcon && (
                <MdInfoOutline className={`d-none d-sm-inline-block ms-1 position-relative ${styles.infoIcon}`} />
              )}
            </>
          </button>
        </div>
      </div>
      {props.withLabels && (
        <VerifiedPublisherBadge
          verifiedPublisher={props.repository.verifiedPublisher}
          className={`ms-3 position-relative ${styles.repoLabel} ${props.repoLabelClassName}`}
        />
      )}
    </>
  );
}

Filters = (props: Props) => {
  const getFacetsByFilterKey = (filterKey: string): Facets | undefined => {
    return find(props.facets, (facets: Facets) => filterKey === facets.filterKey);
  };

  const getPublishers = (): JSX.Element | null => {
    let crElement = null;
    const publisherList = getFacetsByFilterKey('publisher');
    if (!isUndefined(publisherList) && publisherList.options.length > 0) {
      const isChecked = (facetOptionId: string, filterKey: string) => {
        return (props.activeFilters[filterKey] || []).includes(facetOptionId.toString());
      };

      const options = publisherList.options.map((facet: FacetOption) => ({
        ...facet,
        filterKey: facet.filterKey!,
      }));

      const publisherOptions = options.map((option: Option) => (
        <CheckBox
          key={`${option.filterKey}_${option.id.toString()}`}
          name={option.filterKey}
          device={props.device}
          value={option.id.toString()}
          labelClassName="mw-100"
          className={styles.checkbox}
          legend={option.total}
          label={option.name}
          checked={isChecked(option.id.toString(), option.filterKey)}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            props.onChange(e.target.name, e.target.value, e.target.checked)
          }
        />
      ));

      crElement = (
        <div role="menuitem" className={`mt-2 mt-sm-3 pt-1 ${styles.facet}`}>
          <SmallTitle text="Publisher" className="text-dark fw-bold" />
          <div className="mt-3" role="group">
            <ExpandableList visibleItems={5} items={publisherOptions} forceCollapseList={props.forceCollapseList} />
          </div>
        </div>
      );
    }

    return crElement;
  };

  const getKindFacets = (): JSX.Element | null => {
    let kindElement = null;
    const kind = getFacetsByFilterKey('kind');
    if (!isUndefined(kind) && kind.options.length > 0 && kind.filterKey) {
      const active = props.activeFilters.hasOwnProperty(kind.filterKey) ? props.activeFilters[kind.filterKey] : [];
      const isChecked = (facetOptionId: string) => {
        return active.includes(facetOptionId.toString());
      };

      kindElement = (
        <div role="menuitem" className={`mt-1 mt-sm-2 pt-1 ${styles.facet}`}>
          <SmallTitle text={kind.title} className="text-dark fw-bold" id={`repo-${kind.filterKey}-${props.device}`} />
          <div className="mt-3" role="group" aria-labelledby={`repo-${kind.filterKey}-${props.device}`}>
            {kind.options.map((option: FacetOption) => (
              <CheckBox
                key={`kind_${option.id.toString()}`}
                name={kind.filterKey!}
                device={props.device}
                value={option.id.toString()}
                labelClassName="mw-100"
                className={styles.checkbox}
                legend={option.total}
                label={option.name}
                checked={isChecked(option.id.toString())}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  props.onChange(e.target.name, e.target.value, e.target.checked)
                }
              />
            ))}
          </div>
        </div>
      );
    }

    return kindElement;
  };

  const getCapabilitiesFacets = (): JSX.Element | null => {
    let element = null;
    const capabilities = getFacetsByFilterKey('capabilities');
    if (!isUndefined(capabilities) && capabilities.options.length > 0 && capabilities.filterKey) {
      const active = props.activeFilters.hasOwnProperty(capabilities.filterKey)
        ? props.activeFilters[capabilities.filterKey]
        : [];
      const isChecked = (facetOptionId: string) => {
        return active.includes(facetOptionId.toString());
      };

      const sortedCapabilities = sortBy(capabilities.options, [
        (facet: FacetOption) => {
          return OPERATOR_CAPABILITIES.findIndex((level: string) => level === facet.id);
        },
      ]);

      element = (
        <div role="menuitem" className={`mt-2 mt-sm-3 pt-1 ${styles.facet}`}>
          <SmallTitle
            text={capabilities.title}
            className="text-dark fw-bold"
            id={`pkg-${capabilities.filterKey}-${props.device}`}
          />
          <div className="mt-3" role="group" aria-labelledby={`pkg-${capabilities.filterKey}-${props.device}`}>
            {sortedCapabilities.map((option: FacetOption) => (
              <CheckBox
                key={`capabilities_${option.id.toString()}`}
                name={capabilities.filterKey!}
                device={props.device}
                value={option.id.toString()}
                labelClassName="mw-100"
                className={`text-capitalize ${styles.checkbox}`}
                legend={option.total}
                label={option.name}
                checked={isChecked(option.id.toString())}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  props.onChange(e.target.name, e.target.value, e.target.checked)
                }
              />
            ))}
          </div>
        </div>
      );
    }

    return element;
  };

  const getRepositoryFacets = (): JSX.Element | null => {
    let crElement = null;
    const repo = getFacetsByFilterKey('repo');
    if (!isUndefined(repo) && repo.options.length > 0 && repo.filterKey) {
      const options = repo.options.map((facet: FacetOption) => ({
        ...facet,
        filterKey: repo.filterKey,
      }));

      const isChecked = (facetOptionId: string) => {
        return (props.activeFilters.repo || []).includes(facetOptionId.toString());
      };

      const repoOptions = options.map((option: FacetOption) => (
        <CheckBox
          key={`repo_${option.id.toString()}`}
          name={repo.filterKey!}
          device={props.device}
          value={option.id.toString()}
          labelClassName="mw-100"
          className={styles.checkbox}
          legend={option.total}
          label={option.name}
          checked={isChecked(option.id.toString())}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            props.onChange(e.target.name, e.target.value, e.target.checked)
          }
        />
      ));

      crElement = (
        <div role="menuitem" className={`mt-2 mt-sm-3 pt-1 ${styles.facet}`}>
          <SmallTitle text={repo.title} className="text-dark fw-bold" id={`pkg-${repo.filterKey}-${props.device}`} />
          <div className="mt-3" role="group" aria-labelledby={`pkg-${repo.filterKey}-${props.device}`}>
            <ExpandableList visibleItems={5} items={repoOptions} forceCollapseList={props.forceCollapseList} />
          </div>
        </div>
      );
    }

    return crElement;
  };

  const getLicenseFacets = (): JSX.Element | null => {
    let crElement = null;
    const license = getFacetsByFilterKey('license');
    if (!isUndefined(license) && license.options.length > 0 && license.filterKey) {
      const options = license.options.map((facet: FacetOption) => ({
        ...facet,
        filterKey: license.filterKey,
      }));

      const isChecked = (facetOptionId: string) => {
        return (props.activeFilters.license || []).includes(facetOptionId.toString());
      };

      const licenseOptions = options.map((option: FacetOption) => (
        <CheckBox
          key={`license_${option.id.toString()}`}
          name={license.filterKey!}
          device={props.device}
          value={option.id.toString()}
          labelClassName="mw-100"
          className={`text-capitalize ${styles.checkbox}`}
          legend={option.total}
          label={option.name}
          checked={isChecked(option.id.toString())}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            props.onChange(e.target.name, e.target.value, e.target.checked)
          }
        />
      ));

      crElement = (
        <div role="menuitem" className={`mt-2 mt-sm-3 pt-1 ${styles.facet}`}>
          <SmallTitle
            text={license.title}
            className="text-dark fw-bold"
            id={`pkg-${license.filterKey}-${props.device}`}
          />
          <div className="mt-3" role="group" aria-labelledby={`pkg-${license.filterKey}-${props.device}`}>
            <ExpandableList visibleItems={5} items={licenseOptions} forceCollapseList={props.forceCollapseList} />
          </div>
        </div>
      );
    }

    return crElement;
  };

  return (
    <div className={classnames(styles.filters, { 'pt-2 mt-3 mb-5': props.visibleTitle })}>
      {props.visibleTitle && (
        <div className="d-flex flex-row align-items-center justify-content-between pb-2 mb-4 border-bottom">
          <div className="h6 text-uppercase mb-0 lh-base">Filters</div>
          {(!isEmpty(props.activeFilters) ||
            props.deprecated ||
            props.operators ||
            props.verifiedPublisher ||
            props.official ||
            !isEmpty(props.activeTsQuery)) && (
            <div className={`d-flex align-items-center ${styles.resetBtnWrapper}`}>
              <IoMdCloseCircleOutline className={`text-dark ${styles.resetBtnDecorator}`} />
              <button
                className={`btn btn-link btn-sm p-0 ps-1 text-dark ${styles.resetBtn}`}
                onClick={props.onResetFilters}
                aria-label="Reset filters"
              >
                Reset
              </button>
            </div>
          )}
        </div>
      )}

      <div className="d-flex flex-row align-items-baseline">
        <CheckBox
          name="official"
          value="official"
          device={props.device}
          className={styles.checkbox}
          labelClassName="mw-100"
          label="Official"
          checked={props.official || false}
          onChange={props.onOfficialChange}
        />

        <div className="d-none d-md-block">
          <ElementWithTooltip
            tooltipClassName={styles.tooltipMessage}
            className={`position-relative ${styles.tooltipIcon}`}
            element={<MdInfoOutline />}
            tooltipMessage="The publisher owns the software deployed by the packages"
            visibleTooltip
            active
          />
        </div>
      </div>

      <div className="d-flex flex-row align-items-baseline">
        <CheckBox
          name="verifiedPublisher"
          value="verifiedPublisher"
          device={props.device}
          className={styles.checkbox}
          labelClassName="mw-100"
          label="Verified publishers"
          checked={props.verifiedPublisher || false}
          onChange={props.onVerifiedPublisherChange}
        />

        <div className="d-none d-md-block">
          <ElementWithTooltip
            tooltipClassName={styles.tooltipMessage}
            className={styles.tooltipIcon}
            element={<MdInfoOutline />}
            tooltipMessage="The publisher owns the repository"
            visibleTooltip
            active
          />
        </div>
      </div>

      {getKindFacets()}
      <TsQuery device={props.device} active={props.activeTsQuery || []} onChange={props.onTsQueryChange} />
      {getPublishers()}
      {getRepositoryFacets()}
      {getLicenseFacets()}
      {getCapabilitiesFacets()}

      <div role="menuitem" className={`mt-2 mt-sm-3 pt-1 ${styles.facet}`}>
        <SmallTitle text="Others" className="text-dark fw-bold" />

        <div className="mt-3">
          <CheckBox
            name="operators"
            value="operators"
            device={props.device}
            labelClassName="mw-100"
            className={styles.checkbox}
            label="Only operators"
            checked={props.operators || false}
            onChange={props.onOperatorsChange}
          />

          <CheckBox
            name="deprecated"
            value="deprecated"
            device={props.device}
            className={styles.checkbox}
            label="Include deprecated"
            labelClassName="mw-100"
            checked={props.deprecated || false}
            onChange={props.onDeprecatedChange}
          />
        </div>
      </div>
    </div>
  );
}

ImagePreview: React.FC<ImagePreviewProps> = ({
  src,
  onScreenshot,
  imageLoading,
  onHandleFile,
  preventScreenshot,
}) => {
  const inputFile = useRef<HTMLInputElement>(null);
  const { isCheckingSetup } = useSelector((state: SliceMachineStoreType) => ({
    isCheckingSetup: isLoading(state, LoadingKeysEnum.CHECK_SIMULATOR),
  }));
  const [display, setDisplay] = useState(false);

  const handleFile = (file: File | undefined) => {
    if (inputFile?.current) {
      file && onHandleFile(file);
      inputFile.current.value = "";
    }
  };

  return (
    <div>
      <input
        id="input-file"
        type="file"
        ref={inputFile}
        style={{ display: "none" }}
        accept={acceptedImagesTypes.map((type) => `image/${type}`).join(",")}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          handleFile(e.target.files?.[0])
        }
      />
      <Flex
        sx={{
          position: "relative",
          alignItems: "center",
          justifyContent: "center",
          height: "290px",
          overflow: "hidden",
          backgroundImage: "url(/pattern.png)",
          backgroundColor: "headSection",
          backgroundRepeat: "repeat",
          backgroundSize: "20px",
          border: "1px solid #C9D0D8",
          boxShadow: "0px 8px 14px rgba(0, 0, 0, 0.1)",
          borderRadius: "4px",
        }}
        onMouseEnter={() => setDisplay(true)}
        onMouseLeave={() => setDisplay(false)}
      >
        {display || imageLoading || isCheckingSetup ? (
          <Flex
            sx={{
              width: "100%",
              height: "100%",
              position: "absolute",
              background: "rgba(0,0,0,.4)",
              alignItems: "center",
              justifyContent: "center",
              zIndex: "0",
            }}
          >
            {display ? (
              <Fragment>
                <Flex sx={{ flexDirection: "column" }}>
                  <Button
                    sx={{ mb: 3 }}
                    onClick={onScreenshot}
                    disabled={preventScreenshot}
                    variant={preventScreenshot ? "disabled" : "primary"}
                  >
                    Take screenshot
                  </Button>
                  <Label
                    htmlFor="input-file"
                    variant="buttons.primary"
                    sx={{ p: 2, borderRadius: "4px" }}
                  >
                    Custom screenshot
                  </Label>
                </Flex>
              </Fragment>
            ) : (
              <Spinner />
            )}
          </Flex>
        ) : null}
        {src ? (
          <MemoedImage src={src} />
        ) : (
          <Text
            sx={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <MdInfoOutline />
            You have no screenshot yet.
          </Text>
        )}
      </Flex>
    </div>
  );
}