@redhat-cloud-services/frontend-components-advisor-components 1.0.1 → 1.0.2

package/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:cypress/recommended"]
+}

package/README.md

@@ -16,7 +16,20 @@ yarn add @redhat-cloud-services/frontend-components
 
 This package is dependent on [@redhat-cloud-services/frontend-components](https://www.npmjs.com/package/@redhat-cloud-services/frontend-components) and it will automatically install it trough direct dependencies.
 
+## Testing
+
+Run cypress component tests in terminal:
+```bash
+npx cypress run-ct
+```
+
+Run cypress components tests in the interactive (window) mode:
+```bash
+npx cypress open-ct
+```
+
 ## Documentation Links
 
 * Components
-  * [RuleDetails](doc/ruleDetails.md)
+  * [RuleDetails](doc/ruleDetails.md)
+  * [ReportDetails](doc/reportDetails.md)

package/ReportDetails/ReportDetails.css

@@ -0,0 +1,47 @@
+.ins-c-report-details__cards-stack pre {
+  display: block;
+  color: var(--pf-global--Color--100);
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: var(--pf-global--BackgroundColor--light-200);
+  border: 1px solid var(--pf-global--BorderColor--100);
+  border-radius: 4px;
+  padding: 10px;
+  padding: 0.625rem;
+  margin: 10px 0px;
+  margin: 0.625rem 0rem;
+}
+.ins-c-report-details__cards-stack pre code {
+  white-space: pre-wrap;
+}
+.ins-c-report-details__cards-stack ol {
+  margin-top: 10px;
+  margin-top: 0.625rem;
+  margin-left: 15px;
+  margin-left: 0.9375rem;
+}
+.ins-c-report-details__cards-stack pre + p,
+.ins-c-report-details__cards-stack pre + ul {
+  margin-top: 10px;
+  margin-top: 0.625rem;
+}
+.ins-c-report-details__cards-stack .pf-c-list {
+  margin: 5px 0px;
+  margin: 0.3125rem 0rem;
+}
+.ins-c-report-details__cards-stack table {
+  width: 100%;
+  margin-top: 10px;
+  margin-top: 0.625rem;
+}
+.ins-c-report-details__cards-stack table tr {
+  border-bottom: 1px solid var(--pf-global--BorderColor--300);
+}
+.ins-c-report-details__cards-stack table th,
+.ins-c-report-details__cards-stack table td {
+  padding: 8px;
+  padding: 0.5rem;
+}
+.ins-c-report-details__icon {
+  margin-right: var(--pf-global--spacer--sm);
+}

package/ReportDetails/ReportDetails.d.ts

@@ -0,0 +1,18 @@
+import './ReportDetails.scss';
+import React from 'react';
+import { RuleContentOcp, RuleContentRhel } from '../types';
+interface Report {
+    rule: RuleContentRhel | RuleContentOcp;
+    details: Record<string, string | number>;
+    resolution: string;
+}
+interface ReportDetailsProps {
+    report: Report;
+    kbaDetail: {
+        publishedTitle: string;
+        view_uri: string;
+    };
+    kbaLoading: boolean;
+}
+declare const ReportDetails: React.FC<ReportDetailsProps>;
+export default ReportDetails;

package/ReportDetails/ReportDetails.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./ReportDetails.scss");
+var react_1 = __importStar(require("react"));
+var react_core_1 = require("@patternfly/react-core");
+var react_icons_1 = require("@patternfly/react-icons");
+var Skeleton_1 = require("@redhat-cloud-services/frontend-components/Skeleton");
+var TemplateProcessor_1 = require("../TemplateProcessor");
+var common_1 = require("../common");
+var ReportDetails = function (_a) {
+    var report = _a.report, kbaDetail = _a.kbaDetail, kbaLoading = _a.kbaLoading;
+    var rule = report.rule, details = report.details, resolution = report.resolution;
+    var _b = (0, react_1.useState)(null), error = _b[0], setError = _b[1];
+    var handleError = function (e) {
+        if (error === null) {
+            setError(e);
+        }
+    };
+    return (react_1.default.createElement(react_core_1.Card, { className: "ins-c-report-details", style: { boxShadow: 'none' } },
+        react_1.default.createElement(react_core_1.CardBody, null,
+            error && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_core_1.Alert, { variant: "danger", title: "Sorry, there was an error rendering the content correctly.", isInline: true }),
+                react_1.default.createElement("br", null))),
+            react_1.default.createElement(react_core_1.Stack, { className: "ins-c-report-details__cards-stack", "widget-type": "InsightsRulesCard", hasGutter: true },
+                react_1.default.createElement(react_core_1.StackItem, null,
+                    react_1.default.createElement(react_core_1.Card, { isCompact: true, isPlain: true },
+                        react_1.default.createElement(react_core_1.CardHeader, null,
+                            react_1.default.createElement(react_icons_1.BullseyeIcon, { className: "ins-c-report-details__icon" }),
+                            react_1.default.createElement("strong", null, "Detected issues")),
+                        react_1.default.createElement(react_core_1.CardBody, null, rule.reason && react_1.default.createElement(TemplateProcessor_1.TemplateProcessor, { template: rule.reason, definitions: details, onError: handleError })))),
+                react_1.default.createElement(react_core_1.Divider, null),
+                react_1.default.createElement(react_core_1.StackItem, null,
+                    react_1.default.createElement(react_core_1.Card, { isCompact: true, isPlain: true },
+                        react_1.default.createElement(react_core_1.CardHeader, null,
+                            react_1.default.createElement(react_icons_1.ThumbsUpIcon, { className: "ins-c-report-details__icon" }),
+                            react_1.default.createElement("strong", null, "Steps to resolve")),
+                        react_1.default.createElement(react_core_1.CardBody, null, resolution && react_1.default.createElement(TemplateProcessor_1.TemplateProcessor, { template: resolution, definitions: details, onError: handleError })))),
+                rule.node_id && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_core_1.Divider, null),
+                    react_1.default.createElement(react_core_1.StackItem, null,
+                        react_1.default.createElement(react_core_1.Card, { className: "ins-c-report-details__kba", isCompact: true, isPlain: true },
+                            react_1.default.createElement(react_core_1.CardHeader, null,
+                                react_1.default.createElement(react_icons_1.LightbulbIcon, { className: "ins-c-report-details__icon" }),
+                                react_1.default.createElement("strong", null, "Related Knowledgebase article")),
+                            react_1.default.createElement(react_core_1.CardBody, null, kbaLoading ? (react_1.default.createElement(Skeleton_1.Skeleton, { size: Skeleton_1.SkeletonSize.sm })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement(common_1.ExternalLink, { href: "".concat(kbaDetail.view_uri), content: kbaDetail.publishedTitle ? kbaDetail.publishedTitle : "Knowledgebase article" }),
+                                "."))))))),
+                rule.more_info && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_core_1.Divider, null),
+                    react_1.default.createElement(react_core_1.StackItem, null,
+                        react_1.default.createElement(react_core_1.Card, { isCompact: true, isPlain: true },
+                            react_1.default.createElement(react_core_1.CardHeader, null,
+                                react_1.default.createElement(react_icons_1.InfoCircleIcon, { className: "ins-c-report-details__icon" }),
+                                react_1.default.createElement("strong", null, "Additional info")),
+                            react_1.default.createElement(react_core_1.CardBody, null, react_1.default.createElement(TemplateProcessor_1.TemplateProcessor, { template: rule.more_info, definitions: details, onError: handleError }))))))))));
+};
+exports.default = ReportDetails;
+//# sourceMappingURL=ReportDetails.js.map

