How to use the @lingui/react.i18nMark function in @lingui/react

icon: 'BRD',
		colour: '#91ba5e',
		role: ROLES.PHYSICAL_RANGED.id,
	},
	MACHINIST: {
		i18n_id: i18nMark('game.job.machinist'),
		name: 'Machinist',
		logType: ActorType.MACHINIST,
		icon: 'MCH',
		colour: '#6ee1d6',
		role: ROLES.PHYSICAL_RANGED.id,
	},

	// Magic Ranged
	BLACK_MAGE: {
		i18n_id: i18nMark('game.job.black-mage'),
		name: 'Black Mage',
		logType: ActorType.BLACK_MAGE,
		icon: 'BLM',
		colour: '#a579d6',
		role: ROLES.MAGICAL_RANGED.id,
	},
	SUMMONER: {
		i18n_id: i18nMark('game.job.summoner'),
		name: 'Summoner',
		logType: ActorType.SUMMONER,
		icon: 'SMN',
		colour: '#2d9b78',
		role: ROLES.MAGICAL_RANGED.id,
	},
	RED_MAGE: {
		i18n_id: i18nMark('game.job.red-mage'),

STATUSES.THE_EWER.id,
	STATUSES.THE_SPIRE.id,
]

const DRAWN_ACTION_TO_STATUS_LOOKUP = _.zipObject(DRAWN_ARCANA_USE, [...DRAWN_ARCANA, ...DRAWN_ARCANA])
const HELD_ACTION_TO_STATUS_LOOKUP = _.zipObject(HELD_ARCANA_USE, [...HELD_ARCANA, ...HELD_ARCANA])

export default class ArcanaTracking extends Module {
	static handle = 'arcanaTracking'
	static dependencies = [
		'precastStatus', // eslint-disable-line xivanalysis/no-unused-dependencies
		'arcanum', // eslint-disable-line xivanalysis/no-unused-dependencies
		'suggestions',
	]
	static title = 'Arcana Tracking'
	static i18n_id = i18nMark('ast.arcana-tracking.title')
	static displayOrder = DISPLAY_ORDER.ARCANA_TRACKING

	_cardStateLog = [{
		lastEvent: null,
		rrAbility: null,
		drawState: null,
		spreadState: null,
		minorState: null,
	}]
	_completeCardLog = []
	_minorArcanasLost = 0

