@grafana/plugin-ui 0.11.1 → 0.12.1

package/README.md

@@ -2,6 +2,25 @@
 
 React components for Grafana plugins
 
+## Development
+Requires running a local version of Grafana from source.
+### Setting up local version of @grafana/plugin-ui with app plugin
+
+1. Run `yarn install && yarn dev`
+1. Run `yarn link ../path/to/plugin-ui` from app plugin directory. Make sure not to commit the changes to grafana/grafana that are introduced to the package.json.
+1. Start app plugin development server.
+
+To avoid needing to manually rebuild core grafana on every change you make in this repo while developing, instead of running `yarn dev`, run
+```bash
+yarn tsc -p ./tsconfig.build.json && yarn rollup -c rollup.config.ts --configPlugin esbuild -w --watch.onEnd="cd ../grafana/public/app/plugins/datasource/loki && yarn build
+```
+Replacing the --watch.onEnd command with whatever you are targeting.
+
+There is a better way of doing this, when you find it, please add it here so it's not so painful working with this repo.
+
+## Deploying
+Increment the version in the package.json and make sure the [CHANGELOG.md](CHANGELOG.md) includes a message for each merged PR. The `publish-npm` workflow should trigger on version changes, which will publish the release on npm.
+
 ## Grafana compatibility
 
 Plugin-ui@0.9.0 is compatible with Grafana versions 10.4.0 and higher. If the `grafanaDependency` field in your plugin.json file is set to an earlier version, you should amend it to `>=10.4.0`
@@ -9,6 +28,7 @@ When you do that, consider also incrementing your plugin's major version to make
 
 ## Storybook
 
+Storybook is pretty broken, components link to assets that only exist within Grafana, as such most components haven't bothered to add support for storybook.
 ```
 yarn storybook
 ```

package/dist/cjs/index.cjs

@@ -2920,7 +2920,7 @@ function useLatestCallback(callback) {
   });
   const hasCallback = Boolean(callback);
   return React.useMemo(
-    () => hasCallback ? (...args) => ref.current(...args) : undefined,
+    () => hasCallback ? ((...args) => ref.current(...args)) : undefined,
     [hasCallback]
   );
 }
@@ -10106,8 +10106,10 @@ function QueryOptionGroup({ title, children, collapsedInfo, queryStats }) {
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.body, children })
       }
     ),
-    queryStats && runtime.config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" }) }),
-    queryStats && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.stats, children: generateQueryStats(queryStats) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.queryStatsWrap, children: [
+      queryStats && runtime.config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" }) }),
+      queryStats && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.stats, children: generateQueryStats(queryStats) })
+    ] })
   ] });
 }
 const getStyles = (theme) => {
@@ -10146,6 +10148,13 @@ const getStyles = (theme) => {
       gap: theme.spacing(2),
       flexWrap: "wrap"
     }),
+    queryStatsWrap: css.css({
+      display: "flex",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      label: "query-stats-wrap",
+      padding: theme.spacing(1)
+    }),
     stats: css.css({
       margin: "0px",
       color: theme.colors.text.secondary,