package/ReportDetails/ReportDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReportDetails.js","sourceRoot":"","sources":["../src/ReportDetails/ReportDetails.tsx"],"names":[],"mappings":"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"}

package/ReportDetails/ReportDetails.scss

@@ -0,0 +1,53 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/_mixins';
+
+.ins-c-report-details {
+  &__cards-stack {
+    pre {
+      display: block;
+      color: var(--pf-global--Color--100);
+      word-break: break-all;
+      word-wrap: break-word;
+      background-color: var(--pf-global--BackgroundColor--light-200);
+      border: 1px solid var(--pf-global--BorderColor--100);
+      border-radius: 4px;
+      @include rem('padding', 10px);
+      @include rem('margin', (10px, 0));
+
+      code {
+        white-space: pre-wrap;
+      }
+    }
+
+    ol {
+      @include rem('margin-top', 10px);
+      @include rem('margin-left', 15px);
+    }
+
+    pre + p,
+    pre + ul {
+      @include rem('margin-top', 10px);
+    }
+
+    .pf-c-list {
+      @include rem('margin', 5px 0);
+    }
+
+    table {
+      width: 100%;
+      @include rem('margin-top', 10px);
+
+      tr {
+        border-bottom: 1px solid var(--pf-global--BorderColor--300);
+      }
+
+      th,
+      td {
+        @include rem('padding', 8px);
+      }
+    }
+  }
+
+  &__icon {
+    margin-right: var(--pf-global--spacer--sm);
+  }
+}

package/ReportDetails/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ReportDetails';
+export { default as ReportDetails } from './ReportDetails';

package/ReportDetails/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportDetails = void 0;
+__exportStar(require("./ReportDetails"), exports);
+var ReportDetails_1 = require("./ReportDetails");
+Object.defineProperty(exports, "ReportDetails", { enumerable: true, get: function () { return __importDefault(ReportDetails_1).default; } });
+//# sourceMappingURL=index.js.map

package/ReportDetails/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/ReportDetails/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC;AAChC,iDAA2D;AAAlD,+HAAA,OAAO,OAAiB"}

package/ReportDetails/package.json

@@ -0,0 +1 @@
+{"main":"index.js","module":"../esm/ReportDetails/index.js","typings":"index.d.ts"}

