@fluid-topics/ft-case-deflection NPM

A Web Component that can perform requests from ft portal or create issues in a JIRA project

The case deflection component requires the Fluid Topics public API and Material Icon font to be imported independently.

Install

Javascript/Typescript

npm install @fluid-topics/ft-case-deflection
yarn add @fluid-topics/ft-case-deflection

HTML

To be placed at the end of HTML body:

<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-case-deflection/build/ft-case-deflection.min.js"></script>

Usage

Lit

import { html } from "lit"
import "@fluid-topics/ft-case-deflection"

function render() {
    return html` <ft-case-deflection
            baseUrl="https://tinman-demo-dev.fluidtopics.net"
            jiraUrl="https://jira-dr.mrs.antidot.net"
            jiraToken="Basic bHp2YXJhOkwxTzJKM1U0eHgq"
            projectId="11900"
            issueTypeId="10700"
            .searchFilters=${ {
                    key: 'Version_FT',
                    values: ['latest'],
                    negative: false
                } }
            .filteredMetadataKeys=${ [
                    "FT_Version",
                    "Product",
                    "language",
                    "audience",
                    "Category",
                    "ft:lastPublication"
                ] }
            @search=${ (e: CustomEvent<FtSearchRequest>) => console.log("Search launched: ", e.detail) }
            @issue-created=${ (e: CustomEvent<string>) => console.log("Issue created: ", e.detail) }
        ></ft-case-deflection> `
}

HTML

<html lang="en">
<head>
    <title>My custom integration</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <ft-case-deflection
        baseUrl="http://doc.fluidtopics.com"
        jiraUrl="<JIRA_URL>"
        jiraToken="Basic <token>"
        projectId="11900"
        issueTypeId="10700"
        .filteredMetadataKeys="[&quot;FT_Version&quot;,&quot;Product&quot;,&quot;language&quot;,&quot;audience&quot;,&quot;Category&quot;,&quot;ft:lastPublication&quot;]"
    ></ft-case-deflection>

    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-case-deflection/build/ft-case-deflection.min.js"></script>
    <script>
        const caseDeflection = document.querySelector('ft-case-deflection');
        caseDeflection.setAttribute("searchFilters", JSON.stringify({
                                                            key: 'Version_FT',
                                                            values: ['latest'],
                                                            negative: false
                                                        }));

        caseDeflection.addEventListener("search", event => console.log("Search launched: ", event.detail));
        caseDeflection.addEventListener("issue-created", event => console.log("Issue created: ", event.detail));
    </script>
</body>
</html>

Lit

@fluid-topics/ft-button @fluid-topics/ft-chip @fluid-topics/ft-icon @fluid-topics/ft-loader @fluid-topics/ft-select @fluid-topics/ft-text-area @fluid-topics/ft-text-field @fluid-topics/ft-wc-utils lit

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago