Buttons: replace usage of .btn classnames (#33226)

* refactor(loginpage): migrate custom button styles to use Button component

* refactor(certificationkey): prefer grafana-ui form elements over html elements and classnames

* refactor(axisselector): prefer grafana-ui Button component over html button element

* refactor(input-datasource): replace use of btn class with grafana-ui components

* chore(grafana-ui): delete deprecated ToggleButtonGroup component

* refactor: replace btn and cta-form__close class usage with IconButton

* chore(closebutton): post master merge use v2 theme

* refactor(permissionlist): remove usage of .btn classname

* Wip

* docs(styling): update styling and theme docs import paths

* refactor(alerting): remote btn classnames from TestRuleResult

* refactor(apikeys): prefer grafana-ui Button components over btn classNames

* refactor(folders): prefer grafana-ui Button components over btn classNames

* refactor(teams): prefer grafana-ui Button components over btn classNames

* refactor(datasources): prefer grafana-ui Button components over btn classNames

* refactor: prefer grafana-ui Button components over btn classNames

* Minor style tweak to service buttons

* test: update snapshots related to button changes

* chore(input-datasource): remove unused import declaration

* refactor(loginservicebuttons): rename theme.palette to theme.colors

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/folders/FolderPermissions.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import Page from 'app/core/components/Page/Page';
-import { Tooltip, Icon } from '@grafana/ui';
+import { Tooltip, Icon, Button } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { StoreState } from 'app/types';
@@ -105,9 +105,9 @@ export class FolderPermissions extends PureComponent<Props, State> {
               <Icon className="icon--has-hover page-sub-heading-icon" name="question-circle" />
             </Tooltip>
             <div className="page-action-bar__spacer" />
-            <button className="btn btn-primary pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
+            <Button className="pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
               Add Permission
-            </button>
+            </Button>
           </div>
           <SlideDown in={isAdding}>
             <AddPermission onAddPermission={this.onAddPermission} onCancel={this.onCancelAddPermission} />

public/app/features/folders/FolderSettingsPage.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import { LegacyForms } from '@grafana/ui';
+import { Button, LegacyForms } from '@grafana/ui';
 const { Input } = LegacyForms;
 import Page from 'app/core/components/Page/Page';
 import appEvents from 'app/core/app_events';
@@ -99,12 +99,12 @@ export class FolderSettingsPage extends PureComponent<Props, State> {
                 />
               </div>
               <div className="gf-form-button-row">
-                <button type="submit" className="btn btn-primary" disabled={!folder.canSave || !folder.hasChanged}>
+                <Button type="submit" disabled={!folder.canSave || !folder.hasChanged}>
                   Save
-                </button>
-                <button className="btn btn-danger" onClick={this.onDelete} disabled={!folder.canSave}>
+                </Button>
+                <Button variant="destructive" onClick={this.onDelete} disabled={!folder.canSave}>
                   Delete
-                </button>
+                </Button>
               </div>
             </form>
           </div>

public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap

@@ -37,20 +37,19 @@ exports[`Render should enable save button 1`] = `
         <div
           className="gf-form-button-row"
         >
-          <button
-            className="btn btn-primary"
+          <Button
             disabled={false}
             type="submit"
           >
             Save
-          </button>
-          <button
-            className="btn btn-danger"
+          </Button>
+          <Button
             disabled={false}
             onClick={[Function]}
+            variant="destructive"
           >
             Delete
-          </button>
+          </Button>
         </div>
       </form>
     </div>
@@ -95,20 +94,19 @@ exports[`Render should render component 1`] = `
         <div
           className="gf-form-button-row"
         >
-          <button
-            className="btn btn-primary"
+          <Button
             disabled={true}
             type="submit"
           >
             Save
-          </button>
-          <button
-            className="btn btn-danger"
+          </Button>
+          <Button
             disabled={false}
             onClick={[Function]}
+            variant="destructive"
           >
             Delete
-          </button>
+          </Button>
         </div>
       </form>
     </div>