Switch from toast to callout for integration set up failures (opensea…

…rch-project#1155) (opensearch-project#1158) (cherry picked from commit 095bdfa) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> (cherry picked from commit e090a88)
amsiglan · Jan 8, 2024 · c49a997 · c49a997
1 parent b1b3dc6
commit c49a997
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 87 deletions.
diff --git a/auto_sync_commit_metadata.json b/auto_sync_commit_metadata.json
@@ -1,4 +1,4 @@
 {
- "last_github_commit": "2ac5d15fc3b1808290313a812e841e035ea0cc64",
- "last_gitfarm_commit": "3565a03664516805ff12c1baa3c51e0473d38a29"
+ "last_github_commit": "e090a8860a034ef4a548be6c61ae41dc62a583f2",
+ "last_gitfarm_commit": "06aefad40784add9c3197ce60b7c3b39acc6ffba"
 }
diff --git a/...omponents/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap b/...omponents/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap
@@ -42,6 +42,11 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
  "type": "",
  }
  }
+ setupCallout={
+ Object {
+ "show": false,
+ }
+ }
  updateConfig={[Function]}
  >
  <EuiForm>
@@ -60,6 +65,11 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
  className="euiSpacer euiSpacer--l"
  />
  </EuiSpacer>
+ <EuiSpacer>
+ <div
+ className="euiSpacer euiSpacer--l"
+ />
+ </EuiSpacer>
  <EuiText>
  <div
  className="euiText euiText--medium"
@@ -685,6 +695,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
  loadingProgress={0}
  setLoading={[Function]}
  setProgress={[Function]}
+ setSetupCallout={[Function]}
  >
  <EuiBottomBar>
  <EuiPortal>
@@ -707,11 +718,11 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
  class="euiFlexItem euiFlexItem--flexGrowZero"
  >
  <button
- class="euiButton euiButton--secondary"
+ class="euiButtonEmpty euiButtonEmpty--text"
  type="button"
  >
  <span
- class="euiButtonContent euiButton__content"
+ class="euiButtonContent euiButtonEmpty__content"
  >
  <svg
  aria-hidden="true"
@@ -724,7 +735,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
  xmlns="http://www.w3.org/2000/svg"
  />
  <span
- class="euiButton__text"
+ class="euiButtonEmpty__text"
  >
  Discard
  </span>
@@ -806,81 +817,66 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
  <div
  className="euiFlexItem euiFlexItem--flexGrowZero"
  >
- <EuiButton
- color="secondary"
+ <EuiButtonEmpty
+ color="text"
  iconType="cross"
  onClick={[Function]}
  >
- <EuiButtonDisplay
- baseClassName="euiButton"
- color="secondary"
+ <button
+ className="euiButtonEmpty euiButtonEmpty--text"
  disabled={false}
- element="button"
- iconType="cross"
- isDisabled={false}
  onClick={[Function]}
  type="button"
  >
