DashboardPage: refactored styles from sass to emotion (#32955)

* DashboardPage: refactored styles from sass to emotion

* refactored dashboardPage component to be alot easier to read and understand

* more refactoring...

* more cleaning...

* fixes frontend test

* fixes frontend test- I hope

* fixes frontend test- I hope

* moves dashboard scss styles back to it's standalone file

public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { css } from 'emotion';
+import { Alert, useStyles } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { DashboardInitError, AppNotificationSeverity } from 'app/types';
+import { getMessageFromError } from 'app/core/utils/errors';
+
+export interface Props {
+  initError?: DashboardInitError;
+}
+
+export const DashboardFailed = ({ initError }: Props) => {
+  const styles = useStyles(getStyles);
+  if (!initError) {
+    return null;
+  }
+
+  return (
+    <div className={styles.dashboardLoading}>
+      <Alert severity={AppNotificationSeverity.Error} title={initError.message}>
+        {getMessageFromError(initError.error)}
+      </Alert>
+    </div>
+  );
+};
+
+export const getStyles = (theme: GrafanaTheme) => {
+  return {
+    dashboardLoading: css`
+      height: 60vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+  };
+};

public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { css } from 'emotion';
+import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui';
+import { locationService } from '@grafana/runtime';
+import { GrafanaTheme } from '@grafana/data';
+import { DashboardInitPhase } from 'app/types';
+
+export interface Props {
+  initPhase: DashboardInitPhase;
+}
+
+export const DashboardLoading = ({ initPhase }: Props) => {
+  const styles = useStyles(getStyles);
+  const cancelVariables = () => {
+    locationService.push('/');
+  };
+
+  return (
+    <div className={styles.dashboardLoading}>
+      <div className={styles.dashboardLoadingText}>
+        <VerticalGroup spacing="md">
+          <HorizontalGroup align="center" justify="center" spacing="xs">
+            <Spinner inline={true} /> {initPhase}
+          </HorizontalGroup>{' '}
+          <HorizontalGroup align="center" justify="center">
+            <Button variant="secondary" size="md" icon="repeat" onClick={cancelVariables}>
+              Cancel loading dashboard
+            </Button>
+          </HorizontalGroup>
+        </VerticalGroup>
+      </div>
+    </div>
+  );
+};
+
+export const getStyles = (theme: GrafanaTheme) => {
+  return {
+    dashboardLoading: css`
+      height: 60vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+    dashboardLoadingText: css`
+      font-size: ${theme.typography.size.lg};
+    `,
+  };
+};