How to use the @codesandbox/common/lib/utils/notifications.notificationState.addNotification function in @codesandbox/common

export function showUserSurveyIfNeeded({ state, controller, api }) {
  if (state.get('user.sendSurvey')) {
    // Let the server know that we've seen the survey
    api.post('/users/survey-seen', {});

    notificationState.addNotification({
      title: 'Help improve CodeSandbox',
      message:
        "We'd love to hear your thoughts, it's 7 questions and will only take 2 minutes.",
      status: NotificationStatus.NOTICE,
      sticky: true,
      actions: {
        primary: [
          {
            label: 'Open Survey',
            run: () => {
              controller.getSignal('modalOpened')({
                modal: 'userSurvey',
              });
            },
          },
        ],

if (theme && monaco.editor.defineTheme) {
    const transformedTheme = getTheme(theme);

    try {
      monaco.editor.defineTheme('CodeSandbox', {
        base: getBase(transformedTheme.type),
        inherit: true,
        colors: transformedTheme.colors,
        rules: transformedTheme.rules,
      });

      monaco.editor.setTheme('CodeSandbox');
    } catch (e) {
      console.error(e);

      notificationState.addNotification({
        message: `Problem initializing template in editor: ${e.message}`,
        status: NotificationStatus.ERROR,
      });
    }
  }
};

.then(() => {
        notificationState.addNotification({
          message: `Successfully created ${selectedSandboxes.length} template${
            selectedSandboxes.length === 1 ? '' : 's'
          }`,
          status: NotificationStatus.SUCCESS,
          actions: {
            primary: [
              {
                label: 'Undo',
                run: () => {
                  track('Template - Removed', {
                    source: 'Undo',
                  });
                  unmakeTemplates(unpackedSelectedSandboxes);
                },
              },
            ],

addNotification(notification: NotificationMessage) {
    notificationState.addNotification(notification);
  }

options: { actions: NotificationMessage['actions']; sticky?: boolean }
  ) {
    const getStatus = () => {
      switch (type) {
        case 'error':
          return NotificationStatus.ERROR;
        case 'warning':
          return NotificationStatus.WARNING;
        case 'success':
          return NotificationStatus.SUCCESS;
        default:
          return NotificationStatus.NOTICE;
      }
    };

    notificationState.addNotification({
      message,
      status: getStatus(),
      sticky: options.sticky,
      actions: options.actions,
    });
  }
}

add(notification: NotificationMessage) {
    notificationState.addNotification(notification);
  },
  error(message: string) {

const showNotification = (message, type) => {
      notificationState.addNotification({
        message,
        status: convertTypeToStatus(type),
      });
    };

label: 'Open Patron Page',
            run: () => {
              window.open(patronUrl(), '_blank');
            },
          },
        ],
      },
    });
  } else if (
    errorMessage.startsWith(
      'You reached the limit of server sandboxes, you can create more server sandboxes as a patron.'
    )
  ) {
    track('Non-Patron Server Sandbox Limit Reached', { errorMessage });

    notificationState.addNotification({
      title: errorMessage,
      status: NotificationStatus.ERROR,
      actions: {
        primary: [
          {
            label: 'Open Patron Page',
            run: () => {
              window.open(patronUrl(), '_blank');
            },
          },
        ],
      },
    });
  } else {
    if (
      errorMessage.startsWith(

export function showContainerError({ props }) {
  if (props.unrecoverable) {
    notificationState.addNotification({
      title: `Container Error`,
      message: props.error,
      status: NotificationStatus.ERROR,
    });
  } else {
    notificationState.addNotification({
      title: `Container Warning`,
      message: props.error,
      status: NotificationStatus.WARNING,
    });
  }
}

error(message: string) {
    notificationState.addNotification({
      message,
      status: NotificationStatus.ERROR,
    });
  },
  success(message: string) {