@grafana/plugin-ui 0.1.14 → 0.1.16

package/dist/components/ConfigEditor/DataSourceDescription.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceDescription = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const css_1 = require("@emotion/css");
+const ui_1 = require("@grafana/ui");
+const DataSourceDescription = ({ dataSourceName, docsLink, hasRequiredFields = true, }) => {
+    const theme = (0, ui_1.useTheme2)();
+    const styles = {
+        text: (0, css_1.css) `
+      font-size: 14px;
+      a {
+        color: ${theme.colors.primary.text};
+        text-decoration: underline;
+        :hover {
+          text-decoration: none;
+        }
+      }
+    `,
+        asterisk: (0, css_1.css) `
+      color: ${theme.colors.error.main};
+    `,
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("p", { className: styles.text },
+            "Before you can use the ",
+            dataSourceName,
+            " data source, you must configure it below or in the config file.",
+            react_1.default.createElement("br", null),
+            "For detailed instructions,",
+            " ",
+            react_1.default.createElement("a", { href: docsLink, target: "_blank", rel: "noreferrer" }, "view the documentation"),
+            "."),
+        hasRequiredFields && (react_1.default.createElement("p", { className: styles.text },
+            react_1.default.createElement("em", null,
+                "Fields marked in ",
+                react_1.default.createElement("span", { className: styles.asterisk }, "*"),
+                " are required")))));
+};
+exports.DataSourceDescription = DataSourceDescription;
+//# sourceMappingURL=DataSourceDescription.js.map

package/dist/components/ConfigEditor/DataSourceDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataSourceDescription.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/DataSourceDescription.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,sCAAmC;AACnC,oCAAwC;AAQjC,MAAM,qBAAqB,GAAoB,CAAC,EACrD,cAAc,EACd,QAAQ,EACR,iBAAiB,GAAG,IAAI,GACzB,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAC1B,MAAM,MAAM,GAAG;QACb,IAAI,EAAE,IAAA,SAAG,EAAA;;;iBAGI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;;;;KAMrC;QACD,QAAQ,EAAE,IAAA,SAAG,EAAA;eACF,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;KACjC;KACF,CAAC;IAEF,OAAO,CACL;QACE,qCAAG,SAAS,EAAE,MAAM,CAAC,IAAI;;YACC,cAAc;;YAEtC,yCAAM;;YACqB,GAAG;YAC9B,qCAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,6BAE/C;gBAEF;QACH,iBAAiB,IAAI,CACpB,qCAAG,SAAS,EAAE,MAAM,CAAC,IAAI;YACvB;;gBACmB,wCAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,QAAU;gCAExD,CACH,CACL,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,qBAAqB,yBA4ChC"}

package/dist/components/ConfigEditor/InlineLabel.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineLabel = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const css_1 = require("@emotion/css");
+const ui_1 = require("@grafana/ui");
+const InlineLabel = (_a) => {
+    var { children, required = false } = _a, props = tslib_1.__rest(_a, ["children", "required"]);
+    const theme = (0, ui_1.useTheme2)();
+    const styles = {
+        asterisk: (0, css_1.css) `
+      color: ${theme.colors.error.main};
+    `,
+    };
+    return (react_1.default.createElement(ui_1.InlineLabel, Object.assign({}, props),
+        react_1.default.createElement("span", null,
+            children,
+            required && (react_1.default.createElement(react_1.default.Fragment, null,
+                "\u00A0",
+                react_1.default.createElement("span", { className: styles.asterisk }, "*"))))));
+};
+exports.InlineLabel = InlineLabel;
+//# sourceMappingURL=InlineLabel.js.map

package/dist/components/ConfigEditor/InlineLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineLabel.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/InlineLabel.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,sCAAmC;AACnC,oCAA4E;AAMrE,MAAM,WAAW,GAAoB,CAAC,EAI5C,EAAE,EAAE;QAJwC,EAC3C,QAAQ,EACR,QAAQ,GAAG,KAAK,OAEjB,EADI,KAAK,sBAHmC,wBAI5C,CADS;IAER,MAAM,KAAK,GAAG,IAAA,cAAS,GAAE,CAAC;IAE1B,MAAM,MAAM,GAAG;QACb,QAAQ,EAAE,IAAA,SAAG,EAAA;eACF,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;KACjC;KACF,CAAC;IAEF,OAAO,CACL,8BAAC,gBAAmB,oBAAK,KAAK;QAC5B;YACG,QAAQ;YACR,QAAQ,IAAI,CACX;;gBACQ,wCAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,QAAU,CAC/C,CACJ,CACI,CACa,CACvB,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,WAAW,eAyBtB"}

