diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9826f59..e1c57e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,18 @@
All notable changes to this project will be documented in this file.
-## v1.8
+## v2.0.0
- Auth: Refactoring and renaming some inputs so this can be a breaking change
+## v1.8.0
+
+- Auth: add ability to customize labels and placeholders for user/password fields
+
+## v1.7.13
+
+- Switched from "react-beautiful-dnd" to "@hello-pangea/dnd"
+
## v1.7.12
- Auth: Fix "TLS Client Authentication" fields are not being cleared when setting is toggled off
diff --git a/package.json b/package.json
index 53c946a..18d2b53 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@grafana/experimental",
- "version": "1.8",
+ "version": "2.0.0",
"description": "Experimental Grafana components and APIs",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
@@ -53,7 +53,6 @@
"@types/node": "10.14.1",
"@types/prismjs": "^1.26.3",
"@types/react": "^17.0.0",
- "@types/react-beautiful-dnd": "^13.1.7",
"@types/react-test-renderer": "^17.0.1",
"@typescript-eslint/eslint-plugin": "^5.59.2",
"esbuild": "0.16.17",
@@ -77,10 +76,10 @@
"typescript": "^4.5.2"
},
"dependencies": {
+ "@hello-pangea/dnd": "^16.6.0",
"@types/uuid": "^8.3.3",
"lodash": "^4.17.21",
"prismjs": "^1.29.0",
- "react-beautiful-dnd": "^13.1.1",
"react-popper-tooltip": "^4.4.2",
"react-use": "^17.4.2",
"semver": "^7.5.4",
diff --git a/src/ConfigEditor/Auth/auth-method/BasicAuth.test.tsx b/src/ConfigEditor/Auth/auth-method/BasicAuth.test.tsx
index 2fdf3b8..0855c84 100644
--- a/src/ConfigEditor/Auth/auth-method/BasicAuth.test.tsx
+++ b/src/ConfigEditor/Auth/auth-method/BasicAuth.test.tsx
@@ -83,4 +83,17 @@ describe('', () => {
expect(screen.getByPlaceholderText('User')).toBeDisabled();
expect(screen.getByPlaceholderText('Password')).toBeDisabled();
});
+
+ it('should render custom username and password labels and placeholders', () => {
+ const props = getProps({
+ userLabel: 'user-test-label',
+ userPlaceholder: 'user-test-placeholder',
+ passwordLabel: 'pwd-test-label',
+ passwordPlaceholder: 'pwd-test-placeholder',
+ });
+ render();
+
+ expect(screen.getByLabelText('user-test-label *')).toHaveAttribute('placeholder', 'user-test-placeholder');
+ expect(screen.getByLabelText('pwd-test-label *')).toHaveAttribute('placeholder', 'pwd-test-placeholder');
+ });
});
diff --git a/src/ConfigEditor/Auth/auth-method/BasicAuth.tsx b/src/ConfigEditor/Auth/auth-method/BasicAuth.tsx
index 18eb578..9efec46 100644
--- a/src/ConfigEditor/Auth/auth-method/BasicAuth.tsx
+++ b/src/ConfigEditor/Auth/auth-method/BasicAuth.tsx
@@ -6,8 +6,12 @@ import { useCommonStyles } from '../styles';
export type Props = {
user?: string;
passwordConfigured: boolean;
+ userLabel?: string;
userTooltip?: PopoverContent;
+ userPlaceholder?: string;
+ passwordLabel?: string;
passwordTooltip?: PopoverContent;
+ passwordPlaceholder?: string;
onUserChange: (user: string) => void;
onPasswordChange: (password: string) => void;
onPasswordReset: () => void;
@@ -17,8 +21,12 @@ export type Props = {
export const BasicAuth: React.FC = ({
user,
passwordConfigured,
+ userLabel = 'User',
userTooltip = 'The username of the data source account',
+ userPlaceholder = 'User',
+ passwordLabel = 'Password',
passwordTooltip = 'The password of the data source account',
+ passwordPlaceholder = 'Password',
onUserChange,
onPasswordChange,
onPasswordReset,
@@ -34,7 +42,7 @@ export const BasicAuth: React.FC = ({
<>
= ({
>
onUserChange(e.currentTarget.value)}
required
@@ -57,7 +65,7 @@ export const BasicAuth: React.FC = ({
commonStyles.inlineFieldWithSecret,
styles.lastInlineField
)}
- label="Password"
+ label={passwordLabel}
labelWidth={24}
tooltip={passwordTooltip}
required
@@ -70,7 +78,7 @@ export const BasicAuth: React.FC = ({
id="basic-auth-password-input"
isConfigured={passwordConfigured}
onReset={readOnly ? () => {} : onPasswordReset}
- placeholder="Password"
+ placeholder={passwordPlaceholder}
onChange={(e) => onPasswordChange(e.currentTarget.value)}
required
/>
diff --git a/src/VisualQueryBuilder/components/OperationEditor.tsx b/src/VisualQueryBuilder/components/OperationEditor.tsx
index 6d0beeb..3964049 100644
--- a/src/VisualQueryBuilder/components/OperationEditor.tsx
+++ b/src/VisualQueryBuilder/components/OperationEditor.tsx
@@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css';
import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
import { DataSourceApi, GrafanaTheme2, TimeRange } from '@grafana/data';
import { InlineField, useTheme2 } from '@grafana/ui';
diff --git a/src/VisualQueryBuilder/components/OperationEditorBody.tsx b/src/VisualQueryBuilder/components/OperationEditorBody.tsx
index 5a5838c..3fabe68 100644
--- a/src/VisualQueryBuilder/components/OperationEditorBody.tsx
+++ b/src/VisualQueryBuilder/components/OperationEditorBody.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
-import { DraggableProvided } from 'react-beautiful-dnd';
+import { DraggableProvided } from '@hello-pangea/dnd';
import { Button, Icon, Tooltip, useTheme2 } from '@grafana/ui';
import { css, cx } from '@emotion/css';
import { DataSourceApi, GrafanaTheme2, TimeRange } from '@grafana/data';
diff --git a/src/VisualQueryBuilder/components/OperationHeader.tsx b/src/VisualQueryBuilder/components/OperationHeader.tsx
index 5e7a8e3..a1288c8 100644
--- a/src/VisualQueryBuilder/components/OperationHeader.tsx
+++ b/src/VisualQueryBuilder/components/OperationHeader.tsx
@@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import React, { useState } from 'react';
-import { DraggableProvided } from 'react-beautiful-dnd';
+import { DraggableProvided } from '@hello-pangea/dnd';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, Select, useStyles2 } from '@grafana/ui';
diff --git a/src/VisualQueryBuilder/components/OperationList.tsx b/src/VisualQueryBuilder/components/OperationList.tsx
index 6bc0c39..1f2b821 100644
--- a/src/VisualQueryBuilder/components/OperationList.tsx
+++ b/src/VisualQueryBuilder/components/OperationList.tsx
@@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import React, { useState } from 'react';
-import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
import { useMountedState, usePrevious } from 'react-use';
import { DataSourceApi, GrafanaTheme2, TimeRange } from '@grafana/data';
diff --git a/yarn.lock b/yarn.lock
index 8b0660f..e1b636b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -280,6 +280,13 @@
dependencies:
regenerator-runtime "^0.13.11"
+"@babel/runtime@^7.24.1":
+ version "7.24.8"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
+ integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/template@^7.20.7", "@babel/template@^7.3.3":
version "7.20.7"
resolved "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz"
@@ -818,6 +825,19 @@
uplot "1.6.24"
uuid "9.0.0"
+"@hello-pangea/dnd@^16.6.0":
+ version "16.6.0"
+ resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.6.0.tgz#7509639c7bd13f55e537b65a9dcfcd54e7c99ac7"
+ integrity sha512-vfZ4GydqbtUPXSLfAvKvXQ6xwRzIjUSjVU0Sx+70VOhc2xx6CdmJXJ8YhH70RpbTUGjxctslQTHul9sIOxCfFQ==
+ dependencies:
+ "@babel/runtime" "^7.24.1"
+ css-box-model "^1.2.1"
+ memoize-one "^6.0.0"
+ raf-schd "^4.0.3"
+ react-redux "^8.1.3"
+ redux "^4.2.1"
+ use-memo-one "^1.1.3"
+
"@humanwhocodes/config-array@^0.11.10":
version "0.11.10"
resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz"
@@ -1900,6 +1920,14 @@
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
+"@types/hoist-non-react-statics@^3.3.1":
+ version "3.3.5"
+ resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+ integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
+ dependencies:
+ "@types/react" "*"
+ hoist-non-react-statics "^3.3.0"
+
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
version "2.0.4"
resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz"
@@ -1984,13 +2012,6 @@
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
-"@types/react-beautiful-dnd@^13.1.7":
- version "13.1.7"
- resolved "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.7.tgz"
- integrity sha512-jQZLov9OkD0xRQkqz8/lx66bHYAYv+g4+POBqnH5Jtt/xo4MygzM879Q9sxAiosPBdNj1JYTdbPxDn3dNRYgow==
- dependencies:
- "@types/react" "*"
-
"@types/react-dom@>=16.9.0":
version "18.2.4"
resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz"
@@ -2068,6 +2089,11 @@
resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz"
integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
+"@types/use-sync-external-store@^0.0.3":
+ version "0.0.3"
+ resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+ integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
"@types/uuid@^8.3.3":
version "8.3.4"
resolved "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz"
@@ -2740,9 +2766,9 @@ css-animation@^1.3.2:
babel-runtime "6.x"
component-classes "^1.2.5"
-css-box-model@^1.2.0:
+css-box-model@^1.2.0, css-box-model@^1.2.1:
version "1.2.1"
- resolved "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz"
+ resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
dependencies:
tiny-invariant "^1.0.6"
@@ -5610,9 +5636,9 @@ quickselect@^2.0.0:
resolved "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz"
integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==
-raf-schd@^4.0.2:
+raf-schd@^4.0.2, raf-schd@^4.0.3:
version "4.0.3"
- resolved "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz"
+ resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
raf@^3.1.0, raf@^3.4.0, raf@^3.4.1:
@@ -5822,7 +5848,7 @@ rc-virtual-list@^3.4.13, rc-virtual-list@^3.4.8:
rc-resize-observer "^1.0.0"
rc-util "^5.15.0"
-react-beautiful-dnd@13.1.1, react-beautiful-dnd@^13.1.1:
+react-beautiful-dnd@13.1.1:
version "13.1.1"
resolved "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz"
integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
@@ -5980,6 +6006,18 @@ react-redux@^7.2.0:
prop-types "^15.7.2"
react-is "^17.0.2"
+react-redux@^8.1.3:
+ version "8.1.3"
+ resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.3.tgz#4fdc0462d0acb59af29a13c27ffef6f49ab4df46"
+ integrity sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==
+ dependencies:
+ "@babel/runtime" "^7.12.1"
+ "@types/hoist-non-react-statics" "^3.3.1"
+ "@types/use-sync-external-store" "^0.0.3"
+ hoist-non-react-statics "^3.3.2"
+ react-is "^18.0.0"
+ use-sync-external-store "^1.0.0"
+
react-router-dom@5.3.3:
version "5.3.3"
resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.3.tgz"
@@ -6133,9 +6171,9 @@ redent@^3.0.0:
indent-string "^4.0.0"
strip-indent "^3.0.0"
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.0.0, redux@^4.0.4, redux@^4.2.1:
version "4.2.1"
- resolved "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz"
+ resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
dependencies:
"@babel/runtime" "^7.9.2"
@@ -6150,6 +6188,11 @@ regenerator-runtime@^0.11.0:
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+regenerator-runtime@^0.14.0:
+ version "0.14.1"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+ integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0:
version "1.5.0"
resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz"
@@ -6966,11 +7009,16 @@ use-isomorphic-layout-effect@^1.1.2:
resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz"
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
-use-memo-one@^1.1.1:
+use-memo-one@^1.1.1, use-memo-one@^1.1.3:
version "1.1.3"
- resolved "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz"
+ resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
+use-sync-external-store@^1.0.0:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
+ integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
+
uuid@9.0.0:
version "9.0.0"
resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz"