IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DashboardSettings: Migrate Link Settings to React (#31150)

Browse Source 
* feat(dashboardsettings): migrate dashboard links EmptyListCTA to react

* feat(dashboardsettings): initial commit of links settings migration to react

* feat(dashboardsettings): add links form functionality

* refactor(dashboardsettings): separate out linksettings components and concerns

* Updates to links list

* Form improvements

* test(dashboardlinks): update links so tests run

* refactor: move _.move to arrayMove for testing purposes

* test(dashboardsettings): initial commit of link settings tests

* refactor(app): put back lodash move method for backwards compatibility

* test(dashboardsettings): add links settings tests

* style(dashboardsettings): camelcase constants

* chore(dashboardsettings): delete old angular links settings view

* fix(dashboardsettings): forceupdate links on submenuVisibilityChanged and correct imports

* chore: remove reference to old angular link settings components

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Jack Westbrook
2021-02-25 11:50:10 +01:00
committed by GitHub
parent 47d2a8085b
commit ad68f3c5e6
17 changed files with 546 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/features/dashboard/components/SubMenu/DashboardLinks.tsx
View File

@@ -6,7 +6,7 @@ import { getLinkSrv } from '../../../panel/panellinks/link_srv';
import { DashboardModel } from '../../state';
import { DashboardLink } from '../../state/DashboardModel';
import { iconMap } from '../DashLinks/DashLinksEditorCtrl';
import { linkIconMap } from '../LinksSettings/LinkSettingsEdit';
import { useEffectOnce } from 'react-use';
import { CoreEvents } from 'app/types';
import { selectors } from '@grafana/e2e-selectors';
@@ -32,6 +32,13 @@ export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
};
});
useEffectOnce(() => {
dashboard.on(CoreEvents.submenuVisibilityChanged, forceUpdate);
return () => {
dashboard.off(CoreEvents.submenuVisibilityChanged, forceUpdate);
};
});
return (
<>
{links.map((link: DashboardLink, index: number) => {
@@ -50,7 +57,7 @@ export const DashboardLinks: FC<Props> = ({ dashboard, links }) => {
rel="noreferrer"
aria-label={selectors.components.DashboardLinks.link}
>
<Icon name={iconMap[link.icon] as IconName} style={{ marginRight: '4px' }} />
<Icon name={linkIconMap[link.icon] as IconName} style={{ marginRight: '4px' }} />
<span>{sanitize(linkInfo.title)}</span>
</a>
);

4
public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.test.tsx
View File

@@ -8,6 +8,8 @@ describe('searchForTags', () => {
const tags = ['A', 'B'];
const link: DashboardLink = {
targetBlank: false,
keepTime: false,
includeVars: false,
asDropdown: false,
icon: 'some icon',
tags,
@@ -40,6 +42,8 @@ describe('resolveLinks', () => {
const setupTestContext = (dashboardId: number, searchHitId: number) => {
const link: DashboardLink = {
targetBlank: false,
keepTime: false,
includeVars: false,
asDropdown: false,
icon: 'some icon',
tags: [],