SupportBundles: Improve UX (#60964)

implement of easy frontend fixes for bundle list

public/app/features/support-bundles/SupportBundles.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { dateTimeFormat } from '@grafana/data';
-import { getBackendSrv } from '@grafana/runtime';
+import { config, getBackendSrv } from '@grafana/runtime';
 import { LinkButton } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
@@ -13,6 +13,12 @@ const subTitle = (
   </span>
 );
 
+const newButton = (
+  <LinkButton icon="plus" href="admin/support-bundles/create" variant="primary">
+    New Support Bundle
+  </LinkButton>
+);
+
 type SupportBundleState = 'complete' | 'error' | 'timeout' | 'pending';
 
 interface SupportBundle {
@@ -34,17 +40,17 @@ function SupportBundles() {
     fetchBundles();
   }, [fetchBundles]);
 
+  const actions = config.featureToggles.topnav ? newButton : undefined;
+
   return (
-    <Page navId="support-bundles" subTitle={subTitle}>
+    <Page navId="support-bundles" subTitle={subTitle} actions={actions}>
       <Page.Contents isLoading={bundlesState.loading}>
-        <LinkButton href="admin/support-bundles/create" variant="primary">
-          Create New Support Bundle
-        </LinkButton>
+        {!config.featureToggles.topnav && newButton}
 
         <table className="filter-table form-inline">
           <thead>
             <tr>
-              <th>Date</th>
+              <th>Created on</th>
               <th>Requested by</th>
               <th>Expires</th>
               <th style={{ width: '1%' }} />
@@ -57,7 +63,12 @@ function SupportBundles() {
                 <th>{b.creator}</th>
                 <th>{dateTimeFormat(b.expiresAt * 1000)}</th>
                 <th>
-                  <LinkButton disabled={b.state !== 'complete'} target={'_self'} href={'/api/support-bundles/' + b.uid}>
+                  <LinkButton
+                    fill="outline"
+                    disabled={b.state !== 'complete'}
+                    target={'_self'}
+                    href={'/api/support-bundles/' + b.uid}
+                  >
                     Download
                   </LinkButton>
                 </th>

public/app/features/support-bundles/SupportBundlesCreate.tsx

@@ -25,6 +25,12 @@ const createSupportBundle = async (data: SupportBundleCreateRequest) => {
   return result;
 };
 
+const subTitle = (
+  <span>
+    Choose the components for the support bundle. The support bundle will be available for 3 days after creation.
+  </span>
+);
+
 export const SupportBundlesCreate = ({}: Props): JSX.Element => {
   const onSubmit = useCallback(async (data) => {
     try {
@@ -57,7 +63,7 @@ export const SupportBundlesCreate = ({}: Props): JSX.Element => {
   }, {});
 
   return (
-    <Page navId="support-bundles" pageNav={{ text: 'Create support bundle' }}>
+    <Page navId="support-bundles" pageNav={{ text: 'Create support bundle' }} subTitle={subTitle}>
       <Page.Contents>
         <Page.OldNavOnly>
           <h3 className="page-sub-heading">Create support bundle</h3>