Repository: strapi/strapi
File: packages/core/admin/admin/src/components/UnstableGuidedTour/Step.tsx (TypeScript)

Code before:
    return (
      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width="100%">
        {'children' in props ? (
          props.children
        ) : (
          <Typography tag="div" variant="omega" fontWeight="bold">
            <FormattedMessage tagName="h1" id={props.id} defaultMessage={props.defaultMessage} />
          </Typography>
        )}
      </Box>
    );
  },

  Content: (props) => (
    <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width="100%">
      {'children' in props ? (
        props.children
      ) : (
        <Typography tag="div" variant="omega">
          <FormattedMessage tagName="p" id={props.id} defaultMessage={props.defaultMessage} />
        </Typography>
      )}
    </Box>
  ),

  Actions: ({ showStepCount = true, showSkip = false, to, trackedEvent, ...props }) => {
    const { trackUsage } = useTracking();
    const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);
    const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);
    const currentStep = state.tours[tourName].currentStep + 1;
    // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
    const displayedLength = state.tours[tourName].length - 1;

    const handleSkipAction = () => {
      trackUsage('didSkipGuidedtour');
      dispatch({ type: 'skip_tour', payload: tourName });
    };

    return (
      <ActionsContainer width="100%" padding={3} paddingLeft={5}>
        {'children' in props ? (
          props.children
        ) : (
          <Flex flex={1} justifyContent={showStepCount ? 'space-between' : 'flex-end'}>
            {showStepCount && (
              <Typography variant="omega" fontSize="12px">
                <FormattedMessage
                  id="tours.stepCount"
                  defaultMessage="Step {currentStep} of {tourLength}"
                  values={{ currentStep, tourLength: displayedLength }}
                />

Review comment (suggestion):
I don't really like this as a prop here and on the TASK_CONTENT constant. 

What if we made a new shared constant like 
```
GUIDED_TOUR_TRACKING = {
 contentTypeBuilder: { create: 'didCreateGuidedTourContentTypeSchema', start: 'didStartGuidedTourContentTypeBuilder'}
}
```
Then we can look up the tracking with the tourName
```
const trackingEvent = GUIDED_TOUR_TRACKING['contentTypeBuilder'].create
```
I think this way if we need to add or update a tracking event it will only require a change in one place vs two

Code after:
    return (
      <Popover.Content ref={ref} side="top" align="center" style={{ border: 'none' }} {...props}>
        {withArrow && (
          <PopoverArrow asChild>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="23"
              height="25"
              viewBox="0 0 23 25"
              fill="none"
            >
              <path d="M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z" />
            </svg>
          </PopoverArrow>
        )}
        <Flex width="360px" direction="column" alignItems="start">
          {props.children}
        </Flex>
      </Popover.Content>
    );
  }),

  Title: (props) => {
    return (
      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width="100%">
        {'children' in props ? (
          props.children
        ) : (
          <Typography tag="div" variant="omega" fontWeight="bold">
            <FormattedMessage tagName="h1" id={props.id} defaultMessage={props.defaultMessage} />
          </Typography>
        )}
      </Box>
    );
  },

  Content: (props) => (
    <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width="100%">
      {'children' in props ? (
        props.children
      ) : (
        <Typography tag="div" variant="omega">
          <FormattedMessage tagName="p" id={props.id} defaultMessage={props.defaultMessage} />
        </Typography>
      )}
    </Box>
  ),

  Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps }) => {
    const { trackUsage } = useTracking();
    const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);