package/RuleDescription/RuleDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleDescription.js","sourceRoot":"","sources":["../src/RuleDescription/RuleDescription.tsx"],"names":[],"mappings":";;;;;AAAA,kCAAgC;AAEhC,gDAA0B;AAC1B,kEAAsC;AACtC,0DAAmC;AACnC,oEAA6C;AAE7C,kCAA2E;AAQ3E,IAAM,eAAe,GAAmC,UAAC,EAAgC;QAA9B,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,aAAa,mBAAA;IAAO,OAAA,CAC5F,8BAAC,eAAK,CAAC,QAAQ,QACZ,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CACjC,wCAAM,SAAS,EAAE,OAAO,KAAK,sBAAc,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE;QAC/F,8BAAC,wBAAQ,IAAC,aAAa,EAAE,CAAC,oBAAS,EAAE,yBAAc,CAAC,IACjD,OAAO,KAAK,sBAAc,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CACrE,CACN,CACR,CACc,CAClB;AAV6F,CAU7F,CAAC;AAEF,kBAAe,eAAe,CAAC"}
+{"version":3,"file":"RuleDescription.js","sourceRoot":"","sources":["../src/RuleDescription/RuleDescription.tsx"],"names":[],"mappings":";;;;;AAAA,kCAAgC;AAEhC,gDAA0B;AAC1B,kEAAsC;AACtC,0DAAmC;AACnC,oEAA6C;AAE7C,kCAA2E;AAQ3E,IAAM,eAAe,GAAmC,UAAC,EAAgC;QAA9B,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,aAAa,mBAAA;IAAO,OAAA,CAC5F,8BAAC,eAAK,CAAC,QAAQ,QACZ,CAAC,IAAI,CAAC,OAAO,IAAK,IAAwB,CAAC,OAAO,CAAC,IAAI,CACtD,wCAAM,SAAS,EAAE,OAAO,KAAK,sBAAc,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE;QAC/F,8BAAC,wBAAQ,IAAC,aAAa,EAAE,CAAC,oBAAS,EAAE,yBAAc,CAAC,IACjD,OAAO,KAAK,sBAAc,CAAC,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAE,IAAwB,CAAC,OAAO,CAC1F,CACN,CACR,CACc,CAClB;AAV6F,CAU7F,CAAC;AAEF,kBAAe,eAAe,CAAC"}

package/RuleDetails/RuleDetails.d.ts

@@ -1,25 +1,26 @@
 import './RuleDetails.scss';
 import React from 'react';
 import { AdvisorProduct, Rating, RuleContentOcp, RuleContentRhel, TopicRhel } from '../types';
+export declare type Message = React.ReactNode;
 export declare type RuleDetailsMessages = {
-    systemReboot: string;
-    viewAffectedSystems?: string;
-    viewAffectedClusters?: string;
-    knowledgebaseArticle: string;
-    topicRelatedToRule: string;
-    totalRisk: string;
-    rulesDetailsTotalRiskBody: string;
-    likelihoodLevel: string;
-    likelihoodDescription: string;
-    impactLevel: string;
-    impactDescription: string;
-    riskOfChange: string;
-    riskOfChangeText: string;
-    riskOfChangeLabel: string;
-    ruleHelpful: string;
-    feedbackThankYou: string;
+    systemReboot: Message;
+    viewAffectedSystems?: Message;
+    viewAffectedClusters?: Message;
+    knowledgebaseArticle: Message;
+    topicRelatedToRule: Message;
+    totalRisk: Message;
+    rulesDetailsTotalRiskBody: Message;
+    likelihoodLevel: Message;
+    likelihoodDescription: Message;
+    impactLevel: Message;
+    impactDescription: Message;
+    riskOfChange: Message;
+    riskOfChangeText: Message;
+    riskOfChangeLabel: Message;
+    ruleHelpful: Message;
+    feedbackThankYou: Message;
 };