	constructor(...args) {
		super(...args)

		const cardActionFilter = {

displayName: i18nMark("Delayed"),
  category: StatusCategory.WARNING
};
const WARNING: Status = {
  priority: 20,
  displayName: i18nMark("Warning"),
  category: StatusCategory.WARNING
};

///////////////////////////////////////////////////////////////////////////////
//                                PROCESSING                                 //
///////////////////////////////////////////////////////////////////////////////

const RESTORING: Status = {
  priority: 17,
  displayName: i18nMark("Restoring"),
  category: StatusCategory.LOADING
};
const RECOVERING: Status = {
  priority: 16,
  displayName: i18nMark("Recovering"),
  category: StatusCategory.LOADING
};
const UPGRADE_DOWNGRADE_ROLLBACK: Status = {
  priority: 15,
  displayName: i18nMark("Upgrade / Rollback / Downgrade"),
  category: StatusCategory.LOADING
};
const DEPLOYING: Status = {
  priority: 14,
  displayName: i18nMark("Deploying"),
  category: StatusCategory.LOADING

message: i18nMark("Must be defined")
  },
  {
    path: /.*/,
    type: "PROP_MISSING",
    message: i18nMark("Must define property `||name||`")
  },
  {
    path: /.*/,
    type: "PROP_MISSING_MATCH",
    message: i18nMark("Must contain a property that matches `||pattern||`")
  },
  {
    path: /.*/,
    type: "STRING_PATTERN",
    message: i18nMark("Must match the pattern `||pattern||`")
  },
  {
    path: /.*/,
    type: "TYPE_NOT_ARRAY",
    message: i18nMark("Must be an array")
  },
  {
    path: /.*/,
    type: "TYPE_NOT_BOOLEAN",
    message: i18nMark("Must be a boolean value")
  },
  {
    path: /.*/,
    type: "TYPE_NOT_DATETIME",
    message: i18nMark("Must be a date/time string")
  },

import PropTypes from "prop-types";
import * as React from "react";
import { MountService } from "foundation-ui";
import { Trans } from "@lingui/macro";
import { i18nMark } from "@lingui/react";

import ConfigurationMapHeading from "#SRC/js/components/ConfigurationMapHeading";

import ConfigurationMapBooleanValue from "../components/ConfigurationMapBooleanValue";
import ConfigurationMapTable from "../components/ConfigurationMapTable";

const BOOLEAN_OPTIONS = {
  truthy: i18nMark("TRUE"),
  falsy: i18nMark("FALSE")
};

class PodContainerArtifactsConfigSection extends React.Component {
  getColumns() {
    return [
      {
        heading() {
          return Artifact URI;
        },
        prop: "uri"
      },
      {
        heading() {
          return Executable;
        },

getPackageOptionBadge(cosmosPackage) {
    const isCertified = cosmosPackage.isCertified();
    const copy = isCertified ? i18nMark("Certified") : i18nMark("Community");
    const appearance = isCertified ? "primary" : "default";

    return } />;
  }

import { iconSizeXxs } from "@dcos/ui-kit/dist/packages/design-tokens/build/js/designTokens";

import StoreMixin from "#SRC/js/mixins/StoreMixin";
import FilterBar from "../../../components/FilterBar";
import FilterHeadline from "../../../components/FilterHeadline";
import FilterInputText from "../../../components/FilterInputText";
import Loader from "../../../components/Loader";
import MesosStateStore from "../../../stores/MesosStateStore";
import Overlay from "../../../structs/Overlay";
import RequestErrorMsg from "../../../components/RequestErrorMsg";
import TaskUtil from "../../../../../plugins/services/src/js/utils/TaskUtil";
import VirtualNetworkUtil from "../../../utils/VirtualNetworkUtil";
import Util from "../../../utils/Util";

const headerMapping = {
  id: i18nMark("Task"),
  ip_address: i18nMark("Container IP"),
  port_mappings: i18nMark("Port Mappings")
};
const METHODS_TO_BIND = [
  "handleSearchStringChange",
  "renderAgentIP",
  "renderID",
  "renderPorts",
  "resetFilter"
];

const agentIPPath = "statuses.0.container_status.network_infos.0.ip_addresses";

class VirtualNetworkTaskTab extends mixin(StoreMixin) {
  constructor(...args) {
    super(...args);

getTabs() {
    const { id } = this.props.service;
    const routePrefix = `/services/detail/${encodeURIComponent(id)}`;

    const tabs = [
      { label: i18nMark("Tasks"), routePath: `${routePrefix}/tasks` },
      {
        label: i18nMark("Configuration"),
        routePath: `${routePrefix}/configuration`
      },
      { label: i18nMark("Debug"), routePath: `${routePrefix}/debug` },
      { label: i18nMark("Endpoints"), routePath: `${routePrefix}/endpoints` }
    ];

    if (isSDKService(this.props.service)) {
      tabs.push({
        label: i18nMark("Plans"),
        routePath: `${routePrefix}/plans`
      });
    }

    if (this.hasVolumes()) {
      tabs.push({
        label: i18nMark("Volumes"),
        routePath: `${routePrefix}/volumes`
      });
    }

import { Confirm } from "reactjs-components";
import PropTypes from "prop-types";
import * as React from "react";
import { Trans, t } from "@lingui/macro";
import { withI18n, i18nMark } from "@lingui/react";

import ModalHeading from "#SRC/js/components/modals/ModalHeading";
import StringUtil from "#SRC/js/utils/StringUtil";

import AppLockedMessage from "./AppLockedMessage";
import Pod from "../../structs/Pod";

const ACTION_DISPLAY_NAMES = {
  restart: i18nMark("Restart"),
  stop: i18nMark("Stop")
};

const ACTION_DISPLAY_NAMES_CONTINUOUS = {
  restart: i18nMark("Restarting..."),
  stop: i18nMark("Stopping...")
};

class KillPodInstanceModal extends React.PureComponent {
  constructor(...args) {
    super(...args);

    this.state = {
      errorMsg: null
    };
  }

tabList
      );
    } else {
      tabList.push(
        { id: "placement", key: "placement", label: i18nMark("Placement") },
        { id: "networking", key: "networking", label: i18nMark("Networking") },
        { id: "volumes", key: "volumes", label: i18nMark("Volumes") },
        {
          id: "healthChecks",
          key: "healthChecks",
          label: i18nMark("Health Checks")
        },
        {
          id: "environment",
          key: "environment",
          label: i18nMark("Environment")
        }
      );
      tabList = Hooks.applyFilter(
        "createServiceMultiContainerTabList",
        tabList
      );
    }

    return tabList;
  }