Fix column caret display on schedules (#4612)

# What this PR does - Fixed column spacing ## Which issue(s) this PR closes Closes #4480
grafana · Jul 8, 2024 · 37f661a · 37f661a
1 parent 24aa3a5
commit 37f661a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 16 deletions.
diff --git a/grafana-plugin/src/components/GTable/GTable.tsx b/grafana-plugin/src/components/GTable/GTable.tsx
@@ -135,7 +135,7 @@ export const GTable = <RT extends DefaultRecordType = DefaultRecordType>(props:
   }, [rowSelection, columnsProp, data]);
 
   return (
-    <div className={cx(styles.root, { [styles.fixed]: props.tableLayout === 'fixed' })} data-testid="test__gTable">
+    <div className={styles.root} data-testid="test__gTable">
       <Table<RT>
         expandable={expandable}
         rowKey={rowKey}
@@ -162,12 +162,6 @@ const getGTableStyles = () => ({
     }
   `,
 
-  fixed: css`
-    table {
-      table-layout: fixed;
-    }
-  `,
-
   pagination: css`
     margin-top: 20px;
   `,

diff --git a/grafana-plugin/src/components/Table/Table.styles.ts b/grafana-plugin/src/components/Table/Table.styles.ts
@@ -10,10 +10,6 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
         width: 100%;
       }
 
-      table :global(.rc-table-row-expand-icon-cell) > span {
-        pointer-events: none;
-      }
-
       tr {
         min-height: 56px;
       }
@@ -43,7 +39,7 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       transition: transform 0.2s;
 
       &--expanded {
-        transform: rotate(0deg);
+        transform: rotate(0deg) translateY(-5px); // to manually compensate for top: 3px
       }
     `,
 

diff --git a/grafana-plugin/src/containers/ServiceNowConfigDrawer/ServiceNowTokenSection.tsx b/grafana-plugin/src/containers/ServiceNowConfigDrawer/ServiceNowTokenSection.tsx
@@ -87,7 +87,7 @@ export const ServiceNowTokenSection: React.FC<ServiceNowTokenSectionProps> = obs
 
   function renderGenerateButton() {
     return (
-      <Button variant="secondary" onClick={onTokenGenerate} disabled={isLoading} className={'aaaa'}>
+      <Button variant="secondary" onClick={onTokenGenerate} disabled={isLoading}>
         {isExistingToken ? 'Regenerate' : 'Generate'}
       </Button>
     );

diff --git a/grafana-plugin/src/pages/schedules/Schedules.styles.ts b/grafana-plugin/src/pages/schedules/Schedules.styles.ts
@@ -6,6 +6,14 @@ export const getSchedulesStyles = () => {
       position: relative;
     `,
 
+    tableRoot: css`
+      td.rc-table-row-expand-icon-cell {
+        position: relative;
+        top: 5px;
+        left: 3px;
+      }
+    `,
+
     table: css`
       td {
         padding-top: 5px;

diff --git a/grafana-plugin/src/pages/schedules/Schedules.tsx b/grafana-plugin/src/pages/schedules/Schedules.tsx
@@ -105,7 +105,7 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
               onChange={this.handleSchedulesFiltersChange}
             />
           </div>
-          <div data-testid="schedules-table">
+          <div className={cx(styles.tableRoot)} data-testid="schedules-table">
             <GTable
               className={styles.table}
               columns={this.getTableColumns()}
@@ -115,10 +115,9 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
                 total: results ? Math.ceil((count || 0) / page_size) : 0,
                 onChange: this.handlePageChange,
               }}
-              tableLayout="fixed"
               rowKey="id"
               expandable={{
-                expandedRowKeys: expandedRowKeys,
+                expandedRowKeys,
                 onExpand: this.handleExpandRow,
                 expandedRowRender: this.renderSchedule,
                 expandRowByClick: true,
@@ -412,6 +411,12 @@ class _SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSt
     const styles = getSchedulesStyles();
 
     return [
+      {
+        // Allow space for icon (>)
+        width: '40px',
+        title: '',
+        render: () => <></>,
+      },
       {
         width: '10%',
         title: 'Type',