Revert button changes

Signed-off-by: Dan Dong <[email protected]>
opensearch-project · Aug 23, 2024 · b3a4f5c · b3a4f5c
1 parent 0098607
commit b3a4f5c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/public/apps/configuration/panels/auth-view/instruction-view.tsx b/public/apps/configuration/panels/auth-view/instruction-view.tsx
@@ -41,6 +41,7 @@ export function InstructionView(props: { config: ClientConfigType }) {
       {props.config.ui.backend_configurable && (
         <div style={{ textAlign: 'center' }}>
           <ExternalLinkButton
+            fill
             size="s"
             href={DocLinks.BackendConfigurationDoc}
             text="Create config.yml"

diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
@@ -25,7 +25,6 @@ import {
   EuiText,
   EuiTitle,
   EuiGlobalToastList,
-  EuiSmallButtonEmpty,
 } from '@elastic/eui';
 import React, { useContext } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
@@ -59,7 +58,11 @@ const addBackendStep = {
 
       <EuiFlexGroup gutterSize="s" wrap>
         <EuiFlexItem grow={false}>
-          <ExternalLinkButton href={DocLinks.BackendConfigurationDoc} text="Create config.yml" />
+          <ExternalLinkButton
+            fill
+            href={DocLinks.BackendConfigurationDoc}
+            text="Create config.yml"
+          />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiSmallButton
@@ -93,14 +96,14 @@ const setOfSteps = [
 
         <EuiFlexGroup gutterSize="s">
           <EuiFlexItem grow={false}>
-            <EuiSmallButtonEmpty
+            <EuiSmallButton
               data-test-subj="explore-existing-roles"
               onClick={() => {
                 window.location.href = buildHashUrl(ResourceType.roles);
               }}
             >
               Explore existing roles
-            </EuiSmallButtonEmpty>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiSmallButton
@@ -132,14 +135,14 @@ const setOfSteps = [
 
         <EuiFlexGroup gutterSize="s">
           <EuiFlexItem grow={false}>
-            <EuiSmallButtonEmpty
+            <EuiSmallButton
               data-test-subj="map-users-to-role"
               onClick={() => {
                 window.location.href = buildHashUrl(ResourceType.users);
               }}
             >
               Map users to a role
-            </EuiSmallButtonEmpty>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiSmallButton
@@ -233,14 +236,14 @@ export function GetStarted(props: AppDependencies) {
               />{' '}
               <ExternalLink href={DocLinks.AuditLogsDoc} />
             </p>
-            <EuiSmallButtonEmpty
+            <EuiSmallButton
               data-test-subj="review-audit-log-configuration"
               onClick={() => {
                 window.location.href = buildHashUrl(ResourceType.auditLogging);
               }}
             >
               Review Audit Log Configuration
-            </EuiSmallButtonEmpty>
+            </EuiSmallButton>
           </EuiText>
         </EuiPanel>
 
@@ -301,22 +304,22 @@ export function GetStarted(props: AppDependencies) {
               </p>
               <EuiFlexGroup gutterSize="s">
                 <EuiFlexItem grow={false}>
-                  <EuiSmallButtonEmpty
+                  <EuiSmallButton
                     onClick={() => {
                       window.location.href = buildHashUrl(ResourceType.tenants);
                     }}
                   >
                     Manage Multi-tenancy
-                  </EuiSmallButtonEmpty>
+                  </EuiSmallButton>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiSmallButtonEmpty
+                  <EuiSmallButton
                     onClick={() => {
                       window.location.href = buildHashUrl(ResourceType.tenantsConfigureTab);
                     }}
                   >
                     Configure Multi-tenancy
-                  </EuiSmallButtonEmpty>
+                  </EuiSmallButton>
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiText>

diff --git a/public/apps/configuration/utils/display-utils.tsx b/public/apps/configuration/utils/display-utils.tsx
@@ -20,8 +20,8 @@ import {
   EuiText,
   EuiIcon,
   EuiFlexGroup,
-  EuiSmallButtonEmpty,
-  EuiButtonEmptyProps,
+  EuiSmallButton,
+  EuiButtonProps,
   EuiToolTip,
   EuiLink,
 } from '@elastic/eui';
@@ -131,12 +131,12 @@ export const displayHeaderWithTooltip = (columnHeader: string, tooltipText: stri
   );
 };
 
-export function ExternalLinkButton(props: { text: string; href: string } & EuiButtonEmptyProps) {
+export function ExternalLinkButton(props: { text: string; href: string } & EuiButtonProps) {
   const { text, ...buttonProps } = props;
   return (
-    <EuiSmallButtonEmpty iconType="popout" iconSide="right" target="_blank" {...buttonProps}>
+    <EuiSmallButton iconType="popout" iconSide="right" target="_blank" {...buttonProps}>
       {props.text}
-    </EuiSmallButtonEmpty>
+    </EuiSmallButton>
   );
 }
 

diff --git a/public/apps/configuration/utils/test/display-utils.test.tsx b/public/apps/configuration/utils/test/display-utils.test.tsx
@@ -91,7 +91,7 @@ describe('Display utils', () => {
 
   it('Render External Link Button', () => {
     const component = shallow(
-      <ExternalLinkButton size="s" href="http://localhost:5601" text="Test" />
+      <ExternalLinkButton fill size="s" href="http://localhost:5601" text="Test" />
     );
     expect(component).toMatchSnapshot();
   });