github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/pages/continuous/contextMenu/AnnotationInfo.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React, { Dispatch, SetStateAction } from 'react';
     3  import { Popover, PopoverBody, PopoverFooter } from '@webapp/ui/Popover';
     4  import Button from '@webapp/ui/Button';
     5  import { Portal } from '@webapp/ui/Portal';
     6  import TextField from '@webapp/ui/Form/TextField';
     7  import { AddAnnotationProps } from './AddAnnotation.menuitem';
     8  import { useAnnotationForm } from './useAnnotationForm';
     9  
    10  interface AnnotationInfo {
    11    /** where to position the popover */
    12    popoverAnchorPoint: AddAnnotationProps['popoverAnchorPoint'];
    13    timestamp: AddAnnotationProps['timestamp'];
    14    timezone: AddAnnotationProps['timezone'];
    15    value: { content: string; timestamp: number };
    16    isOpen: boolean;
    17    onClose: () => void;
    18    popoverClassname?: string;
    19  }
    20  
    21  const AnnotationInfo = ({
    22    popoverAnchorPoint,
    23    value,
    24    timezone,
    25    isOpen,
    26    onClose,
    27    popoverClassname,
    28  }: AnnotationInfo) => {
    29    const { register, errors } = useAnnotationForm({ value, timezone });
    30  
    31    return (
    32      <Portal>
    33        <Popover
    34          anchorPoint={{ x: popoverAnchorPoint.x, y: popoverAnchorPoint.y }}
    35          isModalOpen={isOpen}
    36          setModalOpenStatus={onClose as Dispatch<SetStateAction<boolean>>}
    37          className={popoverClassname}
    38        >
    39          <PopoverBody>
    40            <form id="annotation-form" name="annotation-form">
    41              <TextField
    42                {...register('content')}
    43                label="Description"
    44                errorMessage={errors.content?.message}
    45                readOnly
    46                data-testid="annotation_content_input"
    47              />
    48              <TextField
    49                {...register('timestamp')}
    50                label="Time"
    51                type="text"
    52                readOnly
    53                data-testid="annotation_timestamp_input"
    54              />
    55            </form>
    56          </PopoverBody>
    57          <PopoverFooter>
    58            <Button onClick={onClose} kind="secondary" form="annotation-form">
    59              Close
    60            </Button>
    61          </PopoverFooter>
    62        </Popover>
    63      </Portal>
    64    );
    65  };
    66  
    67  export default AnnotationInfo;