Merge branch 'main' into auth-improvements

grafana · Sep 5, 2024 · 52dabc7 · 52dabc7
2 parents b51931d + 701bcd8
commit 52dabc7
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 28 deletions.
diff --git 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
@@ -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
@@ -83,4 +83,17 @@ describe('<BasicAuth />', () => {
     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(<BasicAuth {...props} />);
+
+    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
@@ -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<Props> = ({
   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<Props> = ({
     <>
       <InlineField
         className={commonStyles.inlineFieldNoMarginRight}
-        label="User"
+        label={userLabel}
         labelWidth={24}
         tooltip={userTooltip}
         required
@@ -45,7 +53,7 @@ export const BasicAuth: React.FC<Props> = ({
       >
         <Input
           id="basic-auth-user-input"
-          placeholder="User"
+          placeholder={userPlaceholder}
           value={user}
           onChange={(e) => onUserChange(e.currentTarget.value)}
           required
@@ -57,7 +65,7 @@ export const BasicAuth: React.FC<Props> = ({
           commonStyles.inlineFieldWithSecret,
           styles.lastInlineField
         )}
-        label="Password"
+        label={passwordLabel}
         labelWidth={24}
         tooltip={passwordTooltip}
         required
@@ -70,7 +78,7 @@ export const BasicAuth: React.FC<Props> = ({
           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"