Skip to content

Commit

Permalink
[D&D] Remove search/hasMatch embeddable vestiges (opensearch-project#…
Browse files Browse the repository at this point in the history 
…1935)

- removedebugging rendering
- also update embeddables icon

fixes opensearch-project#1910, opensearch-project#1925

Signed-off-by: Josh Romero <rmerqg@amazon.com>
  • Loading branch information
@joshuarrrr @ashwin-pc
joshuarrrr authored and ashwin-pc committed Aug 3, 2022
1 parent 2289e60 commit 0c0df21
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 117 deletions.
77 changes: 8 additions & 69 deletions src/plugins/wizard/public/embeddable/wizard_component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,48 +4,24 @@
*/

import React, { useEffect, useState } from 'react';
import {
EuiFlexItem,
EuiFlexGroup,
EuiText,
EuiAvatar,
EuiFlexGrid,
EuiCodeBlock,
} from '@elastic/eui';

import { withEmbeddableSubscription } from '../../../embeddable/public';
import { WizardEmbeddable, WizardInput, WizardOutput } from './wizard_embeddable';
import { SavedObjectEmbeddableInput, withEmbeddableSubscription } from '../../../embeddable/public';
import { WizardEmbeddable, WizardOutput } from './wizard_embeddable';
import { validateSchemaState } from '../application/utils/validate_schema_state';

interface Props {
embeddable: WizardEmbeddable;
input: WizardInput;
input: SavedObjectEmbeddableInput;
output: WizardOutput;
}

function wrapSearchTerms(task?: string, search?: string) {
if (!search) return task;
if (!task) return task;
const parts = task.split(new RegExp(`(${search})`, 'g'));
return parts.map((part, i) =>
part === search ? (
<span key={i} style={{ backgroundColor: 'yellow' }}>
{part}
</span>
) : (
part
)
);
}

