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"