Skip to content

Commit

Permalink
[Legacy Input Controls] Show deprecation badge in Dashboard (#174302)
Browse files Browse the repository at this point in the history
## Summary

Closes #134050.

This adds a deprecation badge to legacy input control panels on
dashboards. This badge is only visible in edit mode. I've also added
support for displaying tooltips on badges shown in the embeddable panel
header when `getDisplayNameTooltip` is defined.

<img width="468" alt="Screenshot 2024-01-04 at 3 43 15 PM"
src="https://github.com/elastic/kibana/assets/1697105/c3e8c8d2-d2df-4880-acbb-f13c5c5222bc">

#### Testing
In order to test this, set `disableCreate: false` in the
`InputControlVis` vis type definition to add a legacy input control to a
dashboard if you don't have an existing dashboard that contains a legacy
input control.


https://github.com/elastic/kibana/blob/46a58541fa8ce21f86a32408cbc759c1bf22487b/src/plugins/input_control_vis/public/input_control_vis_type.ts#L33

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
cqliu1 and kibanamachine committed Jan 5, 2024
1 parent 845cd06 commit 13fa875
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 14 deletions.
Expand Up @@ -106,18 +106,30 @@ export const useEmbeddablePanelBadges = (

const badgeComponents = useMemo(
() =>
badges?.map((badge) => (
<EuiBadge
key={badge.id}
className="embPanel__headerBadge"
iconType={badge.getIconType({ embeddable, trigger: panelBadgeTrigger })}
onClick={() => badge.execute({ embeddable, trigger: panelBadgeTrigger })}
onClickAriaLabel={badge.getDisplayName({ embeddable, trigger: panelBadgeTrigger })}
data-test-subj={`embeddablePanelBadge-${badge.id}`}
>
{badge.getDisplayName({ embeddable, trigger: panelBadgeTrigger })}
</EuiBadge>
)),
badges?.map((badge) => {
const badgeComponent = (
<EuiBadge
key={badge.id}
className="embPanel__headerBadge"
iconType={badge.getIconType({ embeddable, trigger: panelBadgeTrigger })}
onClick={() => badge.execute({ embeddable, trigger: panelBadgeTrigger })}
onClickAriaLabel={badge.getDisplayName({ embeddable, trigger: panelBadgeTrigger })}
data-test-subj={`embeddablePanelBadge-${badge.id}`}
>
{badge.getDisplayName({ embeddable, trigger: panelBadgeTrigger })}
</EuiBadge>
);

const tooltip = badge.getDisplayNameTooltip
? badge.getDisplayNameTooltip({ embeddable, trigger: panelBadgeTrigger })
: '';

return tooltip ? (
<EuiToolTip content={tooltip}>{badgeComponent}</EuiToolTip>
) : (
badgeComponent
);
}),
[badges, embeddable]
);

Expand Down
5 changes: 3 additions & 2 deletions src/plugins/input_control_vis/kibana.jsonc
Expand Up @@ -12,10 +12,11 @@
"expressions",
"visDefaultEditor",
"visualizations",
"unifiedSearch"
"unifiedSearch",
"uiActions"
],
"requiredBundles": [
"kibanaReact"
"kibanaReact", "embeddable"
]
}
}
54 changes: 54 additions & 0 deletions src/plugins/input_control_vis/public/deprecation_badge.ts
@@ -0,0 +1,54 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { Action } from '@kbn/ui-actions-plugin/public';

import { Embeddable, ViewMode } from '@kbn/embeddable-plugin/public';
import { i18n } from '@kbn/i18n';
import { VisualizeInput } from '@kbn/visualizations-plugin/public';

export const ACTION_DEPRECATION_BADGE = 'ACTION_INPUT_CONTROL_DEPRECATION_BADGE';

export interface DeprecationBadgeActionContext {
embeddable: Embeddable<VisualizeInput>;
}

export class InputControlDeprecationBadge implements Action<DeprecationBadgeActionContext> {
public id = ACTION_DEPRECATION_BADGE;
public type = ACTION_DEPRECATION_BADGE;
public disabled = true;

public getDisplayName() {
return i18n.translate('inputControl.deprecationBadgeAction.deprecationBadgeLabel', {
defaultMessage: 'Deprecated',
});
}

public getIconType() {
return 'warning';
}

public getDisplayNameTooltip() {
return i18n.translate('inputControl.deprecationBadgeAction.deprecationWarningDescription', {
defaultMessage:
'Input controls are deprecated and will be removed in a future release. Use the new Controls to filter and interact with your dashboard data.',
});
}

public async isCompatible({ embeddable }: DeprecationBadgeActionContext) {
return (
embeddable.getInput().viewMode === ViewMode.EDIT &&
embeddable.getInput()?.savedVis?.type === 'input_control_vis'
);
}

public async execute() {
// do nothing
return;
}
}
11 changes: 11 additions & 0 deletions src/plugins/input_control_vis/public/plugin.ts
Expand Up @@ -15,10 +15,13 @@ import {
} from '@kbn/unified-search-plugin/public';
import { Plugin as ExpressionsPublicPlugin } from '@kbn/expressions-plugin/public';
import { VisualizationsSetup, VisualizationsStart } from '@kbn/visualizations-plugin/public';
import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
import { PANEL_BADGE_TRIGGER } from '@kbn/embeddable-plugin/public';
import { createInputControlVisFn } from './input_control_fn';
import { getInputControlVisRenderer } from './input_control_vis_renderer';
import { createInputControlVisTypeDefinition } from './input_control_vis_type';
import { InputControlPublicConfig } from '../config';
import { InputControlDeprecationBadge } from './deprecation_badge';

type InputControlVisCoreSetup = CoreSetup<InputControlVisPluginStartDependencies, void>;

Expand Down Expand Up @@ -48,6 +51,7 @@ export interface InputControlVisPluginStartDependencies {
visualizations: VisualizationsStart;
data: DataPublicPluginStart;
unifiedSearch: UnifiedSearchPublicPluginStart;
uiActions: UiActionsStart;
}

/** @internal */
Expand Down Expand Up @@ -78,5 +82,12 @@ export class InputControlVisPlugin implements Plugin<void, void> {

public start(core: CoreStart, deps: InputControlVisPluginStartDependencies) {
// nothing to do here
const { uiActions } = deps;

const deprecationBadge = new InputControlDeprecationBadge();

uiActions.addTriggerAction(PANEL_BADGE_TRIGGER, deprecationBadge);

return {};
}
}
2 changes: 2 additions & 0 deletions src/plugins/input_control_vis/tsconfig.json
Expand Up @@ -23,6 +23,8 @@
"@kbn/i18n-react",
"@kbn/test-jest-helpers",
"@kbn/config-schema",
"@kbn/ui-actions-plugin",
"@kbn/embeddable-plugin",
],
"exclude": [
"target/**/*",
Expand Down

0 comments on commit 13fa875

Please sign in to comment.