feat: update Connection buttons

src/components/Connection/ConnectionFormLogin.tsx

@@ -8,7 +8,7 @@ import AccountService from 'services/account.service'
 import ConnectionService from 'services/connection.service'
 
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
 
 import iconGRDFLogo from 'assets/icons/visu/grdf-logo.svg'
@@ -206,7 +206,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
       <div className="form-message">{error === '' ? null : error}</div>
       <div className="kloginauthform">
         <div className="kloginauthform-button">
-          <MuiButton
+          <Button
             type="submit"
             aria-label={t('auth.accessibility.button_connect')}
             disabled={loading}
@@ -224,7 +224,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
                 <div>{t('auth.' + konnectorSlug + '.connect.label2')}</div>
               </div>
             </div>
-          </MuiButton>
+          </Button>
         </div>
         <div className="kloginauthform-text text-16-bold">
           <div className="text-16-bold">
@@ -235,7 +235,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
           </div>
         </div>
 
-        <MuiButton
+        <Button
           disabled={loading}
           aria-label={t('auth.accessibility.button_create_account')}
           onClick={() => window.open(siteLink, '_blank')}
@@ -245,7 +245,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
           }}
         >
           {t('auth.' + konnectorSlug + '.create_account')}
-        </MuiButton>
+        </Button>
       </div>
     </form>
   )

src/components/Connection/ConnectionFormOAuth.tsx

@@ -6,7 +6,7 @@ import './connectionFormOAuth.scss'
 
 import { Konnector, Trigger, FluidStatus, FluidConnection } from 'models'
 import OAuthForm from 'components/Connection/OAuthForm'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import AccountService from 'services/account.service'
 import TriggerService from 'services/triggers.service'
 import { updatedFluidConnection } from 'store/global/global.actions'
@@ -87,7 +87,7 @@ const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
         </div>
       </div>
       <div className="koauthform-button">
-        <MuiButton
+        <Button
           aria-label={t('auth.accessibility.button_create_account')}
           onClick={() => window.open(siteLink, '_blank')}
           classes={{
@@ -96,7 +96,7 @@ const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
           }}
         >
           {t('auth.' + konnectorSlug + '.create_account')}
-        </MuiButton>
+        </Button>
       </div>
     </div>
   )

src/components/Connection/ConnectionNotFound.spec.tsx

-import React from 'react'
-import { shallow, mount } from 'enzyme'
-import ConnectionNotFound from './ConnectionNotFound'
-import MuiButton from '@material-ui/core/Button'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
-  return {
-    useI18n: jest.fn(() => {
-      return {
-        t: (str: string) => str,
-      }
-    }),
-  }
-})
-
-describe('ConnectionNotFound component test', () => {
-  const konnectorSlug = 'enedisgrandlyon'
-
-  it('should correctly render connection not found', () => {
-    const result = shallow(
-      <ConnectionNotFound konnectorSlug={konnectorSlug} />
-    ).getElement()
-    expect(result).toMatchSnapshot()
-  })
-
-  it('should open konnector url when button is clicked', () => {
-    global.open = jest.fn()
-
-    const wrapper = mount(<ConnectionNotFound konnectorSlug={konnectorSlug} />)
-    const submitStyledButton = wrapper.find(MuiButton)
-    submitStyledButton.simulate('click')
-
-    expect(global.open).toHaveBeenCalledWith(
-      'http://localhost/#/discover/enedisgrandlyon',
-      '_blank'
-    )
-  })
-})
+import React from 'react'
+import { shallow, mount } from 'enzyme'
+import ConnectionNotFound from './ConnectionNotFound'
+import Button from '@material-ui/core/Button'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+  return {
+    useI18n: jest.fn(() => {
+      return {
+        t: (str: string) => str,
+      }
+    }),
+  }
+})
+
+describe('ConnectionNotFound component test', () => {
+  const konnectorSlug = 'enedisgrandlyon'
+
+  it('should correctly render connection not found', () => {
+    const result = shallow(
+      <ConnectionNotFound konnectorSlug={konnectorSlug} />
+    ).getElement()
+    expect(result).toMatchSnapshot()
+  })
+
+  it('should open konnector url when button is clicked', () => {
+    global.open = jest.fn()
+
+    const wrapper = mount(<ConnectionNotFound konnectorSlug={konnectorSlug} />)
+    const submitStyledButton = wrapper.find(Button)
+    submitStyledButton.simulate('click')
+
+    expect(global.open).toHaveBeenCalledWith(
+      'http://localhost/#/discover/enedisgrandlyon',
+      '_blank'
+    )
+  })
+})

src/components/Connection/OAuthForm.tsx

@@ -10,7 +10,7 @@ import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
 import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
 import iconGrdfLogo from 'assets/icons/visu/grdf-logo.svg'
 import iconEglLogo from 'assets/icons/visu/egl-logo.svg'
-import MuiButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
 import ModalGRDF from './ModalGRDF'
@@ -70,7 +70,7 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
   const isWaiting = status === WAITING
   return !konnector ? null : (
     <>
-      <MuiButton
+      <Button
         aria-label={t('auth.accessibility.button_connect')}
         onClick={
           konnector.slug === fluidconfig[FluidType.GAS].konnectorConfig.slug
@@ -96,7 +96,7 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
             <div>{t('auth.' + konnector.slug + '.connect.label2')}</div>
           </div>
         </div>
-      </MuiButton>
+      </Button>
       {isWaiting && (
         <OAuthWindow
           client={client}