UI Adjustments Left Nav, Notebooks, Applications (#2168) (#2170)

(cherry picked from commit ce6fba4) Signed-off-by: Adam Tackett <tackadam@amazon.com> 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> Co-authored-by: Adam Tackett <tackadam@amazon.com>
opensearch-project · Sep 16, 2024 · 03d12a9 · 03d12a9
1 parent c13167e
commit 03d12a9
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 132 deletions.
diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx
@@ -10,7 +10,6 @@ import {
  EuiFieldSearch,
  EuiFlexGroup,
  EuiFlexItem,
- EuiHorizontalRule,
  EuiInMemoryTable,
  EuiLink,
  EuiLoadingSpinner,
@@ -236,7 +235,7 @@ export function AppTable(props: AppTableProps) {
  </EuiTitle>
  )}
  </EuiPageHeader>
- <EuiPageContent id="applicationArea">
+ <EuiPageContent id="applicationArea" paddingSize="m">
  <EuiPageContentHeader>
  <EuiFlexGroup gutterSize="s" alignItems="center">
  <EuiFlexItem>
@@ -261,7 +260,6 @@ export function AppTable(props: AppTableProps) {
  </EuiFlexItem>
  </EuiFlexGroup>
  </EuiPageContentHeader>
- <EuiHorizontalRule />
  {filteredApplications.length > 0 ? (
  <EuiInMemoryTable
  loading={props.loading}

diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
@@ -11,7 +11,6 @@ import {
  EuiPageHeaderSection,
  EuiPanel,
  EuiSelectOption,
- EuiSpacer,
  EuiTabbedContent,
  EuiTabbedContentTab,
  EuiText,
@@ -292,7 +291,6 @@ export function Application(props: AppDetailProps) {
  const getService = () => {
  return (
  <>
- <EuiSpacer size="m" />
  <ServicesContent
  {...props}
  page="app"
@@ -317,7 +315,6 @@ export function Application(props: AppDetailProps) {
  const getTrace = () => {
  return (
  <>
- <EuiSpacer size="m" />
  <TracesContent
  {...props}
  page="app"
@@ -330,7 +327,6 @@ export function Application(props: AppDetailProps) {
  setEndTime={setEndTimeForApp}
  dataSourceMDSId={[{ id: '', label: '' }]}
  />
- <EuiSpacer size="m" />
  <EuiPanel>
  <PanelTitle title="Spans" totalItems={totalSpans} />
  <EuiHorizontalRule margin="m" />

diff --git a/public/components/application_analytics/components/configuration.tsx b/public/components/application_analytics/components/configuration.tsx
@@ -37,14 +37,7 @@ interface ConfigProps {
 }
 
 export const Configuration = (props: ConfigProps) => {
- const {
- appId,
- application,
- parentBreadcrumbs,
- visWithAvailability,
- updateApp,
- switchToAvailability,
- } = props;
+ const { appId, application, visWithAvailability, updateApp, switchToAvailability } = props;
  const [availabilityVisId, setAvailabilityVisId] = useState(
  application.availability.availabilityVisId || ''
  );
@@ -58,11 +51,11 @@ export const Configuration = (props: ConfigProps) => {
  <div>
  <EuiPage>
  <EuiPageBody component="div">
- <EuiPageContent>
+ <EuiPageContent paddingSize="m">
  <EuiPageContentHeader>
  <EuiPageContentHeaderSection>
- <EuiTitle>
- <h3 style={{ paddingTop: '10px' }}>Configuration details</h3>
+ <EuiTitle size="s">
+ <h2>Configuration details</h2>
  </EuiTitle>
  </EuiPageContentHeaderSection>
  <EuiPageContentHeaderSection>

diff --git a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
  </div>
  </header>
  <div
- class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+ class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
  id="notebookArea"
  role="main"
  >
@@ -190,8 +190,8 @@ exports[`<NoteTable /> spec renders the component 1`] = `
  </div>
  </div>
  </div>
- <hr
- class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+ <div
+ class="euiSpacer euiSpacer--m"
  />
  <div
  class="euiBasicTable"
@@ -933,7 +933,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
  </div>
  </header>
  <div
- class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+ class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
  id="notebookArea"
  role="main"
  >

diff --git a/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap
@@ -29,74 +29,86 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
  <div
  class="euiFlexItem euiFlexItem--flexGrowZero"
  >
- <button
- class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--small"
- data-test-subj="notebook-delete-icon"
- type="button"
+ <span
+ class="euiToolTipAnchor"
  >
- <svg
- aria-hidden="true"
- class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
- focusable="false"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
- xmlns="http://www.w3.org/2000/svg"
+ <button
+ class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--small"
+ data-test-subj="notebook-delete-icon"
+ type="button"
  >
- <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>
- </button>
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ height="16"
+ role="img"
+ 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>
+ </button>
+ </span>
  </div>
  <div
  class="euiFlexItem euiFlexItem--flexGrowZero"
  >
- <button
- class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--small"
- data-test-subj="notebook-edit-icon"
- type="button"
+ <span
+ class="euiToolTipAnchor"
  >
- <svg
- aria-hidden="true"
- class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
- focusable="false"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
- xmlns="http://www.w3.org/2000/svg"
+ <button
+ class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--small"
+ data-test-subj="notebook-edit-icon"
+ type="button"
  >
- <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>
- </button>
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ height="16"
+ role="img"
+ 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>
+ </button>
+ </span>
  </div>
  <div
  class="euiFlexItem euiFlexItem--flexGrowZero"
  >
- <button
- class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--small"
- data-test-subj="notebook-duplicate-icon"
- type="button"
+ <span
+ class="euiToolTipAnchor"
  >
- <svg
- aria-hidden="true"
- class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
- focusable="false"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
- xmlns="http://www.w3.org/2000/svg"
+ <button
+ class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--small"
+ data-test-subj="notebook-duplicate-icon"
+ type="button"
  >
- <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>
- </button>
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+ focusable="false"
+ height="16"
+ role="img"
+ 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>
+ </button>
+ </span>
  </div>
  </div>
  <div
@@ -482,26 +494,30 @@ exports[`<Notebook /> spec Renders the visualization component 1`] = `
  <div
  class="euiFlexItem euiFlexItem--flexGrowZero"
  >
- <button
- class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--small"
- data-test-subj="notebook-delete-icon"
- type="button"
+ <span
+ class="euiToolTipAnchor"
  >
- <svg
- aria-hidden="true"
- class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
- focusable="false"
- height="16"
- role="img"
- viewBox="0 0 16 16"
- width="16"
- xmlns="http://www.w3.org/2000/svg"
+ <button
+ class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--small"
+ data-test-subj="notebook-delete-icon"
+ type="button"
  >
- <path
- d="M11 3h5v1H0V3h5V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2Zm-7.056 8H7v1H4.1l.392 2.519c.042.269.254.458.493.458h6.03c.239 0 .451-.189.493-.458l1.498-9.576H14l-1.504 9.73c-.116.747-.74 1.304-1.481 1.304h-6.03c-.741 0-1.365-.557-1.481-1.304l-1.511-9.73H9V5.95H3.157L3.476 8H8v1H3.632l.312 2ZM6 3h4V1H6v2Z"
- />
- </svg>
- </button>
+ <svg
+ aria-hidden="true"
+ class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+ focusable="false"
+ height="16"
+ role="img"
+ viewBox="0 0 16 16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M11 3h5v1H0V3h5V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2Zm-7.056 8H7v1H4.1l.392 2.519c.042.269.254.458.493.458h6.03c.239 0 .451-.189.493-.458l1.498-9.576H14l-1.504 9.73c-.116.747-.74 1.304-1.481 1.304h-6.03c-.741 0-1.365-.557-1.481-1.304l-1.511-9.73H9V5.95H3.157L3.476 8H8v1H3.632l.312 2ZM6 3h4V1H6v2Z"
+ />
+ </svg>
+ </button>
+ </span>
  </div>
  </div>
  <div

diff --git a/public/components/notebooks/components/note_table.tsx b/public/components/notebooks/components/note_table.tsx
@@ -7,7 +7,6 @@ import {
  EuiCompressedFieldSearch,
  EuiFlexGroup,
  EuiFlexItem,
- EuiHorizontalRule,
  EuiInMemoryTable,
  EuiLink,
  EuiOverlayMask,
@@ -239,7 +238,7 @@ export function NoteTable({
  </EuiPageHeaderSection>
  </EuiPageHeader>
  )}
- <EuiPageContent id="notebookArea">
+ <EuiPageContent id="notebookArea" paddingSize="m">
  {newNavigation ? (
  <HeaderControlledComponentsWrapper
  description={
@@ -348,7 +347,7 @@ export function NoteTable({
  />
  </EuiFlexItem>
  </EuiFlexGroup>
- <EuiHorizontalRule margin="m" />
+ <EuiSpacer size="m" />
  <EuiInMemoryTable
  loading={loading}
  items={