export function AssertionInfo()

in src/components/Assertion/AssertionInfo.tsx [53:91]

• 39 lines of code
• 1 McCabe index (conditional complexity)

export function AssertionInfo() {
  const [isInfoPopoverOpen, setIsInfoPopoverOpen] = useState(false);
  const { electronAPI } = useContext(CommunicationContext);
  return (
    <EuiPopover
      button={
        <EuiButtonIcon
          aria-label="Shows a popover with more information about Playwright assertions."
          iconType="iInCircle"
          onClick={() => setIsInfoPopoverOpen(!isInfoPopoverOpen)}
        />
      }
      isOpen={isInfoPopoverOpen}
      closePopover={() => setIsInfoPopoverOpen(false)}
      panelPaddingSize="none"
    >
      <InfoPopoverTitle size="xs">
        <h4>Add assertion</h4>
      </InfoPopoverTitle>
      <InfoPopoverTextWrapper>
        <EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="none">
          <EuiFlexItem grow={false}>
            <AssertionInfoText>
              You can add assertions to validate your page&apos;s content matches your expectations.
            </AssertionInfoText>
          </EuiFlexItem>
          <EuiFlexItem grow={false}>
            <EuiButtonEmpty
              href={PLAYWRIGHT_ASSERTION_DOCS_LINK}
              onClick={createExternalLinkHandler(electronAPI, PLAYWRIGHT_ASSERTION_DOCS_LINK)}
            >
              Read more
            </EuiButtonEmpty>
          </EuiFlexItem>
        </EuiFlexGroup>
      </InfoPopoverTextWrapper>
    </EuiPopover>
  );
}