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

* ui adjustments Signed-off-by: Adam Tackett <[email protected]> * update getting started card footer Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Adam Tackett <[email protected]>
opensearch-project · Sep 16, 2024 · ce6fba4 · ce6fba4
1 parent c41c986
commit ce6fba4
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
@@ -36,14 +36,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 || ''
   );
@@ -57,11 +50,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={