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

render() {
        if (!this.props.runnable) {
            return null;
        }

        const { t, locale, runnable } = this.props;

        // Required props
        if (!t) {
            PipelineCard.logger.error('PipelineCard requires translate function as "t" prop.');
            return null;
        }

        const latestRun = runnable.latestRun;

        const isBranch = capable(runnable, BRANCH_CAPABILITY);
        const names = extractNames(runnable, isBranch);
        const organizationName = runnable.organization;
        const organizationDisplayName = organizationName === AppConfig.getOrganizationName() ? AppConfig.getOrganizationDisplayName() : organizationName;
        const fullDisplayName = isBranch
            ? runnable.fullDisplayName
                  .split('/')
                  .slice(0, -1)
                  .join('/')
            : runnable.fullDisplayName;

        let status;
        let startTime = null;
        let estimatedDuration = null;
        let commitId = null;

        if (latestRun) {

render() {
        const { pipeline, t, locale } = this.props;
        const { actionExtensionCount } = this.state;
        const actionsInRowCount = ActivityDetailsRow.actionItemsCount; // Non-extension actions

        if (!pipeline) {
            return null;
        }

        const runs = this.pager.data;
        const isLoading = this.pager.pending;
        const branch = this._branchFromProps(this.props);

        const isMultiBranchPipeline = capable(pipeline, MULTIBRANCH_PIPELINE);
        const hasBranches = pipeline.branchNames && !!pipeline.branchNames.length;

        const disableablePipeline = pipeline.disabled !== undefined && pipeline.disabled !== null ? true : false;

        const onNavigation = url => {
            this.context.location.pathname = url;
            this.context.router.push(this.context.location);
        };

        const onChangeDisableState = newDisableState => {
            this.setState({ pipelineDisabled: newDisableState });
        };

        const latestRun = runs && runs[0];

        // Only show the Run button for non multi-branch pipelines.

render() {
        const { pipeline } = this.props;
        const trends = this.trends.slice();

        let branchFilter = null;

        if (capable(pipeline, MULTIBRANCH_PIPELINE)) {
            const branchName = decodeURIComponent(this._selectedBranch(this.props, pipeline));

            branchFilter =  decodeURIComponent(b))} />;
        }

        return (
            <div>
                <div>{branchFilter}</div>

                <div>
                    {trends.map(trend =&gt; {
                        const CustomComponent = this.extensions[trend.id];
                        const rows = this.rowsMap[trend.id];

                        if (!rows || !rows.length) {
                            // forces a full re-render of the chart when branch is changed, for animations</div></div>

render() {
        const { t, locale, pipeline } = this.props;
        const { actionExtensionCount } = this.state;
        const actionsInRowCount = BranchDetailsRow.actionItemsCount; // Non-extension actions

        if (!capable(pipeline, MULTIBRANCH_PIPELINE)) {
            const childProps = {
                title: t('pipelinedetail.placeholder.unsupported.branches.title'),
                message: t('pipelinedetail.placeholder.unsupported.branches.message'),
                linkText: t('pipelinedetail.placeholder.unsupported.branches.linktext'),
                linkHref: t('pipelinedetail.placeholder.unsupported.branches.linkhref'),
            };

            return ;
        }

        const branches = this.pager.data;

        if (!this.pager.pending && !branches.length) {
            return ;
        }

_fetchRun(props) {
        this.isMultiBranch = capable(props.pipeline, MULTIBRANCH_PIPELINE);

        if (this.context.config && this.context.params) {
            this.href = RestPaths.run({
                organization: props.params.organization,
                pipeline: props.params.pipeline,
                branch: this.isMultiBranch && props.params.branch,
                runId: props.params.runId,
            });

            this.context.activityService.fetchActivity(this.href, { useCache: true }).then(run => {
                const testSummaryUrl = getTestSummaryUrl(run);
                return testSummaryUrl && this.context.activityService.fetchTestSummary(testSummaryUrl);
            });
        }
    }

get isMultiBranchPipeline() {
        return capable(this.pipeline, MULTIBRANCH_PIPELINE);
    }
    /**

_findExistingOrgFolderSuccess(orgFolder) {
        const isOrgFolder = capable(orgFolder, 'jenkins.branch.OrganizationFolder');

        return {
            isFound: true,
            isOrgFolder,
            orgFolder,
        };
    }

componentWillMount() {
        if (this.props.pipeline && this.context.params && capable(this.props.pipeline, MULTIBRANCH_PIPELINE)) {
            const { organization, pipeline } = this.context.params;
            this.pager = this.context.pipelineService.branchPager(organization, pipeline);
        }
        this._countExtensions();
    }