How to use the @jenkins-cd/blueocean-core-js.i18nTranslator function in @jenkins-cd/blueocean-core-js

// @flow

import React, { Component, PropTypes } from 'react';
import type { PipelineInfo, StageInfo } from '../../services/PipelineStore';
import { isValidEnvironmentKey } from '../../services/PipelineValidator';
import idgen from '../../services/IdGenerator';
import { Dropdown } from '@jenkins-cd/design-language';
import { Split } from './Split';
import { TextInput } from '@jenkins-cd/design-language';
import { getAddIconGroup, getDeleteIconGroup } from './common';
import focusOnElement from './focusOnElement';
import InputText from './InputText';
import { ValidationMessageList } from './ValidationMessageList';
import { i18nTranslator } from '@jenkins-cd/blueocean-core-js';

const t = i18nTranslator('blueocean-pipeline-editor');

type Props = {
    node: PipelineInfo | StageInfo,
    onChange: (environment: Object[]) => any,
};

type State = {
    pristine: ?any,
};

type DefaultProps = typeof EnvironmentConfiguration.defaultProps;

const iconRadius = 10;
function addIcon() {
    return (
        <svg height="{iconRadius" width="{iconRadius"></svg>

import rootReducer, { ACTION_TYPES } from './redux/router';
import Config from './config';
import { ToastDrawer } from './components/ToastDrawer';
import { BackendConnectFailure } from './components/BackendConnectFailure';
import { DevelopmentFooter } from './DevelopmentFooter';
import { useStrict } from 'mobx';
import { Icon } from '@jenkins-cd/design-language';
import ErrorUtils from './ErrorUtils';

useStrict(true);

const LOGGER = logging.logger('io.jenkins.blueocean.web.routing');

let config; // Holder for various app-wide state

const translate = i18nTranslator('blueocean-web');

// Show link when only when someone is logged in...unless security is not configured,
// then show it anyway.
const AdminLink = props => {
    const { t } = props;

    const user = User.current();
    const showLink = !Security.isSecurityEnabled() || (user && user.isAdministrator);

    if (showLink) {
        var adminCaption = t('administration', {
            defaultValue: 'Administration',
        });
        return <a href="{`${UrlConfig.getJenkinsRootURL()}/manage`}">{adminCaption}</a>;
    }

const RestPaths = Paths.rest;

const classicConfigLink = pipeline => {
    let link = null;
    if (Security.permit(pipeline).configure()) {
        link = (
            <a title="{webTranslate('toast.configure'," href="{UrlBuilder.buildClassicConfigUrl(pipeline)}">
                
            </a>
        );
    }
    return link;
};

const translate = i18nTranslator('blueocean-dashboard');
const webTranslate = i18nTranslator('blueocean-web');

@observer
export class PipelinePage extends Component {
    componentWillMount() {
        this._handleParams(this.props.params);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.params !== this.props.params) {
            this._handleParams(nextProps.params);
        }
    }

    _handleParams(params) {
        if (params) {

logging,
} from '@jenkins-cd/blueocean-core-js';
import { Alerts } from '@jenkins-cd/design-language';

/**
 * Simple helper to stop stopPropagation
 * @param event the event we want to cancel
 */
const stopProp = event => {
    event.stopPropagation();
};

/**
 * Translate function
 */
const translate = i18nTranslator('blueocean-dashboard');
const logger = logging.logger('io.jenkins.blueocean.dashboard.InputStep');

/**
 * Creating a "<form>"less form to submit the input parameters requested by the user in pipeline.
 *
 * We keep all form data in state and change them onChange and onToggle (depending of the parameter
 * type). We match the different supported inputTypes with a mapping functions
 * @see supportedInputTypesMapping
 * That mapping delegates to the specific implementation where we further delegate to JDL components.
 * In case you want to register a new mapping you need to edit './parameter/index' to add a new mapping
 * and further in './parameter/commonProptypes' you need to include the new type in the oneOf array.
 */
export default class InputStep extends Component {
    constructor(props) {
        super(props);
        this.parameterService = new ParameterService();</form>

import { CreateMbpOutcome } from '../bitbucket/api/BbCreationApi';
import RenameStep from '../bitbucket/steps/BbRenameStep';

import GithubLoadingStep from './steps/GithubLoadingStep';
import GithubCredentialsStep from './steps/GithubCredentialStep';
import GithubOrgListStep from './steps/GithubOrgListStep';
import GithubRepositoryStep from '../bitbucket/steps/BbRepositoryStep';
import GithubCompleteStep from '../bitbucket/steps/BbCompleteStep';
import GithubUnknownErrorStep from './steps/GithubUnknownErrorStep';

const LOGGER = logging.logger('io.jenkins.blueocean.github-pipeline');
const MIN_DELAY = 500;
const FIRST_PAGE = 1;
const PAGE_SIZE = 100;
const SSE_TIMEOUT_DELAY = 1000 * 60;
const translate = i18nTranslator('blueocean-dashboard');

export default class GithubFlowManager extends FlowManager {
    apiUrl = null;

    credentialId = null;

    credentialSelected = false;

    @observable organizations = [];

    @observable repositories = [];

    @observable repositoriesLoading = false;

    @computed
    get selectableRepositories() {

import React from 'react';
import { Link } from 'react-router';

import { i18nTranslator, AppConfig } from '@jenkins-cd/blueocean-core-js';
import creationUtils from '../creation/creation-status-utils';

const t = i18nTranslator('blueocean-dashboard');

export default function CreatePipelineLink() {
    if (creationUtils.isHidden()) {
        return null;
    }
    const organization = AppConfig.getOrganizationName();
    const link = organization ? `/organizations/${organization}/create-pipeline` : '/create-pipeline';

    return (
        
            {t('home.header.button.createpipeline')}
        
    );
}

import React, { PropTypes } from 'react';
import Extensions from '@jenkins-cd/js-extensions';
import { i18nTranslator } from '@jenkins-cd/blueocean-core-js';

import FlowStep from '../../flow2/FlowStep';

const t = i18nTranslator('blueocean-dashboard');

export default class GithubCredentialsStep extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            complete: false,
        };
    }

    _onStatus(status) {
        const loading = status === 'promptLoading';

        this.setState({
            loading,

/**
 * Created by cmeyers on 7/6/16.
 */
import React, { Component, PropTypes } from 'react';
import { observer } from 'mobx-react';
import TransitionGroup from 'react-addons-css-transition-group';
import { i18nTranslator } from '@jenkins-cd/blueocean-core-js';

import favoriteStore from '../model/FavoriteStore';
import favoritesSseListener from '../model/FavoritesSseListener';

import { PipelineCard } from './PipelineCard';

const t = i18nTranslator('blueocean-personalization');

function CardStack(props) {
    const { children, message } = props;
    return (
        <div>
            <div> {message}</div>
            
                {children}
            
        </div>
    );
}
CardStack.propTypes = {
    children: PropTypes.array,
    message: PropTypes.string,
};

import React from 'react';
import { i18nTranslator } from '@jenkins-cd/blueocean-core-js';

import waitAtLeast from '../../flow2/waitAtLeast';
import BbCloudFlowManager from '../cloud/BbCloudFlowManager';
import BbLoadingStep from '../steps/BbLoadingStep';
import BbOrgListStep from '../steps/BbOrgListStep';

import BbChooseServerStep from './steps/BbChooseServerStep';
import BbServerManager from './BbServerManager';
import STATE from './BbServerCreationState';

const translate = i18nTranslator('blueocean-dashboard');
const MIN_DELAY = 500;

export default class BbServerFlowManager extends BbCloudFlowManager {
    selectedServer = null;

    constructor(creationApi, serverApi) {
        super(creationApi);
        this.serverManager = new BbServerManager(serverApi);
    }

    translate(key, opts) {
        return translate(key, opts);
    }

    getStates() {
        return STATE.values();

import React, { PropTypes } from 'react';
import { Page } from '@jenkins-cd/design-language';
import { ContentPageHeader, i18nTranslator, loadingIndicator } from '@jenkins-cd/blueocean-core-js';
import Extensions from '@jenkins-cd/js-extensions';

import { ClassicCreationLink } from './ClassicCreationLink';
import { CreatePipelineScmListRenderer } from './CreatePipelineScmListRenderer';
import { CreatePipelineStepsRenderer } from './CreatePipelineStepsRenderer';
import VerticalStep from './flow2/VerticalStep';
import StepStatus from './flow2/FlowStepStatus';
import creationUtils from './creation-status-utils';

const Sandbox = Extensions.SandboxedComponent;
const t = i18nTranslator('blueocean-dashboard');

export default class CreatePipeline extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedProvider: null,
        };
    }

    componentWillMount() {
        loadingIndicator.hide();
    }

    componentWillUnmount() {
        if (this.state.selectedProvider) {