From 619ea43345dd60ceab2543157bbcc181e163e06c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ida=20=C5=A0tambuk?= <ida.stambuk@grafana.com>
Date: Mon, 12 Feb 2024 12:26:26 +0100
Subject: [PATCH] Connection config: import assumeRoleInstructionsStyle instead
 of passing it as prop (#76)

---
 src/components/ConnectionConfig.tsx    | 17 ++++++-----------
 src/components/NewConnectionConfig.tsx |  4 +---
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/components/ConnectionConfig.tsx b/src/components/ConnectionConfig.tsx
index c09dac4..4987d8f 100644
--- a/src/components/ConnectionConfig.tsx
+++ b/src/components/ConnectionConfig.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useMemo, useState } from 'react';
-import { Input, Select, InlineField, ButtonGroup, ToolbarButton, FieldSet, Collapse, useStyles2 } from '@grafana/ui';
+import { Input, Select, InlineField, ButtonGroup, ToolbarButton, FieldSet, Collapse } from '@grafana/ui';
 import {
   DataSourcePluginOptionsEditorProps,
   onUpdateDatasourceJsonDataOptionSelect,
@@ -79,7 +79,6 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
   }, [loadRegions]);
 
   const inputWidth = inExperimentalAuthComponent ? 'width-20' : 'width-30';
-  const styles = useStyles2(getStyles);
 
   return (
     <>
@@ -91,7 +90,6 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
           setIsARNInstructionsOpen={setIsARNInstructionsOpen}
           awsAssumeRoleEnabled={awsAssumeRoleEnabled}
           regions={regions}
-          assumeRoleInstructionsStyle={styles.assumeRoleInstructions}
           {...props}
         />
       ) : (
@@ -176,7 +174,7 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
           )}
 
           {options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && (
-            <div className={styles.assumeRoleInstructions}>
+            <div className={assumeRoleInstructionsStyle}>
               <Collapse
                 label={'How to create an IAM role for grafana to assume:'}
                 collapsible={true}
@@ -305,10 +303,7 @@ export const ConnectionConfig: FC<ConnectionConfigProps> = (props: ConnectionCon
   );
 };
 
-function getStyles() {
-  return {
-    assumeRoleInstructions: css({
-      maxWidth: '715px',
-    }),
-  };
-}
+export const assumeRoleInstructionsStyle = css({
+  maxWidth: '715px',
+})
+
diff --git a/src/components/NewConnectionConfig.tsx b/src/components/NewConnectionConfig.tsx
index 905de60..612eb1e 100644
--- a/src/components/NewConnectionConfig.tsx
+++ b/src/components/NewConnectionConfig.tsx
@@ -10,7 +10,7 @@ import {
 import { AwsAuthType } from '../types';
 import { awsAuthProviderOptions } from '../providers';
 import { ConfigSection, ConfigSubSection } from '@grafana/experimental';
-import { ConnectionConfigProps } from './ConnectionConfig';
+import { ConnectionConfigProps, assumeRoleInstructionsStyle } from './ConnectionConfig';
 
 interface NewConnectionConfigProps extends ConnectionConfigProps {
   currentProvider?: SelectableValue<AwsAuthType> | undefined;
@@ -19,7 +19,6 @@ interface NewConnectionConfigProps extends ConnectionConfigProps {
   setIsARNInstructionsOpen: (isOpen: boolean) => void;
   awsAssumeRoleEnabled: boolean;
   regions: SelectableValue[];
-  assumeRoleInstructionsStyle: string;
 }
 
 export const NewConnectionConfig = ({
@@ -30,7 +29,6 @@ export const NewConnectionConfig = ({
   awsAllowedAuthProviders,
   skipHeader,
   regions,
-  assumeRoleInstructionsStyle,
   ...props
 }: NewConnectionConfigProps) => {
   const options = props.options;