react-icons/fa#FaKey TypeScript Examples

The following examples show how to use react-icons/fa#FaKey. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SignKeyInfo.tsx    From hub with Apache License 2.0 5 votes vote down vote up 
SignKeyInfo = (props: Props) => {
  const history = useHistory();
  const [openStatus, setOpenStatus] = useState<boolean>(false);

  const onClose = () => {
    setOpenStatus(false);
    history.replace({
      search: '',
      state: { searchUrlReferer: props.searchUrlReferer, fromStarredPage: props.fromStarredPage },
    });
  };

  const onOpen = useCallback(() => {
    if (props.signed && props.repoKind === RepositoryKind.Helm && !isUndefined(props.signKey)) {
      setOpenStatus(true);
      history.replace({
        search: '?modal=key-info',
        state: { searchUrlReferer: props.searchUrlReferer, fromStarredPage: props.fromStarredPage },
      });
    }
  }, [history, props.fromStarredPage, props.repoKind, props.searchUrlReferer, props.signKey, props.signed]);

  useEffect(() => {
    if (props.visibleKeyInfo && !openStatus) {
      onOpen();
    }
  }, []); /* eslint-disable-line react-hooks/exhaustive-deps */

  const onlyCosignSignature =
    !isUndefined(props.signatures) && props.signatures.length === 1 && props.signatures[0] === Signature.Cosign;

  if (
    isNull(props.signed) ||
    !props.signed ||
    props.repoKind !== RepositoryKind.Helm ||
    (isUndefined(props.signKey) && onlyCosignSignature)
  )
    return null;

  return (
    <>
      <ElementWithTooltip
        element={
          <button
            className={classNames('btn btn-outline-secondary btn-sm ms-2 px-2 py-0', styles.btn, {
              disabled: isUndefined(props.signKey),
            })}
            onClick={onOpen}
            aria-label="Open sign key modal"
            aria-disabled={isUndefined(props.signKey)}
          >
            <small className="d-flex flex-row align-items-center text-uppercase">
              <FaKey />
              <span className="ms-2 fw-bold">View key info</span>
            </small>
          </button>
        }
        visibleTooltip={isUndefined(props.signKey)}
        tooltipWidth={230}
        tooltipMessage="The publisher hasn't provided any information for this key yet"
        active
      />

      {!isUndefined(props.signKey) && (
        <Modal
          modalDialogClassName={styles.modalDialog}
          header={<div className={`h3 m-2 flex-grow-1 ${styles.title}`}>Sign key information</div>}
          onClose={onClose}
          open={openStatus}
        >
          <div className="mx-0 mx-md-3 my-1 mw-100">
            <CommandBlock language="text" command={props.signKey.fingerprint} title="Fingerprint" />

            <CommandBlock language="text" command={props.signKey.url} title="URL" />
          </div>
        </Modal>
      )}
    </>
  );
}
Example #2
Source File: data.tsx    From hub with Apache License 2.0 5 votes vote down vote up 
CONTROL_PANEL_SECTIONS: NavSection = {
  user: [
    {
      name: 'repositories',
      displayName: 'Repositories',
      disabled: false,
      icon: <GoPackage />,
    },
    {
      name: 'organizations',
      displayName: 'Organizations',
      disabled: false,
      icon: <MdBusiness />,
    },
    {
      name: 'settings',
      displayName: 'Settings',
      disabled: false,
      icon: <MdSettings />,
      subsections: [
        { displayName: 'Profile', name: 'profile', icon: <MdBusiness />, disabled: false },
        { displayName: 'Subscriptions', name: 'subscriptions', icon: <MdNotificationsActive />, disabled: false },
        { displayName: 'Webhooks', name: 'webhooks', icon: <GrConnect />, disabled: false },
        { displayName: 'API keys', name: 'api-keys', icon: <FaKey />, disabled: false },
      ],
    },
  ],
  org: [
    {
      name: 'repositories',
      displayName: 'Repositories',
      disabled: false,
      icon: <GoPackage />,
    },
    {
      name: 'members',
      displayName: 'Members',
      disabled: false,
      icon: <FaUserFriends />,
    },
    {
      name: 'settings',
      displayName: 'Settings',
      disabled: false,
      icon: <MdSettings />,
      subsections: [
        { displayName: 'Profile', name: 'profile', icon: <MdBusiness />, disabled: false },
        { displayName: 'Webhooks', name: 'webhooks', icon: <GrConnect />, disabled: false },
        {
          displayName: 'Authorization',
          name: 'authorization',
          icon: <FaScroll />,
          disabled: false,
          onlyDesktop: true,
        },
      ],
    },
  ],
}