From bd6fb2ece8091ac11b98ec6377f07bfedd4b27bc Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Thu, 2 Nov 2023 11:04:36 +0200 Subject: [PATCH 01/67] wip columns selector --- grafana-plugin/src/assets/style/utils.css | 27 +++++++ .../CustomContextMenuDisplay.tsx | 49 ++++++++++++ .../WithContextMenu/WithContextMenu.tsx | 3 + .../src/pages/incidents/Incidents.module.scss | 21 ++++- .../src/pages/incidents/Incidents.tsx | 80 +++++++++++++++++-- .../outgoing_webhooks/OutgoingWebhooks.tsx | 14 +++- 6 files changed, 186 insertions(+), 8 deletions(-) create mode 100644 grafana-plugin/src/components/CustomContextMenuDisplay/CustomContextMenuDisplay.tsx diff --git a/grafana-plugin/src/assets/style/utils.css b/grafana-plugin/src/assets/style/utils.css index bbcc0df930..30fc55febb 100644 --- a/grafana-plugin/src/assets/style/utils.css +++ b/grafana-plugin/src/assets/style/utils.css @@ -150,3 +150,30 @@ .line-clamp-3 { -webkit-line-clamp: 3; } + +/* ---- + * Hamburger Menu + */ + +.hamburgerMenu { + cursor: pointer; + color: var(--primary-text-color); + display: inline-flex; + flex-direction: column; + align-items: center; + vertical-align: middle; + justify-content: center; + padding: 4px; + + &--withBackground { + height: 32px; + width: 30px; + cursor: pointer; + } + + &--small { + height: 24px; + width: 22px; + cursor: pointer; + } +} diff --git a/grafana-plugin/src/components/CustomContextMenuDisplay/CustomContextMenuDisplay.tsx b/grafana-plugin/src/components/CustomContextMenuDisplay/CustomContextMenuDisplay.tsx new file mode 100644 index 0000000000..0abe1cf760 --- /dev/null +++ b/grafana-plugin/src/components/CustomContextMenuDisplay/CustomContextMenuDisplay.tsx @@ -0,0 +1,49 @@ +import React, { useRef } from 'react'; + +interface CustomContextMenuDisplayProps { + openMenu: React.MouseEventHandler; + listWidth: number; + listBorder: number; + stopPropagation?: boolean; + withBackground?: boolean; + baseClassName?: string; + extraClassName?: string; + children: React.ReactNode; +} + +const CustomContextMenuDisplay: React.FC = (props) => { + const ref = useRef(); + const { + openMenu, + children, + listWidth, + listBorder, + withBackground, + baseClassName, + extraClassName, + stopPropagation = false, + } = props; + + return ( +
{ + if (stopPropagation) { + e.stopPropagation(); + } + + const boundingRect = ref.current.getBoundingClientRect(); + + openMenu({ + pageX: boundingRect.right - listWidth + listBorder * 2, + pageY: boundingRect.top + boundingRect.height, + } as any); + }} + > + {children} +
+ ); +}; + +export default CustomContextMenuDisplay; diff --git a/grafana-plugin/src/components/WithContextMenu/WithContextMenu.tsx b/grafana-plugin/src/components/WithContextMenu/WithContextMenu.tsx index a5fe4ab2c7..8a27ba357c 100644 --- a/grafana-plugin/src/components/WithContextMenu/WithContextMenu.tsx +++ b/grafana-plugin/src/components/WithContextMenu/WithContextMenu.tsx @@ -40,6 +40,9 @@ export const WithContextMenu: React.FC = ({
{children({ openMenu: (e) => { + console.log('Should trigger'); + console.log({ x: e.pageX, y: e.pageY }); + setIsMenuOpen(true); setMenuPosition({ x: e.pageX, diff --git a/grafana-plugin/src/pages/incidents/Incidents.module.scss b/grafana-plugin/src/pages/incidents/Incidents.module.scss index b540eee5ee..e046bc787f 100644 --- a/grafana-plugin/src/pages/incidents/Incidents.module.scss +++ b/grafana-plugin/src/pages/incidents/Incidents.module.scss @@ -17,8 +17,15 @@ align-items: center; } -.bulk-actions { +.bulk-actions-container { margin: 10px 0 10px 0; + display: flex; + width: 100%; +} +.bulk-actions-list { + display: flex; + align-items: center; + gap: 8px; } .other-users { @@ -76,3 +83,15 @@ max-width: 100%; } } + +.columns-selector-container { + margin-left: auto; +} + +.columns-selector-view {} +.columns-visible-section {} +.columns-hidden-section {} +.columns-selector-buttons { + display: flex; + align-items: flex-end; +} \ No newline at end of file diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx index 8dc34b7dca..045fd659e4 100644 --- a/grafana-plugin/src/pages/incidents/Incidents.tsx +++ b/grafana-plugin/src/pages/incidents/Incidents.tsx @@ -1,6 +1,6 @@ -import React, { SyntheticEvent } from 'react'; +import React, { SyntheticEvent, useState } from 'react'; -import { Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui'; +import { Button, Checkbox, HorizontalGroup, Icon, VerticalGroup, WithContextMenu } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; import moment from 'moment-timezone'; @@ -32,6 +32,7 @@ import { PAGE, PLUGIN_ROOT, TEXT_ELLIPSIS_CLASS } from 'utils/consts'; import styles from './Incidents.module.scss'; import { IncidentDropdown } from './parts/IncidentDropdown'; import { SilenceButtonCascader } from './parts/SilenceButtonCascader'; +import CustomContextMenuDisplay from 'components/CustomContextMenuDisplay/CustomContextMenuDisplay'; const cx = cn.bind(styles); @@ -371,8 +372,8 @@ class Incidents extends React.Component return (
-
- +
+
{'resolve' in store.alertGroupStore.bulkActions && (
+ +
+ }> + {({ openMenu }) => ( + + + + )} + +
+ {hasInvalidatedAlert && (
Results out of date @@ -757,4 +780,51 @@ class Incidents extends React.Component } } +interface Column { + name: string; + isHidden?: boolean; + icon?: string; +} + +const startingColumnsData: Column[] = [ + { name: 'Status' }, + { name: 'ID' }, + { name: 'Summary' }, + { name: 'Integration' }, + { name: 'Users' }, + { name: 'Team' }, + { name: 'Cortex' }, + { name: 'Created' }, +]; + +const ColumnSelector: React.FC = () => { + const [columns, _setColumns] = useState(startingColumnsData); + + return ( +
+ Fields Settings + +
+ Visible + {columns.map((col) => ( + + + + ))} +
+ +
+ Hidden +
+ +
+ + +
+
+ ); +}; + export default withRouter(withMobXProviderContext(Incidents)); diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index 825a423287..bd3292355f 100644 --- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx @@ -18,7 +18,6 @@ import CopyToClipboard from 'react-copy-to-clipboard'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import GTable from 'components/GTable/GTable'; -import HamburgerMenu from 'components/HamburgerMenu/HamburgerMenu'; import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { getWrongTeamResponseInfo, @@ -41,6 +40,7 @@ import { PAGE, PLUGIN_ROOT, TEXT_ELLIPSIS_CLASS } from 'utils/consts'; import styles from './OutgoingWebhooks.module.scss'; import { WebhookFormActionType } from './OutgoingWebhooks.types'; +import CustomContextMenuDisplay from 'components/CustomContextMenuDisplay/CustomContextMenuDisplay'; const cx = cn.bind(styles); @@ -332,7 +332,17 @@ class OutgoingWebhooks extends React.Component )} > - {({ openMenu }) => } + {({ openMenu }) => ( + + + + )} ); }; From 8070b0d3ed2ebb18d6838d6008ec4a4e34b7d68a Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Thu, 2 Nov 2023 18:15:58 +0200 Subject: [PATCH 02/67] WIP drag&drop on the columns --- grafana-plugin/package.json | 5 +- .../src/components/CheatSheet/CheatSheet.tsx | 4 +- .../IntegrationCollapsibleTreeView.tsx | 2 +- .../IntegrationContactPoint.tsx | 2 + .../IntegrationInputField.tsx | 6 +- .../components/Policy/NotificationPolicy.tsx | 1 + .../ScheduleQualityDetails.tsx | 6 +- .../src/components/SourceCode/SourceCode.tsx | 2 +- .../UserGroups/UserGroups.module.css | 12 - .../src/components/UserGroups/UserGroups.tsx | 9 +- .../WithContextMenu/WithContextMenu.tsx | 17 +- .../IncidentsFilters/IncidentsFilters.tsx | 2 +- .../containers/RotationForm/RotationForm.tsx | 2 +- .../RotationForm/ScheduleOverrideForm.tsx | 2 +- .../containers/RotationForm/ShiftSwapForm.tsx | 2 +- .../src/containers/TeamsList/TeamsList.tsx | 2 +- .../TemplatesAlertGroupsList.tsx | 8 +- .../src/pages/incident/Incident.tsx | 4 +- .../src/pages/incidents/ColumnsSelector.tsx | 79 ++++ .../src/pages/incidents/Incidents.module.scss | 32 +- .../src/pages/incidents/Incidents.tsx | 81 +--- .../src/pages/integration/Integration.tsx | 2 +- .../src/pages/schedule/Schedule.tsx | 2 +- .../src/pages/schedules/Schedules.module.css | 4 + grafana-plugin/yarn.lock | 404 ++++++++++++------ 25 files changed, 458 insertions(+), 234 deletions(-) create mode 100644 grafana-plugin/src/pages/incidents/ColumnsSelector.tsx diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index e3b7d1c1e3..3a20c29cf4 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -110,12 +110,15 @@ "node": ">=14" }, "dependencies": { + "@dnd-kit/core": "^6.0.8", + "@dnd-kit/sortable": "^7.0.2", + "@dnd-kit/utilities": "^3.2.1", "@grafana/data": "^9.2.4", "@grafana/faro-web-sdk": "^1.0.0-beta4", "@grafana/faro-web-tracing": "^1.0.0-beta4", "@grafana/labels": "~1.2.1", "@grafana/runtime": "9.3.0-beta1", - "@grafana/ui": "^9.4.7", + "@grafana/ui": "^10.2.0", "@opentelemetry/api": "^1.3.0", "array-move": "^4.0.0", "change-case": "^4.1.1", diff --git a/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx b/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx index 85329a4fbd..194f70ec51 100644 --- a/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx +++ b/grafana-plugin/src/components/CheatSheet/CheatSheet.tsx @@ -27,7 +27,7 @@ const CheatSheet = (props: CheatSheetProps) => { {cheatSheetName} cheatsheet - + {cheatSheetData.description}
@@ -70,7 +70,7 @@ const CheatSheetListItem = (props: CheatSheetListItemProps) => { {item.codeExample} openNotification('Example copied')}> - + diff --git a/grafana-plugin/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.tsx b/grafana-plugin/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.tsx index 97c0e7c496..971f132095 100644 --- a/grafana-plugin/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.tsx +++ b/grafana-plugin/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.tsx @@ -112,7 +112,7 @@ const IntegrationCollapsibleTreeItem: React.FC<{
{item.canHoverIcon ? ( - + ) : ( )} diff --git a/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx b/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx index 7454403a72..8eea8856dd 100644 --- a/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx +++ b/grafana-plugin/src/components/IntegrationContactPoint/IntegrationContactPoint.tsx @@ -256,6 +256,7 @@ const IntegrationContactPoint: React.FC<{ return ( { window.open( @@ -277,6 +278,7 @@ const IntegrationContactPoint: React.FC<{ } > { alertReceiveChannelStore diff --git a/grafana-plugin/src/components/IntegrationInputField/IntegrationInputField.tsx b/grafana-plugin/src/components/IntegrationInputField/IntegrationInputField.tsx index b255fa6073..8047ad542c 100644 --- a/grafana-plugin/src/components/IntegrationInputField/IntegrationInputField.tsx +++ b/grafana-plugin/src/components/IntegrationInputField/IntegrationInputField.tsx @@ -35,13 +35,13 @@ const IntegrationInputField: React.FC = ({
- {showEye && } + {showEye && } {showCopy && ( - + )} - {showExternal && } + {showExternal && }
diff --git a/grafana-plugin/src/components/Policy/NotificationPolicy.tsx b/grafana-plugin/src/components/Policy/NotificationPolicy.tsx index fd90261b84..4a6c9d84f7 100644 --- a/grafana-plugin/src/components/Policy/NotificationPolicy.tsx +++ b/grafana-plugin/src/components/Policy/NotificationPolicy.tsx @@ -72,6 +72,7 @@ export class NotificationPolicy extends React.Component = ({ qualit Calculation methodology - + {expanded && ( diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx index ecc27c61f1..de316ee65e 100644 --- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx +++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx @@ -33,7 +33,7 @@ const SourceCode: FC = (props) => { > {showClipboardIconOnly ? ( - + ) : (
diff --git a/grafana-plugin/src/pages/incidents/ColumnsSelector.tsx b/grafana-plugin/src/pages/incidents/ColumnsSelector.tsx index e4d4698c25..dc6cad96a5 100644 --- a/grafana-plugin/src/pages/incidents/ColumnsSelector.tsx +++ b/grafana-plugin/src/pages/incidents/ColumnsSelector.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import cn from 'classnames/bind'; + import { DndContext, closestCenter, @@ -16,12 +16,12 @@ import { verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable'; - import { CSS } from '@dnd-kit/utilities'; +import { Button, Checkbox, IconButton } from '@grafana/ui'; +import cn from 'classnames/bind'; -import styles from 'pages/incidents/ColumnsSelector.module.scss'; import Text from 'components/Text/Text'; -import { Button, Checkbox, IconButton } from '@grafana/ui'; +import styles from 'pages/incidents/ColumnsSelector.module.scss'; const cx = cn.bind(styles); diff --git a/grafana-plugin/src/pages/incidents/ColumnsSelectorWrapper.tsx b/grafana-plugin/src/pages/incidents/ColumnsSelectorWrapper.tsx index 58881d68a5..72beb5d59a 100644 --- a/grafana-plugin/src/pages/incidents/ColumnsSelectorWrapper.tsx +++ b/grafana-plugin/src/pages/incidents/ColumnsSelectorWrapper.tsx @@ -1,5 +1,10 @@ -import { Button, HorizontalGroup, Icon, Modal, Toggletip } from '@grafana/ui'; import React, { useState } from 'react'; + +import { Button, HorizontalGroup, Icon, Input, Modal, Toggletip, VerticalGroup } from '@grafana/ui'; +import { noop } from 'lodash-es'; + +import Text from 'components/Text/Text'; + import { ColumnsSelector } from './ColumnsSelector'; interface ColumnsSelectorWrapperProps {} @@ -10,10 +15,16 @@ const ColumnsSelectorWrapper: React.FC = () => { return ( <> setIsModalOpen(false)}> - - - - + + + + 2101 items available. Type in to see suggestions + + + + + + {!isModalOpen ? ( diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx index d85b53bf3d..7b650c50eb 100644 --- a/grafana-plugin/src/pages/incidents/Incidents.tsx +++ b/grafana-plugin/src/pages/incidents/Incidents.tsx @@ -29,12 +29,11 @@ import LocationHelper from 'utils/LocationHelper'; import { UserActions } from 'utils/authorization'; import { PAGE, PLUGIN_ROOT, TEXT_ELLIPSIS_CLASS } from 'utils/consts'; +import ColumnsSelectorWrapper from './ColumnsSelectorWrapper'; import styles from './Incidents.module.scss'; import { IncidentDropdown } from './parts/IncidentDropdown'; import { SilenceButtonCascader } from './parts/SilenceButtonCascader'; -import ColumnsSelectorWrapper from './ColumnsSelectorWrapper'; - const cx = cn.bind(styles); interface Pagination { diff --git a/grafana-plugin/src/pages/integration/Integration.tsx b/grafana-plugin/src/pages/integration/Integration.tsx index 929fa2ca24..501b175927 100644 --- a/grafana-plugin/src/pages/integration/Integration.tsx +++ b/grafana-plugin/src/pages/integration/Integration.tsx @@ -180,7 +180,7 @@ class Integration extends React.Component {
- +

diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index bd3292355f..07d2a6259d 100644 --- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx @@ -17,6 +17,7 @@ import LegacyNavHeading from 'navbar/LegacyNavHeading'; import CopyToClipboard from 'react-copy-to-clipboard'; import { RouteComponentProps, withRouter } from 'react-router-dom'; +import CustomContextMenuDisplay from 'components/CustomContextMenuDisplay/CustomContextMenuDisplay'; import GTable from 'components/GTable/GTable'; import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { @@ -40,7 +41,6 @@ import { PAGE, PLUGIN_ROOT, TEXT_ELLIPSIS_CLASS } from 'utils/consts'; import styles from './OutgoingWebhooks.module.scss'; import { WebhookFormActionType } from './OutgoingWebhooks.types'; -import CustomContextMenuDisplay from 'components/CustomContextMenuDisplay/CustomContextMenuDisplay'; const cx = cn.bind(styles); diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx index d092bd1b9b..3381311e0b 100644 --- a/grafana-plugin/src/pages/schedule/Schedule.tsx +++ b/grafana-plugin/src/pages/schedule/Schedule.tsx @@ -185,7 +185,7 @@ class SchedulePage extends React.Component
- + Date: Mon, 6 Nov 2023 17:05:57 +0200 Subject: [PATCH 07/67] removed react-dnd --- grafana-plugin/package.json | 2 - .../src/containers/Labels/Labels.module.css | 2 - grafana-plugin/yarn.lock | 49 ------------------- 3 files changed, 53 deletions(-) delete mode 100644 grafana-plugin/src/containers/Labels/Labels.module.css diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index 5f65776c28..954cfb7102 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -133,8 +133,6 @@ "raw-loader": "^4.0.2", "rc-table": "^7.17.1", "react-copy-to-clipboard": "^5.0.2", - "react-dnd": "^16.0.1", - "react-dnd-html5-backend": "^16.0.1", "react-draggable": "^4.4.5", "react-emoji-render": "^1.2.4", "react-modal": "^3.15.1", diff --git a/grafana-plugin/src/containers/Labels/Labels.module.css b/grafana-plugin/src/containers/Labels/Labels.module.css deleted file mode 100644 index c3a2af6391..0000000000 --- a/grafana-plugin/src/containers/Labels/Labels.module.css +++ /dev/null @@ -1,2 +0,0 @@ -.root { -} diff --git a/grafana-plugin/yarn.lock b/grafana-plugin/yarn.lock index 8e821ef194..afed9d898c 100644 --- a/grafana-plugin/yarn.lock +++ b/grafana-plugin/yarn.lock @@ -3661,21 +3661,6 @@ "@swc/helpers" "^0.5.0" clsx "^1.1.1" -"@react-dnd/asap@^5.0.1": - version "5.0.2" - resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488" - integrity sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A== - -"@react-dnd/invariant@^4.0.1": - version "4.0.2" - resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-4.0.2.tgz#b92edffca10a26466643349fac7cdfb8799769df" - integrity sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw== - -"@react-dnd/shallowequal@^4.0.1": - version "4.0.2" - resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz#d1b4befa423f692fa4abf1c79209702e7d8ae4b4" - integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA== - "@react-stately/collections@^3.10.2", "@react-stately/collections@^3.9.0": version "3.10.2" resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.10.2.tgz#c739d9d596ecb744be15fde6f064ad85dd6145db" @@ -7314,15 +7299,6 @@ direction@^0.1.5: resolved "https://registry.yarnpkg.com/direction/-/direction-0.1.5.tgz#ce5d797f97e26f8be7beff53f7dc40e1c1a9ec4c" integrity sha512-HceXsAluGbXKCz2qCVbXFUH4Vn4eNMWxY5gzydMFMnS1zKSwvDASqLwcrYLIFDpwuZ63FUAqjDLEP1eicHt8DQ== -dnd-core@^16.0.1: - version "16.0.1" - resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-16.0.1.tgz#a1c213ed08961f6bd1959a28bb76f1a868360d19" - integrity sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng== - dependencies: - "@react-dnd/asap" "^5.0.1" - "@react-dnd/invariant" "^4.0.1" - redux "^4.2.0" - doctrine@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d" @@ -13209,24 +13185,6 @@ react-dev-utils@^12.0.0: strip-ansi "^6.0.1" text-table "^0.2.0" -react-dnd-html5-backend@^16.0.1: - version "16.0.1" - resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz#87faef15845d512a23b3c08d29ecfd34871688b6" - integrity sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw== - dependencies: - dnd-core "^16.0.1" - -react-dnd@^16.0.1: - version "16.0.1" - resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-16.0.1.tgz#2442a3ec67892c60d40a1559eef45498ba26fa37" - integrity sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q== - dependencies: - "@react-dnd/invariant" "^4.0.1" - "@react-dnd/shallowequal" "^4.0.1" - dnd-core "^16.0.1" - fast-deep-equal "^3.1.3" - hoist-non-react-statics "^3.3.2" - react-dom@18.2.0, react-dom@^18.0.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" @@ -13684,13 +13642,6 @@ redux@^4.0.0, redux@^4.0.4: dependencies: "@babel/runtime" "^7.9.2" -redux@^4.2.0: - version "4.2.1" - 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" - regenerate-unicode-properties@^10.1.0: version "10.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c" From 35f9dd3813e2d5a481b685b0e9082365932316ef Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Mon, 6 Nov 2023 17:09:47 +0200 Subject: [PATCH 08/67] removed unused references --- grafana-plugin/src/containers/Labels/Labels.tsx | 7 +------ grafana-plugin/src/containers/Labels/LabelsFilter.tsx | 7 +------ 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/grafana-plugin/src/containers/Labels/Labels.tsx b/grafana-plugin/src/containers/Labels/Labels.tsx index f744e3f926..d7ba71ec26 100644 --- a/grafana-plugin/src/containers/Labels/Labels.tsx +++ b/grafana-plugin/src/containers/Labels/Labels.tsx @@ -2,7 +2,6 @@ import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'r import ServiceLabels from '@grafana/labels'; import { Field } from '@grafana/ui'; -import cn from 'classnames/bind'; import { isEmpty } from 'lodash-es'; import { observer } from 'mobx-react'; @@ -10,10 +9,6 @@ import { LabelKeyValue } from 'models/label/label.types'; import { useStore } from 'state/useStore'; import { openErrorNotification } from 'utils'; -import styles from './Labels.module.css'; - -const cx = cn.bind(styles); - interface LabelsProps { value: LabelKeyValue[]; errors: any; @@ -99,7 +94,7 @@ const Labels = observer( }, []); return ( -
+
{ }; return ( -
+
Date: Tue, 7 Nov 2023 10:26:28 +0200 Subject: [PATCH 09/67] reverted version to 17.0.2 --- grafana-plugin/package.json | 4 +-- grafana-plugin/src/assets/style/utils.css | 35 ----------------------- 2 files changed, 2 insertions(+), 37 deletions(-) diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json index 954cfb7102..c0e81e5e6f 100644 --- a/grafana-plugin/package.json +++ b/grafana-plugin/package.json @@ -96,8 +96,8 @@ "moment-timezone": "^0.5.35", "plop": "^2.7.4", "postcss-loader": "^7.0.1", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "17.0.2", + "react-dom": "17.0.2", "react-test-renderer": "^17.0.2", "stylelint-config-prettier": "^9.0.3", "stylelint-prettier": "^2.0.0", diff --git a/grafana-plugin/src/assets/style/utils.css b/grafana-plugin/src/assets/style/utils.css index 762629e5f2..bbcc0df930 100644 --- a/grafana-plugin/src/assets/style/utils.css +++ b/grafana-plugin/src/assets/style/utils.css @@ -150,38 +150,3 @@ .line-clamp-3 { -webkit-line-clamp: 3; } - -/* ---- - * Hamburger Menu - */ - -.hamburgerMenu { - cursor: pointer; - color: var(--primary-text-color); - display: inline-flex; - flex-direction: column; - align-items: center; - vertical-align: middle; - justify-content: center; - padding: 4px; - - &--withBackground { - height: 32px; - width: 30px; - cursor: pointer; - } - - &--small { - height: 24px; - width: 22px; - cursor: pointer; - } -} - -.sortableHelper { - z-index: 9990; -} - -.sortable-wrapper { - min-width: 300px; -} From 2a75d2c5cfcad80334bcccce81e5b92cab6c431f Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Tue, 7 Nov 2023 10:26:53 +0200 Subject: [PATCH 10/67] removed unused menuDisplay --- .../CustomContextMenuDisplay.tsx | 49 ------------------- .../outgoing_webhooks/OutgoingWebhooks.tsx | 14 +----- grafana-plugin/yarn.lock | 21 +++++++- 3 files changed, 21 insertions(+), 63 deletions(-) delete mode 100644 grafana-plugin/src/components/CustomContextMenuDisplay/CustomContextMenuDisplay.tsx diff --git a/grafana-plugin/src/components/CustomContextMenuDisplay/CustomContextMenuDisplay.tsx b/grafana-plugin/src/components/CustomContextMenuDisplay/CustomContextMenuDisplay.tsx deleted file mode 100644 index 0abe1cf760..0000000000 --- a/grafana-plugin/src/components/CustomContextMenuDisplay/CustomContextMenuDisplay.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useRef } from 'react'; - -interface CustomContextMenuDisplayProps { - openMenu: React.MouseEventHandler; - listWidth: number; - listBorder: number; - stopPropagation?: boolean; - withBackground?: boolean; - baseClassName?: string; - extraClassName?: string; - children: React.ReactNode; -} - -const CustomContextMenuDisplay: React.FC = (props) => { - const ref = useRef(); - const { - openMenu, - children, - listWidth, - listBorder, - withBackground, - baseClassName, - extraClassName, - stopPropagation = false, - } = props; - - return ( -
{ - if (stopPropagation) { - e.stopPropagation(); - } - - const boundingRect = ref.current.getBoundingClientRect(); - - openMenu({ - pageX: boundingRect.right - listWidth + listBorder * 2, - pageY: boundingRect.top + boundingRect.height, - } as any); - }} - > - {children} -
- ); -}; - -export default CustomContextMenuDisplay; diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx index 07d2a6259d..825a423287 100644 --- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx +++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx @@ -17,8 +17,8 @@ import LegacyNavHeading from 'navbar/LegacyNavHeading'; import CopyToClipboard from 'react-copy-to-clipboard'; import { RouteComponentProps, withRouter } from 'react-router-dom'; -import CustomContextMenuDisplay from 'components/CustomContextMenuDisplay/CustomContextMenuDisplay'; import GTable from 'components/GTable/GTable'; +import HamburgerMenu from 'components/HamburgerMenu/HamburgerMenu'; import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { getWrongTeamResponseInfo, @@ -332,17 +332,7 @@ class OutgoingWebhooks extends React.Component )} > - {({ openMenu }) => ( - - - - )} + {({ openMenu }) => } ); }; diff --git a/grafana-plugin/yarn.lock b/grafana-plugin/yarn.lock index afed9d898c..ea91a24504 100644 --- a/grafana-plugin/yarn.lock +++ b/grafana-plugin/yarn.lock @@ -13185,7 +13185,16 @@ react-dev-utils@^12.0.0: strip-ansi "^6.0.1" text-table "^0.2.0" -react-dom@18.2.0, react-dom@^18.0.0: +react-dom@17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + scheduler "^0.20.2" + +react-dom@^18.0.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== @@ -13571,7 +13580,15 @@ react-window@1.8.9: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@18.2.0, react@^18.0.0: +react@17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + +react@^18.0.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== From c0dcdc5da7b52ed6d0a1f31d1082277ebb99cb7c Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Tue, 7 Nov 2023 10:32:27 +0200 Subject: [PATCH 11/67] snapshots --- .../__snapshots__/Unauthorized.test.tsx.snap | 30 ++-- .../__snapshots__/AddResponders.test.tsx.snap | 82 +++-------- .../AddRespondersPopup.test.tsx.snap | 90 ++++++------ .../NotificationPoliciesSelect.test.tsx.snap | 52 ++----- .../__snapshots__/TeamResponder.test.tsx.snap | 31 ++-- .../__snapshots__/UserResponder.test.tsx.snap | 63 +++----- .../MobileAppConnection.test.tsx.snap | 136 ++++++++---------- .../DisconnectButton.test.tsx.snap | 4 +- .../__snapshots__/DownloadIcons.test.tsx.snap | 14 +- .../PluginConfigPage.test.tsx.snap | 132 ++++++++--------- .../ConfigurationForm.test.tsx.snap | 88 ++++++------ ...veCurrentConfigurationButton.test.tsx.snap | 8 +- .../__snapshots__/PluginSetup.test.tsx.snap | 28 ++-- 13 files changed, 317 insertions(+), 441 deletions(-) diff --git a/grafana-plugin/src/components/Unauthorized/__snapshots__/Unauthorized.test.tsx.snap b/grafana-plugin/src/components/Unauthorized/__snapshots__/Unauthorized.test.tsx.snap index cc8e393c54..b648c35ec6 100644 --- a/grafana-plugin/src/components/Unauthorized/__snapshots__/Unauthorized.test.tsx.snap +++ b/grafana-plugin/src/components/Unauthorized/__snapshots__/Unauthorized.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Unauthorized renders properly - access control enabled: false 1`] = ` className="not-found" >

Loading...