- <button
- className="euiButton euiButton--secondary"
- disabled={false}
- onClick={[Function]}
- style={
+ <EuiButtonContent
+ className="euiButtonEmpty__content"
+ iconSide="left"
+ iconSize="m"
+ iconType="cross"
+ textProps={
  Object {
- "minWidth": undefined,
+ "className": "euiButtonEmpty__text",
  }
  }
- type="button"
  >
- <EuiButtonContent
- className="euiButton__content"
- iconSide="left"
- iconType="cross"
- textProps={
- Object {
- "className": "euiButton__text",
- }
- }
+ <span
+ className="euiButtonContent euiButtonEmpty__content"
  >
- <span
- className="euiButtonContent euiButton__content"
+ <EuiIcon
+ className="euiButtonContent__icon"
+ color="inherit"
+ size="m"
+ type="cross"
  >
- <EuiIcon
- className="euiButtonContent__icon"
- color="inherit"
- size="m"
- type="cross"
+ <EuiIconEmpty
+ aria-hidden={true}
+ className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+ focusable="false"
+ role="img"
+ style={null}
  >
- <EuiIconEmpty
+ <svg
  aria-hidden={true}
  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
  focusable="false"
+ height={16}
  role="img"
  style={null}
- >
- <svg
- aria-hidden={true}
- className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
- focusable="false"
- height={16}
- role="img"
- style={null}
- viewBox="0 0 16 16"
- width={16}
- xmlns="http://www.w3.org/2000/svg"
- />
- </EuiIconEmpty>
- </EuiIcon>
- <span
- className="euiButton__text"
- >
- Discard
- </span>
+ viewBox="0 0 16 16"
+ width={16}
+ xmlns="http://www.w3.org/2000/svg"
+ />
+ </EuiIconEmpty>
+ </EuiIcon>
+ <span
+ className="euiButtonEmpty__text"
+ >
+ Discard
  </span>
- </EuiButtonContent>
- </button>
- </EuiButtonDisplay>
- </EuiButton>
+ </span>
+ </EuiButtonContent>
+ </button>
+ </EuiButtonEmpty>
  </div>
  </EuiFlexItem>
  <EuiFlexItem
@@ -1029,6 +1025,11 @@ exports[`Integration Setup Page Renders the form as expected 1`] = `
  "version": "2.0.0",
  }
  }
+ setupCallout={
+ Object {
+ "show": false,
+ }
+ }
  updateConfig={[Function]}
 >
  <EuiForm>
@@ -1047,6 +1048,11 @@ exports[`Integration Setup Page Renders the form as expected 1`] = `
  className="euiSpacer euiSpacer--l"
  />
  </EuiSpacer>
+ <EuiSpacer>
+ <div
+ className="euiSpacer euiSpacer--l"
+ />
+ </EuiSpacer>
  <EuiText>
  <div
  className="euiText euiText--medium"

diff --git a/public/components/integrations/components/__tests__/setup_integration.test.tsx b/public/components/integrations/components/__tests__/setup_integration.test.tsx
@@ -30,6 +30,7 @@ describe('Integration Setup Page', () => {
  config={TEST_INTEGRATION_SETUP_INPUTS}
  updateConfig={() => {}}
  integration={TEST_INTEGRATION_CONFIG}
+ setupCallout={{ show: false }}
  />
  );
 

diff --git a/public/components/integrations/components/available_integration_overview_page.tsx b/public/components/integrations/components/available_integration_overview_page.tsx
@@ -32,9 +32,9 @@ export interface AvailableIntegrationType {
  version?: string | undefined;
  displayName?: string;
  integrationType: string;
- statics: any;
- components: any[];
- displayAssets: any[];
+ statics: unknown;
+ components: Array<{ name: string }>;
+ displayAssets: unknown[];
 }
 
 export interface AvailableIntegrationsTableProps {
@@ -183,7 +183,11 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
  ? AvailableIntegrationsCardView({
  data: {
  hits: data.hits.filter((hit) =>
- helper.every((compon) => hit.components.map((x) => x.name).includes(compon))
+ helper.every((compon) =>
+ hit.components
+ .map((x) => x.name.split('_').findLast(() => true))
+ .includes(compon)
+ )
  ),
  },
  isCardView,
@@ -197,7 +201,11 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
  loading: false,
  data: {
  hits: data.hits.filter((hit) =>
- helper.every((compon) => hit.components.map((x) => x.name).includes(compon))
+ helper.every((compon) =>
+ hit.components
+ .map((x) => x.name.split('_').findLast(() => true))
+ .includes(compon)
+ )
  ),
  },
  isCardView,

diff --git a/public/components/integrations/components/create_integration_helpers.ts b/public/components/integrations/components/create_integration_helpers.ts
@@ -313,16 +313,13 @@ export async function addIntegrationRequest(
  .post(`${INTEGRATIONS_BASE}/store/${templateName}`, {
  body: JSON.stringify({ name, dataSource }),
  })
- .then((_res) => {
+ .then((res) => {
  setToast(`${name} integration successfully added!`, 'success');
- window.location.hash = `#/installed/${_res.data?.id}`;
+ window.location.hash = `#/installed/${res.data?.id}`;
  return true;
  })
- .catch((_err) => {
- setToast(
- 'Failed to load integration. Check Added Integrations table for more details',
- 'danger'
- );
+ .catch((err) => {
+ setToast('Failed to load integration', 'danger', err.message);
  return false;
  });
  if (!addSample || !response) {
@@ -333,7 +330,7 @@ export async function addIntegrationRequest(
  .then((res) => res.data)
  .catch((err) => {
  console.error(err);
- setToast('The sample data could not be retrieved', 'danger');
+ setToast('Failed to load integration', 'danger', 'The sample data could not be retrieved.');
  return { sampleData: [] };
  });
  const requestBody =