HeaderControl update style, UI Adjustments Integrations (#2171)

* UI refactor, adjust headercontrolls Signed-off-by: Adam Tackett <tackadam@amazon.com> * comments addressed, ui final feedback Signed-off-by: Adam Tackett <tackadam@amazon.com> * update name Signed-off-by: Adam Tackett <tackadam@amazon.com> --------- Signed-off-by: Adam Tackett <tackadam@amazon.com> Co-authored-by: Adam Tackett <tackadam@amazon.com>
opensearch-project · Sep 18, 2024 · 929d67d · 929d67d
1 parent ce6fba4
commit 929d67d
Show file tree

Hide file tree

Showing 21 changed files with 807 additions and 647 deletions.
diff --git a/.cypress/integration/integrations_test/integrations.spec.js b/.cypress/integration/integrations_test/integrations.spec.js
@@ -107,7 +107,7 @@ describe('Add nginx integration instance flow', () => {
 
  cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');
 
- cy.get(`input.euiFieldText[placeholder="${testInstance}"]`).focus().type(testInstance, {
+ cy.get(`input.euiFieldText[placeholder="delete"]`).focus().type("delete", {
  delay: 50,
  });
  cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');

diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx
@@ -40,6 +40,7 @@ import { setNavBreadCrumbs } from '../../../../common/utils/set_nav_bread_crumbs
 import { DeleteModal } from '../../common/helpers/delete_modal';
 import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_helpers/plugin_headerControl';
 import { coreRefs } from '../../../framework/core_refs';
+import { TopNavControlButtonData } from '../../../../../../src/plugins/navigation/public';
 
 const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
 
@@ -234,6 +235,30 @@ export function AppTable(props: AppTableProps) {
  <h3>Applications {` (${applications.length})`}</h3>
  </EuiTitle>
  )}
+ <EuiFlexItem grow={false}>
+ <HeaderControlledComponentsWrapper
+ components={
+ newNavigation
+ ? [
+ {
+ label: createButtonText,
+ run: () => {
+ window.location.href = '#/create';
+ },
+ iconType: 'plus',
+ iconSide: 'left',
+ fill: true,
+ controlType: 'button',
+ } as TopNavControlButtonData,
+ ]
+ : [
+ <EuiSmallButton fill href="#/create" iconType="plus" iconSide="left">
+ {createButtonText}
+ </EuiSmallButton>,
+ ]
+ }
+ />
+ </EuiFlexItem>
  </EuiPageHeader>
  <EuiPageContent id="applicationArea" paddingSize="m">
  <EuiPageContentHeader>
@@ -249,15 +274,6 @@ export function AppTable(props: AppTableProps) {
  aria-label="Search applications"
  />
  </EuiFlexItem>
- <EuiFlexItem grow={false}>
- <HeaderControlledComponentsWrapper
- components={[
- <EuiSmallButton fill href="#/create" iconType="plus" iconSide="left">
- {createButtonText}
- </EuiSmallButton>,
- ]}
- />
- </EuiFlexItem>
  </EuiFlexGroup>
  </EuiPageContentHeader>
  {filteredApplications.length > 0 ? (

diff --git a/public/components/getting_started/components/getting_started_integrationCards.tsx b/public/components/getting_started/components/getting_started_integrationCards.tsx
@@ -136,13 +136,12 @@ export const IntegrationCards = () => {
  icon={
  integration.statics && integration.statics.logo && integration.statics.logo.path ? (
  <img
- style={{ height: 100, width: 100 }}
  alt=""
  className="synopsisIcon"
  src={`/api/integrations/repository/${integration.name}/static/${integration.statics.logo.path}`}
  />
  ) : (
- <div style={{ height: 100, width: 100, backgroundColor: '#ccc' }} />
+ <div className="synopsisIcon" style={{ backgroundColor: '#ccc' }} />
  )
  }
  title={integration.displayName || integration.name}

diff --git a/...omponents/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap b/...omponents/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
@@ -219,63 +219,90 @@ exports[`Added Integration View Test Renders added integration view using dummy
  <div
  className="euiFlexItem euiFlexItem--flexGrowZero"
  >
- <EuiSmallButtonIcon
- aria-label="Delete"
- color="danger"
- data-test-subj="deleteInstanceButton"
- iconType="trash"
- onClick={[Function]}
+ <EuiToolTip
+ content={
+ <FormattedMessage
+ defaultMessage="Delete this instance"
+ id="integration.deleteButtonTooltip"
+ values={Object {}}
+ />
+ }
+ delay="regular"
+ position="top"
  >
- <EuiButtonIcon
- aria-label="Delete"
- color="danger"
- data-test-subj="deleteInstanceButton"
- iconType="trash"
- onClick={[Function]}
- size="s"
+ <span
+ className="euiToolTipAnchor"
+ onKeyUp={[Function]}
+ onMouseOut={[Function]}
+ onMouseOver={[Function]}
  >
- <button
+ <EuiSmallButtonIcon
  aria-label="Delete"
- className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
+ color="danger"
  data-test-subj="deleteInstanceButton"
- disabled={false}
+ display="base"
+ iconType="trash"
+ onBlur={[Function]}
  onClick={[Function]}
- type="button"
+ onFocus={[Function]}
  >
- <EuiIcon
- aria-hidden="true"
- className="euiButtonIcon__icon"
- color="inherit"
- size="m"
- type="trash"
+ <EuiButtonIcon
+ aria-label="Delete"
+ color="danger"
+ data-test-subj="deleteInstanceButton"
+ display="base"
+ iconType="trash"
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocus={[Function]}
+ size="s"
  >
- <EuiIconBeaker
- aria-hidden={true}
- className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
- focusable="false"
- role="img"
- style={null}
+ <button
+ aria-label="Delete"
+ className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--small"
+ data-test-subj="deleteInstanceButton"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocus={[Function]}
+ type="button"
  >
- <svg
- aria-hidden={true}
- className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
- focusable="false"
- height={16}
- role="img"
- style={null}
- viewBox="0 0 16 16"
- width={16}
- xmlns="http://www.w3.org/2000/svg"
+ <EuiIcon
+ aria-hidden="true"
+ className="euiButtonIcon__icon"
+ color="inherit"
+ size="m"
+ type="trash"
  >
- <path
- d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
- />
- </svg>
- </EuiIconBeaker>
- </EuiIcon>
- </button>
- </EuiButtonIcon>
- </EuiSmallButtonIcon>
+ <EuiIconBeaker
+ aria-hidden={true}
+ className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ role="img"
+ style={null}
+ >
+ <svg
+ aria-hidden={true}
+ className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ height={16}
+ role="img"
+ style={null}
+ viewBox="0 0 16 16"
+ width={16}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+ />
+ </svg>
+ </EuiIconBeaker>
+ </EuiIcon>
+ </button>
+ </EuiButtonIcon>
+ </EuiSmallButtonIcon>
+ </span>
+ </EuiToolTip>
  </div>
  </EuiFlexItem>
  </div>
@@ -286,58 +313,68 @@ exports[`Added Integration View Test Renders added integration view using dummy
  </EuiPageHeaderSection>
  </header>
  </EuiPageHeader>
- <EuiFlexGroup>
+ <EuiPanel>
  <div
- className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+ className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
  >
- <EuiFlexItem>
+ <EuiFlexGroup>
  <div
- className="euiFlexItem"
+ className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
  >
- <EuiText>
+ <EuiFlexItem>
  <div
- className="euiText euiText--medium"
+ className="euiFlexItem"
  >
- <h4>
- Template
- </h4>
+ <EuiText
+ size="m"
+ >
+ <div
+ className="euiText euiText--medium"
+ >
+ <h4>
+ Template
+ </h4>
+ </div>
+ </EuiText>
+ <EuiLink
+ href="#/available/undefined"
+ >
+ <a
+ className="euiLink euiLink--primary"
+ href="#/available/undefined"
+ rel="noreferrer"
+ />
+ </EuiLink>
  </div>
- </EuiText>
- <EuiLink
- href="#/available/undefined"
- >
- <a
- className="euiLink euiLink--primary"
- href="#/available/undefined"
- rel="noreferrer"
- />
- </EuiLink>
- </div>
- </EuiFlexItem>
- <EuiFlexItem>
- <div
- className="euiFlexItem"
- >
- <EuiText>
+ </EuiFlexItem>
+ <EuiFlexItem>
  <div
- className="euiText euiText--medium"
+ className="euiFlexItem"
  >
- <h4>
- Date Added
- </h4>
+ <EuiText
+ size="m"
+ >
+ <div
+ className="euiText euiText--medium"
+ >
+ <h4>
+ Date Added
+ </h4>
+ </div>
+ </EuiText>
+ <EuiText
+ size="m"
+ >
+ <div
+ className="euiText euiText--medium"
+ />
+ </EuiText>
  </div>
- </EuiText>
- <EuiText
- size="m"
- >
- <div
- className="euiText euiText--medium"
- />
- </EuiText>
+ </EuiFlexItem>
  </div>
- </EuiFlexItem>
+ </EuiFlexGroup>
  </div>
- </EuiFlexGroup>
+ </EuiPanel>
  <EuiSpacer
  size="s"
  >
@@ -349,28 +386,20 @@ exports[`Added Integration View Test Renders added integration view using dummy
  <div
  className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
  >
- <PanelTitle
- title="Assets List"
+ <EuiTitle
+ size="s"
  >
- <EuiText
- size="m"
+ <h3
+ className="euiTitle euiTitle--small"
  >
- <div
- className="euiText euiText--medium"
- >
- <span
- className="panel-title"
- >
- Assets List
- </span>
- </div>
- </EuiText>
- </PanelTitle>
+ Assets List
+ </h3>
+ </EuiTitle>
  <EuiSpacer
- size="l"
+ size="s"
  >
  <div
- className="euiSpacer euiSpacer--l"
+ className="euiSpacer euiSpacer--s"
  />
  </EuiSpacer>
  <EuiInMemoryTable