[D&D] Remove search/hasMatch embeddable vestiges (opensearch-project#…

…1935) - removedebugging rendering - also update embeddables icon fixes opensearch-project#1910, opensearch-project#1925 Signed-off-by: Josh Romero <[email protected]>
joshuarrrr · Aug 1, 2022 · 43e0b43 · 43e0b43
1 parent ad873d4
commit 43e0b43
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 117 deletions.
diff --git a/src/plugins/wizard/public/embeddable/wizard_component.tsx b/src/plugins/wizard/public/embeddable/wizard_component.tsx
@@ -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 || {};
@@ -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);
diff --git a/src/plugins/wizard/public/embeddable/wizard_embeddable.tsx b/src/plugins/wizard/public/embeddable/wizard_embeddable.tsx
@@ -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;
@@ -72,7 +43,7 @@ export class WizardEmbeddable extends Embeddable<WizardInput, WizardOutput> {
   private savedObjectId?: string;
 
   constructor(
-    initialInput: WizardInput,
+    initialInput: SavedObjectEmbeddableInput,
     {
       parent,
       savedObjectsClient,
@@ -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;
@@ -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,
       });
@@ -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,
     });

diff --git a/src/plugins/wizard/public/embeddable/wizard_embeddable_factory.tsx b/src/plugins/wizard/public/embeddable/wizard_embeddable_factory.tsx
@@ -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;
@@ -42,7 +39,7 @@ interface StartServices {
 
 // TODO: use or remove?
 export type WizardEmbeddableFactory = EmbeddableFactory<
-  WizardInput,
+  SavedObjectEmbeddableInput,
   WizardOutput | EmbeddableOutput,
   WizardEmbeddable | DisabledEmbeddable,
   WizardSavedObjectAttributes
@@ -51,7 +48,7 @@ export type WizardEmbeddableFactory = EmbeddableFactory<
 export class WizardEmbeddableFactoryDefinition
   implements
     EmbeddableFactoryDefinition<
-      WizardInput,
+      SavedObjectEmbeddableInput,
       WizardOutput | EmbeddableOutput,
       WizardEmbeddable | DisabledEmbeddable,
       WizardSavedObjectAttributes
@@ -62,7 +59,7 @@ export class WizardEmbeddableFactoryDefinition
     name: 'Wizard',
     includeFields: ['visualizationState'],
     type: 'wizard',
-    getIconForSavedObject: () => 'pencil',
+    getIconForSavedObject: () => wizardIcon,
   };
 
   constructor(private getStartServices: () => Promise<StartServices>) {}
@@ -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,

diff --git a/src/plugins/wizard/server/saved_objects/wizard_app.ts b/src/plugins/wizard/server/saved_objects/wizard_app.ts
@@ -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,