-interface RuleDetailsProps {
+export interface RuleDetailsProps {
     messages: RuleDetailsMessages;
     product: AdvisorProduct;
     rule: RuleContentOcp | RuleContentRhel;
@@ -27,7 +28,7 @@ interface RuleDetailsProps {
     resolutionRiskDesc?: string;
     header?: React.ReactNode;
     isDetailsPage: boolean;
-    topics: TopicRhel[];
+    topics?: TopicRhel[];
     onVoteClick?: (ruleId: string, calculatedRating: Rating) => unknown;
     showViewAffected?: boolean;
     linkComponent?: any;

package/RuleDetails/RuleDetails.js

@@ -17,23 +17,24 @@ var ViewAffectedLink_1 = require("../ViewAffectedLink");
 var RuleDescription_1 = require("../RuleDescription");
 var RuleDetails = function (_a) {
     var messages = _a.messages, product = _a.product, header = _a.header, rule = _a.rule, isDetailsPage = _a.isDetailsPage, topics = _a.topics, onVoteClick = _a.onVoteClick, showViewAffected = _a.showViewAffected, resolutionRisk = _a.resolutionRisk, resolutionRiskDesc = _a.resolutionRiskDesc, children = _a.children, Link = _a.linkComponent, knowledgebaseUrl = _a.knowledgebaseUrl;
-    return (react_1.default.createElement(react_core_1.Flex, { flexWrap: { default: 'nowrap' }, direction: { default: isDetailsPage ? 'column' : 'columnReverse', lg: 'row' } },
+    return (react_1.default.createElement(react_core_1.Flex, { className: "ins-c-rule-details", flexWrap: { default: 'nowrap' }, direction: { default: isDetailsPage ? 'column' : 'columnReverse', lg: 'row' } },
         react_1.default.createElement(react_core_1.FlexItem, null,
             react_1.default.createElement(react_core_1.Stack, { hasGutter: true },
-                header && react_1.default.createElement(react_core_1.StackItem, null, header),
-                react_1.default.createElement(react_core_1.StackItem, null,
+                header && react_1.default.createElement(react_core_1.StackItem, { className: "ins-c-rule-details__header" }, header),
+                react_1.default.createElement(react_core_1.StackItem, { className: "ins-c-rule-details__description" },
                     react_1.default.createElement(RuleDescription_1.RuleDescription, { product: product, rule: rule, isDetailsPage: isDetailsPage })),
-                knowledgebaseUrl && (react_1.default.createElement(react_core_1.StackItem, null,
+                knowledgebaseUrl && (react_1.default.createElement(react_core_1.StackItem, { className: "ins-c-rule-details__kbs" },
                     react_1.default.createElement("a", { rel: "noopener noreferrer", target: "_blank", href: knowledgebaseUrl },
                         messages.knowledgebaseArticle,
                         "\u00A0",
                         react_1.default.createElement(react_icons_1.ExternalLinkAltIcon, { size: "sm" })))),
-                topics && rule.tags && (0, common_1.topicLinks)(rule, topics, Link).length > 0 && (react_1.default.createElement(react_core_1.StackItem, null,
+                topics && rule.tags && (0, common_1.topicLinks)(rule, topics, Link).length > 0 && (react_1.default.createElement(react_core_1.StackItem, { className: "ins-c-rule-details__topics" },
                     react_1.default.createElement("strong", null, messages.topicRelatedToRule),
                     react_1.default.createElement("br", null),
                     (0, common_1.barDividedList)((0, common_1.topicLinks)(rule, topics, Link)))),
-                isDetailsPage && onVoteClick && react_1.default.createElement(RuleRating_1.default, { messages: messages, ruleId: rule.rule_id, ruleRating: rule.rating, onVoteClick: onVoteClick }),
-                !isDetailsPage && showViewAffected && Link && (react_1.default.createElement(react_core_1.StackItem, null,
+                isDetailsPage && onVoteClick && (react_1.default.createElement(react_core_1.StackItem, { className: "ins-c-rule-details__vote" },
+                    react_1.default.createElement(RuleRating_1.default, { messages: messages, ruleId: rule.rule_id, ruleRating: rule.rating, onVoteClick: onVoteClick }))),
+                !isDetailsPage && showViewAffected && Link && (react_1.default.createElement(react_core_1.StackItem, { className: "ins-c-rule-details__view-affected" },
                     react_1.default.createElement(ViewAffectedLink_1.ViewAffectedLink, { messages: messages, rule: rule, product: product, linkComponent: Link }))))),
         react_1.default.createElement(react_core_1.FlexItem, { align: { lg: 'alignRight' } },
             react_1.default.createElement(react_core_1.Stack, null,
@@ -44,11 +45,11 @@ var RuleDetails = function (_a) {
                             react_1.default.createElement("strong", null, messages.totalRisk)),
                         react_1.default.createElement(react_core_1.FlexItem, null,
                             react_1.default.createElement(react_core_1.Flex, { flexWrap: { default: 'nowrap' } },
-                                react_1.default.createElement(react_core_1.FlexItem, null,
+                                react_1.default.createElement(react_core_1.FlexItem, { className: "ins-c-rule-details__total-risk" },
                                     react_1.default.createElement(InsightsLabel_1.default, { value: rule.total_risk, isCompact: true, className: "pf-m-compact", rest: {} })),
-                                react_1.default.createElement(react_core_1.FlexItem, { className: "ins-c-description-stack-override" },
+                                react_1.default.createElement(react_core_1.FlexItem, null,
                                     react_1.default.createElement(react_core_1.Stack, { hasGutter: true },
-                                        react_1.default.createElement(react_core_1.StackItem, null,
+                                        react_1.default.createElement(react_core_1.StackItem, { className: "ins-c-rule-details__total-risk-body" },
                                             react_1.default.createElement(react_core_1.TextContent, null,
                                                 react_1.default.createElement(react_core_1.Text, { component: react_core_1.TextVariants.p }, messages.rulesDetailsTotalRiskBody))),
                                         react_1.default.createElement(react_core_1.Stack, null,
@@ -63,13 +64,13 @@ var RuleDetails = function (_a) {
                             react_1.default.createElement(react_core_1.FlexItem, { className: "pf-u-display-inline-flex alignCenterOverride pf-u-pb-sm pf-u-pt-sm" },
                                 react_1.default.createElement(react_core_1.Flex, { flexWrap: { default: 'nowrap' } },
                                     react_1.default.createElement(react_core_1.FlexItem, null,
-                                        react_1.default.createElement(InsightsLabel_1.default, { text: messages.riskOfChangeLabel, value: resolutionRisk, hideIcon: true, className: "pf-m-compact", rest: {} })),
-                                    react_1.default.createElement(react_core_1.FlexItem, { className: "ins-c-description-stack-override" },
+                                        react_1.default.createElement(InsightsLabel_1.default, { text: messages.riskOfChangeLabel, value: resolutionRisk, hideIcon: true, className: "ins-c-rule-details__risk-of-ch-label pf-m-compact", rest: {} })),
+                                    react_1.default.createElement(react_core_1.FlexItem, { className: "ins-c-rule-details__risk-of-ch-desc" },
                                         react_1.default.createElement(react_core_1.Stack, { hasGutter: true },
                                             react_1.default.createElement(react_core_1.StackItem, null,
                                                 react_1.default.createElement(react_core_1.TextContent, null,
                                                     react_1.default.createElement(react_core_1.Text, { component: react_core_1.TextVariants.p }, resolutionRiskDesc))),
-                                            product === types_1.AdvisorProduct.rhel && (react_1.default.createElement(react_core_1.StackItem, null,
+                                            product === types_1.AdvisorProduct.rhel && (react_1.default.createElement(react_core_1.StackItem, { className: "ins-c-rule-details__reboot" },
                                                 react_1.default.createElement(RebootRequired_1.default, { messages: messages, rebootRequired: rule.reboot_required })))))))))))))));
 };
 exports.default = RuleDetails;

package/RuleDetails/RuleDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleDetails.js","sourceRoot":"","sources":["../src/RuleDetails/RuleDetails.tsx"],"names":[],"mappings":";;;;;AAAA,8BAA4B;AAE5B,gDAA0B;AAE1B,qDAA2G;AAC3G,uDAA8D;AAE9D,2GAAqF;AACrF,+FAA8F;AAE9F,oFAA8D;AAC9D,wEAAkD;AAClD,oCAAuD;AACvD,kCAA8F;AAC9F,wDAAuD;AACvD,sDAAqD;AA2CrD,IAAM,WAAW,GAA+B,UAAC,EAchD;QAbC,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,aAAa,mBAAA,EACb,MAAM,YAAA,EACN,WAAW,iBAAA,EACX,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,kBAAkB,wBAAA,EAClB,QAAQ,cAAA,EACO,IAAI,mBAAA,EACnB,gBAAgB,sBAAA;IACZ,OAAA,CACJ,8BAAC,iBAAI,IAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,EAAE,KAAK,EAAE;QAClH,8BAAC,qBAAQ;YACP,8BAAC,kBAAK,IAAC,SAAS;gBACb,MAAM,IAAI,8BAAC,sBAAS,QAAE,MAAM,CAAa;gBAC1C,8BAAC,sBAAS;oBACR,8BAAC,iCAAe,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,GAAI,CACrE;gBACX,gBAAgB,IAAI,CACnB,8BAAC,sBAAS;oBACR,qCAAG,GAAG,EAAC,qBAAqB,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAE,gBAAgB;wBAChE,QAAQ,CAAC,oBAAoB;;wBAC9B,8BAAC,iCAAmB,IAAC,IAAI,EAAC,IAAI,GAAG,CAC/B,CACM,CACb;gBACA,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,IAAA,mBAAU,EAAC,IAAuB,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CACtF,8BAAC,sBAAS;oBACR,8CAAS,QAAQ,CAAC,kBAAkB,CAAU;oBAC9C,yCAAM;oBACL,IAAA,uBAAc,EAAC,IAAA,mBAAU,EAAC,IAAuB,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CACxD,CACb;gBACA,aAAa,IAAI,WAAW,IAAI,8BAAC,oBAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,WAAW,EAAE,WAAW,GAAI;gBAC3I,CAAC,aAAa,IAAI,gBAAgB,IAAI,IAAI,IAAI,CAC7C,8BAAC,sBAAS;oBACR,8BAAC,mCAAgB,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,GAAI,CACjF,CACb,CACK,CACC;QACX,8BAAC,qBAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE;YACnC,8BAAC,kBAAK;gBACH,QAAQ,IAAI,8BAAC,sBAAS,QAAE,QAAQ,CAAa;gBAC9C,8BAAC,sBAAS;oBACR,8BAAC,iBAAI,IAAC,SAAS,EAAC,2BAA2B,EAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;wBAC1E,8BAAC,qBAAQ,IAAC,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;4BACvC,8CAAS,QAAQ,CAAC,SAAS,CAAU,CAC5B;wBACX,8BAAC,qBAAQ;4BACP,8BAAC,iBAAI,IAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gCACnC,8BAAC,qBAAQ;oCAEP,8BAAC,uBAAa,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,QAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI,CAC7E;gCACX,8BAAC,qBAAQ,IAAC,SAAS,EAAC,kCAAkC;oCACpD,8BAAC,kBAAK,IAAC,SAAS;wCACd,8BAAC,sBAAS;4CACR,8BAAC,wBAAW;gDACV,8BAAC,iBAAI,IAAC,SAAS,EAAE,yBAAY,CAAC,CAAC,IAAG,QAAQ,CAAC,yBAAyB,CAAQ,CAChE,CACJ;wCACZ,8BAAC,kBAAK;4CACJ,8BAAC,sBAAS;gDACR,8BAAC,2BAAY,IACX,SAAS,EAAC,qBAAqB,EAC/B,KAAK,EAAE,QAAQ,CAAC,eAAe,EAC/B,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,cAAc,EAAE,QAAQ,CAAC,qBAAqB,GAC9C,CACQ;4CACZ,8BAAC,sBAAS;gDACR,8BAAC,2BAAY,IACX,SAAS,EAAC,qBAAqB,EAC/B,KAAK,EAAE,QAAQ,CAAC,WAAW,EAC3B,KAAK,EAAG,IAAwB,CAAC,MAAM,CAAC,MAAM,EAC9C,cAAc,EAAE,QAAQ,CAAC,iBAAiB,GAC1C,CACQ,CACN,CACF,CACC,CACN,CACE;wBACV,cAAc,IAAI,kBAAkB,IAAI,CACvC,8BAAC,eAAK,CAAC,QAAQ;4BACb,wCAAM,SAAS,EAAC,YAAY,GAAG;4BAC/B,8BAAC,qBAAQ,IAAC,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;gCACvC,8CAAS,QAAQ,CAAC,YAAY,CAAU,CAC/B;4BACX,8BAAC,qBAAQ,IAAC,SAAS,EAAE,oEAAoE;gCACvF,8BAAC,iBAAI,IAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;oCACnC,8BAAC,qBAAQ;wCAEP,8BAAC,uBAAa,IAAC,IAAI,EAAE,QAAQ,CAAC,iBAAiB,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,QAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,EAAE,GAAI,CAC7G;oCACX,8BAAC,qBAAQ,IAAC,SAAS,EAAC,kCAAkC;wCACpD,8BAAC,kBAAK,IAAC,SAAS;4CACd,8BAAC,sBAAS;gDACR,8BAAC,wBAAW;oDACV,8BAAC,iBAAI,IAAC,SAAS,EAAE,yBAAY,CAAC,CAAC,IAAG,kBAAkB,CAAQ,CAChD,CACJ;4CACX,OAAO,KAAK,sBAAc,CAAC,IAAI,IAAI,CAClC,8BAAC,sBAAS;gDACR,8BAAC,wBAAc,IAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAG,IAAwB,CAAC,eAAe,GAAI,CACvF,CACb,CACK,CACC,CACN,CACE,CACI,CAClB,CACI,CACG,CACN,CACC,CACN,CACR;AA7GK,CA6GL,CAAC;AAEF,kBAAe,WAAW,CAAC"}
+{"version":3,"file":"RuleDetails.js","sourceRoot":"","sources":["../src/RuleDetails/RuleDetails.tsx"],"names":[],"mappings":"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"}

package/RuleRating/RuleRating.d.ts

@@ -2,6 +2,7 @@ import './RuleRating.scss';
 import React from 'react';
 import { Rating } from '../types';
 import { RuleDetailsMessages } from '../RuleDetails/RuleDetails';
+export declare const DEBOUNCE_TIMEOUT = 2000;
 interface RuleRatingProps {
     ruleId: string;
     ruleRating: Rating;

package/RuleRating/RuleRating.js

@@ -22,11 +22,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEBOUNCE_TIMEOUT = void 0;
 require("./RuleRating.scss");
 var react_1 = __importStar(require("react"));
 var debounce_1 = __importDefault(require("lodash/debounce"));
 var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
+exports.DEBOUNCE_TIMEOUT = 2000;
 var RuleRating = function (_a) {
     var messages = _a.messages, ruleId = _a.ruleId, ruleRating = _a.ruleRating, onVoteClick = _a.onVoteClick;
     var _b = (0, react_1.useState)(ruleRating), rating = _b[0], setRating = _b[1];
@@ -34,7 +36,7 @@ var RuleRating = function (_a) {
     var triggerCallback = (0, react_1.useCallback)((0, debounce_1.default)(function (calculatedRating) {
         onVoteClick(ruleId, calculatedRating);
         setSubmitted(false);
-    }, 2000), []);
+    }, exports.DEBOUNCE_TIMEOUT), []);
     var updateRuleRating = function (newRating) {
         var calculatedRating = rating === newRating ? 0 : newRating;
         try {

package/RuleRating/RuleRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleRating.js","sourceRoot":"","sources":["../src/RuleRating/RuleRating.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,6BAA2B;AAE3B,6CAAqD;AACrD,6DAAuC;AAEvC,qDAAgD;AAChD,uDAAqH;AAYrH,IAAM,UAAU,GAA8B,UAAC,EAA6C;QAA3C,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,WAAW,iBAAA;IAClF,IAAA,KAAsB,IAAA,gBAAQ,EAAC,UAAU,CAAC,EAAzC,MAAM,QAAA,EAAE,SAAS,QAAwB,CAAC;IAC3C,IAAA,KAA4B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAElD,IAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,IAAA,kBAAQ,EAAC,UAAC,gBAAgB;QACxB,WAAW,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;QACtC,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,IAAI,CAAC,EACR,EAAE,CACH,CAAC;IAEF,IAAM,gBAAgB,GAAG,UAAC,SAAiB;QACzC,IAAM,gBAAgB,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE9D,IAAI;YACF,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,eAAe,CAAC,gBAAgB,CAAC,CAAC;YAClC,SAAS,CAAC,gBAAgB,CAAC,CAAC;SAC7B;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACtB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,wCAAM,SAAS,EAAC,oBAAoB;QACjC,QAAQ,CAAC,WAAW;QACrB,8BAAC,mBAAM,IAAC,OAAO,EAAC,OAAO,gBAAY,WAAW,EAAC,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,CAAC,CAAC,EAAnB,CAAmB,EAAE,MAAM,EAAC,UAAU,IACjG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,8BAAC,0BAAY,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,8BAAC,kCAAoB,IAAC,IAAI,EAAC,IAAI,GAAG,CAC/F;QACT,8BAAC,mBAAM,IAAC,OAAO,EAAC,OAAO,gBAAY,aAAa,EAAC,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAApB,CAAoB,EAAE,MAAM,EAAC,YAAY,IACtG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,8BAAC,4BAAc,IAAC,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,8BAAC,oCAAsB,IAAC,IAAI,EAAC,IAAI,GAAG,CACvG;QACR,SAAS,IAAI,QAAQ,CAAC,gBAAgB,CAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}
+{"version":3,"file":"RuleRating.js","sourceRoot":"","sources":["../src/RuleRating/RuleRating.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6BAA2B;AAE3B,6CAAqD;AACrD,6DAAuC;AAEvC,qDAAgD;AAChD,uDAAqH;AAKxG,QAAA,gBAAgB,GAAG,IAAI,CAAC;AASrC,IAAM,UAAU,GAA8B,UAAC,EAA6C;QAA3C,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,WAAW,iBAAA;IAClF,IAAA,KAAsB,IAAA,gBAAQ,EAAC,UAAU,CAAC,EAAzC,MAAM,QAAA,EAAE,SAAS,QAAwB,CAAC;IAC3C,IAAA,KAA4B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAElD,IAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,IAAA,kBAAQ,EAAC,UAAC,gBAAgB;QACxB,WAAW,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;QACtC,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,wBAAgB,CAAC,EACpB,EAAE,CACH,CAAC;IAEF,IAAM,gBAAgB,GAAG,UAAC,SAAiB;QACzC,IAAM,gBAAgB,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE9D,IAAI;YACF,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,eAAe,CAAC,gBAAgB,CAAC,CAAC;YAClC,SAAS,CAAC,gBAAgB,CAAC,CAAC;SAC7B;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACtB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,wCAAM,SAAS,EAAC,oBAAoB;QACjC,QAAQ,CAAC,WAAW;QACrB,8BAAC,mBAAM,IAAC,OAAO,EAAC,OAAO,gBAAY,WAAW,EAAC,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,CAAC,CAAC,EAAnB,CAAmB,EAAE,MAAM,EAAC,UAAU,IACjG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,8BAAC,0BAAY,IAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,8BAAC,kCAAoB,IAAC,IAAI,EAAC,IAAI,GAAG,CAC/F;QACT,8BAAC,mBAAM,IAAC,OAAO,EAAC,OAAO,gBAAY,aAAa,EAAC,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAApB,CAAoB,EAAE,MAAM,EAAC,YAAY,IACtG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,8BAAC,4BAAc,IAAC,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,8BAAC,oCAAsB,IAAC,IAAI,EAAC,IAAI,GAAG,CACvG;QACR,SAAS,IAAI,QAAQ,CAAC,gBAAgB,CAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/TemplateProcessor/TemplateProcessor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TemplateProcessorProps {
+    template: string;
+    definitions: Record<string, string | number>;
+    onError?: (e: Error) => void;
+}
+declare const TemplateProcessor: React.FC<TemplateProcessorProps>;
+export default TemplateProcessor;

package/TemplateProcessor/TemplateProcessor.js

@@ -0,0 +1,66 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var dot_1 = __importDefault(require("dot"));
+var marked_1 = require("marked");
+var sanitize_html_1 = __importStar(require("sanitize-html"));
+var DOT_SETTINGS = __assign(__assign({}, dot_1.default.templateSettings), { varname: 'pydata', strip: false });
+var TemplateProcessor = function (_a) {
+    var template = _a.template, definitions = _a.definitions, onError = _a.onError;
+    try {
+        var compiledDot = definitions ? dot_1.default.template(template, DOT_SETTINGS)(definitions) : template;
+        var compiledMd = (0, marked_1.marked)(compiledDot);
+        var sanitized = (0, sanitize_html_1.default)(compiledMd, {
+            allowedAttributes: { '*': ['href', 'target', 'class', 'style', 'rel'] },
+            allowedSchemes: ['https'],
+            transformTags: {
+                ul: (0, sanitize_html_1.simpleTransform)('ul', { class: 'pf-c-list', style: 'font-size: inherit' }),
+                a: (0, sanitize_html_1.simpleTransform)('a', { rel: 'noopener noreferrer', target: '_blank' }),
+            },
+        });
+        return (react_1.default.createElement("div", { dangerouslySetInnerHTML: {
+                __html: sanitized.replace(/<\/a>/gim, " <i class=\"fas fa-external-link-alt\"></i></a>"),
+            } }));
+    }
+    catch (error) {
+        console.warn(error, definitions, template);
+        onError && onError(error);
+        return (react_1.default.createElement("pre", null,
+            react_1.default.createElement("code", null, template)));
+    }
+};
+exports.default = TemplateProcessor;
+//# sourceMappingURL=TemplateProcessor.js.map

package/TemplateProcessor/TemplateProcessor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateProcessor.js","sourceRoot":"","sources":["../src/TemplateProcessor/TemplateProcessor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,4CAAsB;AACtB,iCAAgC;AAChC,6DAA0D;AAQ1D,IAAM,YAAY,yBACb,aAAG,CAAC,gBAAgB,KACvB,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,KAAK,GACb,CAAC;AAEF,IAAM,iBAAiB,GAAqC,UAAC,EAAkC;QAAhC,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,OAAO,aAAA;IAC3F,IAAI;QACF,IAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,aAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/F,IAAM,UAAU,GAAG,IAAA,eAAM,EAAC,WAAW,CAAC,CAAC;QACvC,IAAM,SAAS,GAAG,IAAA,uBAAQ,EAAC,UAAU,EAAE;YACrC,iBAAiB,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE;YACvE,cAAc,EAAE,CAAC,OAAO,CAAC;YACzB,aAAa,EAAE;gBACb,EAAE,EAAE,IAAA,+BAAe,EAAC,IAAI,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC;gBAC9E,CAAC,EAAE,IAAA,+BAAe,EAAC,GAAG,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;aAC1E;SACF,CAAC,CAAC;QAEH,OAAO,CACL,uCACE,uBAAuB,EAAE;gBACvB,MAAM,EAAE,SAAS,CAAC,OAAO,CACvB,UAAU,EACV,iDAA+C,CAChD;aACF,GACD,CACH,CAAC;KACH;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC3C,OAAO,IAAI,OAAO,CAAC,KAAc,CAAC,CAAC;QACnC,OAAO,CACL;YACE,4CAAO,QAAQ,CAAQ,CACnB,CACP,CAAC;KACH;AACH,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}

package/TemplateProcessor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TemplateProcessor';
+export { default as TemplateProcessor } from './TemplateProcessor';

package/TemplateProcessor/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateProcessor = void 0;
+__exportStar(require("./TemplateProcessor"), exports);
+var TemplateProcessor_1 = require("./TemplateProcessor");
+Object.defineProperty(exports, "TemplateProcessor", { enumerable: true, get: function () { return __importDefault(TemplateProcessor_1).default; } });
+//# sourceMappingURL=index.js.map

package/TemplateProcessor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/TemplateProcessor/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,sDAAoC;AACpC,yDAAmE;AAA1D,uIAAA,OAAO,OAAqB"}

package/TemplateProcessor/package.json

@@ -0,0 +1 @@
+{"main":"index.js","module":"../esm/TemplateProcessor/index.js","typings":"index.d.ts"}

package/common.d.ts

@@ -1,3 +1,7 @@
 import { RuleContentRhel, TopicRhel } from './types';
 export declare const barDividedList: (list: JSX.Element[]) => JSX.Element[];
 export declare const topicLinks: (rule: RuleContentRhel, topics: TopicRhel[], Link: any) => JSX.Element[];
+export declare const ExternalLink: ({ href, content }: {
+    href: string;
+    content: string;
+}) => JSX.Element;

package/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.topicLinks = exports.barDividedList = void 0;
+exports.ExternalLink = exports.topicLinks = exports.barDividedList = void 0;
 var react_1 = __importDefault(require("react"));
 var compact_1 = __importDefault(require("lodash/compact"));
 var intersection_1 = __importDefault(require("lodash/intersection"));
@@ -21,4 +21,12 @@ var topicLinks = function (rule, topics, Link) {
         : [];
 };
 exports.topicLinks = topicLinks;
+var ExternalLink = function (_a) {
+    var href = _a.href, content = _a.content;
+    return (react_1.default.createElement("a", { rel: "noopener noreferrer", target: "_blank", href: href },
+        content,
+        " ",
+        react_1.default.createElement("i", { className: "fas fa-external-link-alt" })));
+};
+exports.ExternalLink = ExternalLink;
 //# sourceMappingURL=common.js.map

package/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["src/common.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAC1B,2DAAqC;AACrC,qEAA+C;AAKxC,IAAM,cAAc,GAAG,UAAC,IAAmB;IAChD,OAAA,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,IAAK,OAAA,CAC3B,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK;QACvB,OAAO;QACP,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,0CAAQ,SAAS,EAAC,iBAAiB,oBAA4B,CAC9E,CAClB,EAL4B,CAK5B,CAAC;AALF,CAKE,CAAC;AANQ,QAAA,cAAc,kBAMtB;AAEE,IAAM,UAAU,GAAG,UAAC,IAAqB,EAAE,MAAmB,EAAE,IAAS;IAC9E,OAAA,MAAM;QACJ,CAAC,CAAC,IAAA,iBAAO,EACL,MAAM,CAAC,GAAG,CACR,UAAC,KAAK;YACJ,OAAA,IAAA,sBAAY,EAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,CACjE,8BAAC,IAAI,IAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,kBAAW,KAAK,CAAC,IAAI,CAAE,IAAG,UAAG,KAAK,CAAC,IAAI,CAAE,CAAQ,CAC7E;QAFD,CAEC,CACJ,CACF;QACH,CAAC,CAAC,EAAE;AATN,CASM,CAAC;AAVI,QAAA,UAAU,cAUd"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["src/common.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAC1B,2DAAqC;AACrC,qEAA+C;AAKxC,IAAM,cAAc,GAAG,UAAC,IAAmB;IAChD,OAAA,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,IAAK,OAAA,CAC3B,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,KAAK;QACvB,OAAO;QACP,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,0CAAQ,SAAS,EAAC,iBAAiB,oBAA4B,CAC9E,CAClB,EAL4B,CAK5B,CAAC;AALF,CAKE,CAAC;AANQ,QAAA,cAAc,kBAMtB;AAEE,IAAM,UAAU,GAAG,UAAC,IAAqB,EAAE,MAAmB,EAAE,IAAS;IAC9E,OAAA,MAAM;QACJ,CAAC,CAAC,IAAA,iBAAO,EACL,MAAM,CAAC,GAAG,CACR,UAAC,KAAK;YACJ,OAAA,IAAA,sBAAY,EAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,CACjE,8BAAC,IAAI,IAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,kBAAW,KAAK,CAAC,IAAI,CAAE,IAAG,UAAG,KAAK,CAAC,IAAI,CAAE,CAAQ,CAC7E;QAFD,CAEC,CACJ,CACF;QACH,CAAC,CAAC,EAAE;AATN,CASM,CAAC;AAVI,QAAA,UAAU,cAUd;AAEF,IAAM,YAAY,GAAG,UAAC,EAAoD;QAAlD,IAAI,UAAA,EAAE,OAAO,aAAA;IAA0C,OAAA,CACpF,qCAAG,GAAG,EAAC,qBAAqB,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI;QACpD,OAAO;;QAAE,qCAAG,SAAS,EAAC,0BAA0B,GAAG,CAClD,CACL;AAJqF,CAIrF,CAAC;AAJW,QAAA,YAAY,gBAIvB"}