Annotations: FE

[apata]

Changes

Adds the rest of Annotations feature. Depends on the BE PR.

Tests

• Automated tests have been added

Changelog

• Entry has been added to changelog

Documentation

• annotations wip docs#733 has been updated and merged

Dark mode

• The UI has been tested both in dark and light mode

TODO after merge

• Merge website pricing plans update Add Annotations feature to #pricing plans section website#1108

[github-actions]

Preview environment👷🏼‍♀️🏗️
PR-6481

[RobertJoonas]

The classname between the two buttons should be exactly the same so perhaps let's extract that into a variable?

[apata]

Hmm, true that it is duplicative... AFAIK TW recommends against variables though. They suggest to generate repetitive items with map, or extract to component, or to use multicursor when editing. I can do the map thing, but it creates this situation:

      {hasActions && (
        <div className="flex flex-row gap-x-2 mt-2">
          {[
            !!annotationDatetime &&
              canAddAnnotation && {
                text: 'Add note',
                onClick: () => {
                  closeTooltip()
                  setModal({
                    type: 'create-annotation',
                    annotation: {
                      type: AnnotationType.personal,
                      datetime: annotationDatetime,
                      granularity: getAnnotationGranularity(interval)
                    }
                  })
                }
              },
            !!zoomDate && {
              text: `View ${interval}`,
              onClick: () => onZoomToPeriod(zoomDate)
            }
          ]
            .filter((b) => !!b)
            .map(({ text, onClick }) => (
              <Button
                key={text}
                size="xs"
                className="flex-1 bg-gray-600/70 border-gray-600/70 hover:bg-gray-600 hover:border-gray-600"
                onClick={onClick}
              >
                {text}
              </Button>
            ))}
        </div>
      )}

[RobertJoonas]

Makes sense. Maybe extracting a simple button component would be the cleanest approach then?

function TooltipActionButton(props) {
  const className = "flex-1 bg-gray-600/70 border-gray-600/70 hover:bg-gray-600 hover:border-gray-600"
  return <Button className={className} {...props}>
}

Fine for me to leave the duplicate classes though.