package/dist/components/ConfigEditor/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataSourceDescription = exports.InlineLabel = void 0;
+var InlineLabel_1 = require("./InlineLabel");
+Object.defineProperty(exports, "InlineLabel", { enumerable: true, get: function () { return InlineLabel_1.InlineLabel; } });
+var DataSourceDescription_1 = require("./DataSourceDescription");
+Object.defineProperty(exports, "DataSourceDescription", { enumerable: true, get: function () { return DataSourceDescription_1.DataSourceDescription; } });
+//# sourceMappingURL=index.js.map

package/dist/components/ConfigEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ConfigEditor/index.ts"],"names":[],"mappings":";;;AAAA,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AACpB,iEAAgE;AAAvD,8HAAA,qBAAqB,OAAA"}

package/dist/components/DatePickerWithInput/DatePickerWithInput.js

@@ -9,10 +9,14 @@ require("./style.css");
 const formatDate = (date) => date.toISOString().split('T')[0];
 exports.formatDate = formatDate;
 const DatePickerWithInput = (props) => {
-    const { value, onChange } = props, rest = tslib_1.__rest(props, ["value", "onChange"]);
+    const { value, onChange, className } = props, rest = tslib_1.__rest(props, ["value", "onChange", "className"]);
     const [open, setOpen] = react_1.default.useState(false);
+    let inputClassName = 'grafana-plugin-ui-date-input';
+    if (className) {
+        inputClassName += ` ${className}`;
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ui_1.Input, Object.assign({ type: 'date', placeholder: 'Date', value: (0, exports.formatDate)(value || new Date()), onClick: () => setOpen(true), onChange: () => { } }, rest)),
+        react_1.default.createElement(ui_1.Input, Object.assign({ type: 'date', placeholder: 'Date', value: (0, exports.formatDate)(value || new Date()), onClick: () => setOpen(true), onChange: () => { }, className: inputClassName }, rest)),
         react_1.default.createElement(DatePicker_1.DatePicker, { isOpen: open, value: value, onChange: (ev) => onChange(ev), onClose: () => setOpen(false) })));
 };
 exports.DatePickerWithInput = DatePickerWithInput;

package/dist/components/DatePickerWithInput/DatePickerWithInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerWithInput.js","sourceRoot":"","sources":["../../../src/components/DatePickerWithInput/DatePickerWithInput.tsx"],"names":[],"mappings":";;;;AAAA,oCAAoC;AACpC,0DAA0B;AAC1B,yDAAsD;AAEtD,uBAAqB;AAEd,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAA9D,QAAA,UAAU,cAAoD;AAQpE,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACrE,MAAM,EAAE,KAAK,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,kBAAK,KAAK,EAApC,qBAA4B,CAAQ,CAAC;IAE3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL;QACE,8BAAC,UAAK,kBACJ,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,MAAM,EAClB,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,IACd,IAAI,EACR;QACF,8BAAC,uBAAU,IACT,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,EAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAC7B,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,mBAAmB,uBAuB9B"}
+{"version":3,"file":"DatePickerWithInput.js","sourceRoot":"","sources":["../../../src/components/DatePickerWithInput/DatePickerWithInput.tsx"],"names":[],"mappings":";;;;AAAA,oCAAoC;AACpC,0DAA0B;AAC1B,yDAAsD;AAEtD,uBAAqB;AAEd,MAAM,UAAU,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAA9D,QAAA,UAAU,cAAoD;AAQpE,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IACrE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,kBAAK,KAAK,EAA/C,kCAAuC,CAAQ,CAAC;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,IAAI,cAAc,GAAG,8BAA8B,CAAA;IACnD,IAAI,SAAS,EAAE;QACb,cAAc,IAAI,IAAI,SAAS,EAAE,CAAC;KACnC;IAED,OAAO,CACL;QACE,8BAAC,UAAK,kBACJ,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,MAAM,EAClB,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAClB,SAAS,EAAE,cAAc,IACrB,IAAI,EACR;QACF,8BAAC,uBAAU,IACT,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,EAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAC7B,CACD,CACJ,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,mBAAmB,uBA4B9B"}

package/dist/components/DatePickerWithInput/style.css

@@ -1,6 +1,8 @@
 /* hides the native Calendar picker icon given when using type=date */