function WizardEmbeddableComponentInner({
embeddable,
input: { search },
input: {},
output: { savedAttributes },
}: Props) {
const { ReactExpressionRenderer, toasts, types, indexPatterns, aggs } = embeddable;
const [expression, setExpression] = useState<string>();
const { title, description, visualizationState, styleState } = savedAttributes || {};

useEffect(() => {
const { visualizationState: visualization, styleState: style } = savedAttributes || {};
Expand Down Expand Up @@ -84,50 +60,13 @@ function WizardEmbeddableComponentInner({
}
}, [aggs, indexPatterns, savedAttributes, toasts, types]);

// TODO: add correct loading and error states, remove debugging mode
return (
<>
{expression ? (
<EuiFlexItem>
<ReactExpressionRenderer expression={expression} />
</EuiFlexItem>
) : (
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiAvatar name={title || description || ''} size="l" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGrid columns={1}>
<EuiFlexItem>
<EuiText data-test-subj="wizardEmbeddableTitle">
<h3>{wrapSearchTerms(title || '', search)}</h3>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiText data-test-subj="wizardEmbeddableDescription">
{wrapSearchTerms(description, search)}
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiCodeBlock data-test-subj="wizardEmbeddableDescription">
{wrapSearchTerms(visualizationState, search)}
</EuiCodeBlock>
</EuiFlexItem>
<EuiFlexItem>
<EuiCodeBlock data-test-subj="wizardEmbeddableDescription">
{wrapSearchTerms(styleState, search)}
</EuiCodeBlock>
</EuiFlexItem>
</EuiFlexGrid>
</EuiFlexItem>
</EuiFlexGroup>
)}
</>
);
return <ReactExpressionRenderer expression={expression ?? ''} />;

// TODO: add correct loading and error states
}

export const WizardEmbeddableComponent = withEmbeddableSubscription<
WizardInput,
SavedObjectEmbeddableInput,
WizardOutput,
WizardEmbeddable
>(WizardEmbeddableComponentInner);
39 changes: 3 additions & 36 deletions src/plugins/wizard/public/embeddable/wizard_embeddable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,44 +22,15 @@ import { DataPublicPluginStart } from '../../../data/public';

export const WIZARD_EMBEDDABLE = 'WIZARD_EMBEDDABLE';

// TODO: remove search, hasMatch or update as appropriate
export interface WizardInput extends SavedObjectEmbeddableInput {
/**
* Optional search string which will be used to highlight search terms as
* well as calculate `output.hasMatch`.
*/
search?: string;
}

export interface WizardOutput extends EmbeddableOutput {
/**
* Should be true if input.search is defined and the task or title contain
* search as a substring.
*/
hasMatch: boolean;
/**
* Will contain the saved object attributes of the Wizard Saved Object that matches
* `input.savedObjectId`. If the id is invalid, this may be undefined.
*/
savedAttributes?: WizardSavedObjectAttributes;
}

/**
* Returns whether any attributes contain the search string. If search is empty, true is returned. If
* there are no savedAttributes, false is returned.
* @param search - the search string
* @param savedAttributes - the saved object attributes for the saved object with id `input.savedObjectId`
*/
function getHasMatch(search?: string, savedAttributes?: WizardSavedObjectAttributes): boolean {
if (!search) return true;
if (!savedAttributes) return false;
return Boolean(
(savedAttributes.description && savedAttributes.description.match(search)) ||
(savedAttributes.title && savedAttributes.title.match(search))
);
}

export class WizardEmbeddable extends Embeddable<WizardInput, WizardOutput> {
export class WizardEmbeddable extends Embeddable<SavedObjectEmbeddableInput, WizardOutput> {
public readonly type = WIZARD_EMBEDDABLE;
private subscription: Subscription;
private node?: HTMLElement;
Expand All @@ -72,7 +43,7 @@ export class WizardEmbeddable extends Embeddable<WizardInput, WizardOutput> {
private savedObjectId?: string;

constructor(
initialInput: WizardInput,
initialInput: SavedObjectEmbeddableInput,
{
parent,
savedObjectsClient,
Expand All @@ -90,7 +61,7 @@ export class WizardEmbeddable extends Embeddable<WizardInput, WizardOutput> {
}
) {
// TODO: can default title come from saved object?
super(initialInput, { defaultTitle: 'wizard', hasMatch: false }, parent);
super(initialInput, { defaultTitle: 'wizard' }, parent);
this.savedObjectsClient = savedObjectsClient;
this.ReactExpressionRenderer = ReactExpressionRenderer;
this.toasts = toasts;
Expand All @@ -115,10 +86,7 @@ export class WizardEmbeddable extends Embeddable<WizardInput, WizardOutput> {
savedAttributes = wizardSavedObject?.attributes;
}

// The search string might have changed as well so we need to make sure we recalculate
// hasMatch.
this.updateOutput({
hasMatch: getHasMatch(this.input.search, savedAttributes),
savedAttributes,
title: savedAttributes?.title,
});
Expand All @@ -144,7 +112,6 @@ export class WizardEmbeddable extends Embeddable<WizardInput, WizardOutput> {
);
const savedAttributes = wizardSavedObject?.attributes;
this.updateOutput({
hasMatch: getHasMatch(this.input.search, savedAttributes),
savedAttributes,
title: wizardSavedObject?.attributes?.title,
});
Expand Down
19 changes: 8 additions & 11 deletions src/plugins/wizard/public/embeddable/wizard_embeddable_factory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,15 @@ import {
EmbeddableStart,
ErrorEmbeddable,
IContainer,
SavedObjectEmbeddableInput,
} from '../../../embeddable/public';
import { ExpressionsStart } from '../../../expressions/public';
import { VISUALIZE_ENABLE_LABS_SETTING } from '../../../visualizations/public';
import { WizardSavedObjectAttributes } from '../../common';
import { TypeServiceStart } from '../services/type_service';
import { DisabledEmbeddable } from './disabled_embeddable';
import {
WizardEmbeddable,
WizardInput,
WizardOutput,
WIZARD_EMBEDDABLE,
} from './wizard_embeddable';
import { WizardEmbeddable, WizardOutput, WIZARD_EMBEDDABLE } from './wizard_embeddable';
import wizardIcon from '../assets/wizard_icon.svg';

interface StartServices {
data: DataPublicPluginStart;
Expand All @@ -42,7 +39,7 @@ interface StartServices {

// TODO: use or remove?
export type WizardEmbeddableFactory = EmbeddableFactory<
WizardInput,
SavedObjectEmbeddableInput,
WizardOutput | EmbeddableOutput,
WizardEmbeddable | DisabledEmbeddable,
WizardSavedObjectAttributes
Expand All @@ -51,7 +48,7 @@ export type WizardEmbeddableFactory = EmbeddableFactory<
export class WizardEmbeddableFactoryDefinition
implements
EmbeddableFactoryDefinition<
WizardInput,
SavedObjectEmbeddableInput,
WizardOutput | EmbeddableOutput,
WizardEmbeddable | DisabledEmbeddable,
WizardSavedObjectAttributes
Expand All @@ -62,7 +59,7 @@ export class WizardEmbeddableFactoryDefinition
name: 'Wizard',
includeFields: ['visualizationState'],
type: 'wizard',
getIconForSavedObject: () => 'pencil',
getIconForSavedObject: () => wizardIcon,
};

constructor(private getStartServices: () => Promise<StartServices>) {}
Expand All @@ -75,13 +72,13 @@ export class WizardEmbeddableFactoryDefinition

public createFromSavedObject = (
savedObjectId: string,
input: Partial<WizardInput> & { id: string },
input: Partial<SavedObjectEmbeddableInput> & { id: string },
parent?: IContainer
): Promise<WizardEmbeddable | ErrorEmbeddable | DisabledEmbeddable> => {
return this.create({ ...input, savedObjectId }, parent);
};

public async create(input: WizardInput, parent?: IContainer) {
public async create(input: SavedObjectEmbeddableInput, parent?: IContainer) {
// TODO: Use savedWizardLoader here instead
const {
data,
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/wizard/server/saved_objects/wizard_app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const wizardSavedObjectType: SavedObjectsType = {
hidden: false,
namespaceType: 'single',
management: {
icon: 'visVisualBuilder', // TODO: Need a custom icon here
// icon: '', // TODO: Need a custom icon here - unfortunately a custom SVG won't work without changes to the SavedObjectsManagement plugin
defaultSearchField: 'title',
importableAndExportable: true,
getTitle: ({ attributes: { title } }: SavedObject<WizardSavedObjectAttributes>) => title,
Expand Down

0 comments on commit 0c0df21

Please sign in to comment.