-input[type='date']::-webkit-inner-spin-button,
-input[type='date']::-webkit-calendar-picker-indicator {
+.grafana-plugin-ui-date-input input[type='date']::-webkit-inner-spin-button,
+.grafana-plugin-ui-date-input input[type='date']::-webkit-calendar-picker-indicator,
+input.grafana-plugin-ui-date-input[type='date']::-webkit-inner-spin-button,
+input.grafana-plugin-ui-date-input[type='date']::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
 }

package/dist/components/index.js

@@ -22,6 +22,7 @@ var ui_1 = require("@grafana/ui");
 Object.defineProperty(exports, "InlineSwitch", { enumerable: true, get: function () { return ui_1.InlineSwitch; } });
 Object.defineProperty(exports, "CertificationKey", { enumerable: true, get: function () { return ui_1.CertificationKey; } });
 tslib_1.__exportStar(require("./QueryEditor"), exports);
+tslib_1.__exportStar(require("./ConfigEditor"), exports);
 var CustomHeadersSettings_1 = require("./CustomHeadersSettings/CustomHeadersSettings");
 Object.defineProperty(exports, "CustomHeadersSettings", { enumerable: true, get: function () { return CustomHeadersSettings_1.CustomHeadersSettings; } });
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;AAAA,iFAAgF;AAAvE,0HAAA,mBAAmB,OAAA;AAC5B,kEAAiE;AAAxD,gHAAA,cAAc,OAAA;AACvB,+DAGuC;AAFrC,8GAAA,aAAa,OAAA;AAGf,6CAG2B;AAFzB,kGAAA,OAAO,OAAA;AAGT,sDAAsE;AAA7D,wGAAA,UAAU,OAAA;AACnB,iFAImD;AAHjD,0HAAA,mBAAmB,OAAA;AAEnB,iHAAA,UAAU,OAAA;AAEZ,8EAAoD;AACpD,sDAA4B;AAC5B,8DAAoC;AACpC,kCAA6D;AAApD,kGAAA,YAAY,OAAA;AAAE,sGAAA,gBAAgB,OAAA;AACvC,wDAA8B;AAC9B,uFAAsF;AAA7E,8HAAA,qBAAqB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;AAAA,iFAAgF;AAAvE,0HAAA,mBAAmB,OAAA;AAC5B,kEAAiE;AAAxD,gHAAA,cAAc,OAAA;AACvB,+DAGuC;AAFrC,8GAAA,aAAa,OAAA;AAGf,6CAG2B;AAFzB,kGAAA,OAAO,OAAA;AAGT,sDAAsE;AAA7D,wGAAA,UAAU,OAAA;AACnB,iFAImD;AAHjD,0HAAA,mBAAmB,OAAA;AAEnB,iHAAA,UAAU,OAAA;AAEZ,8EAAoD;AACpD,sDAA4B;AAC5B,8DAAoC;AACpC,kCAA6D;AAApD,kGAAA,YAAY,OAAA;AAAE,sGAAA,gBAAgB,OAAA;AACvC,wDAA8B;AAC9B,yDAA+B;AAC/B,uFAAsF;AAA7E,8HAAA,qBAAqB,OAAA"}

package/dist/src/components/ConfigEditor/DataSourceDescription.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare type Props = {
+    dataSourceName: string;
+    docsLink: string;
+    hasRequiredFields?: boolean;
+};
+export declare const DataSourceDescription: React.FC<Props>;
+export {};

package/dist/src/components/ConfigEditor/InlineLabel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { InlineLabel as OriginalInlineLabel } from "@grafana/ui";
+declare type Props = React.ComponentProps<typeof OriginalInlineLabel> & {
+    required?: boolean;
+};
+export declare const InlineLabel: React.FC<Props>;
+export {};

package/dist/src/components/ConfigEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { InlineLabel } from "./InlineLabel";
+export { DataSourceDescription } from "./DataSourceDescription";

package/dist/src/components/index.d.ts

@@ -9,4 +9,5 @@ export * from './DataLinks';
 export * from './Cascader/Cascader';
 export { InlineSwitch, CertificationKey } from '@grafana/ui';
 export * from './QueryEditor';
+export * from './ConfigEditor';
 export { CustomHeadersSettings } from './CustomHeadersSettings/CustomHeadersSettings';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "repository": "git@github.com:grafana/plugin-ui.git",
   "author": "Grafana Labs",
   "main": "dist/index.js",