[release-12.0.1] Provisioning: Add onboarding page graphic (#104367)

Provisioning: Add onboarding page graphic (#104162)

* Provisioning: Add onboarding page graphic

* Update translations

(cherry picked from commit b6e5b5d20f)

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

public/app/features/provisioning/GettingStarted/GettingStarted.tsx

@@ -1,7 +1,8 @@
 import { css } from '@emotion/css';
 import { useState } from 'react';
 
-import { Alert, Stack, Text } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, Stack, useStyles2 } from '@grafana/ui';
 import { useGetFrontendSettingsQuery, Repository } from 'app/api/clients/provisioning';
 import { t, Trans } from 'app/core/internationalization';
 
@@ -121,6 +122,7 @@ interface Props {
 }
 
 export default function GettingStarted({ items }: Props) {
+  const styles = useStyles2(getStyles);
   const settingsQuery = useGetFrontendSettingsQuery(undefined, { refetchOnMountOrArgChange: true });
   const legacyStorage = settingsQuery.data?.legacyStorage;
   const hasItems = Boolean(settingsQuery.data?.items?.length);
@@ -154,21 +156,8 @@ export default function GettingStarted({ items }: Props) {
               setShowModal(true);
             }}
           />
-          <div
-            className={css({
-              height: 360,
-              width: '50%',
-              background: `linear-gradient(to right, rgba(255, 179, 102, 0.6), rgba(255, 143, 143, 0.8))`,
-              borderRadius: `4px`,
-              padding: `16px`,
-              display: `flex`,
-              alignItems: `center`,
-              justifyContent: `center`,
-            })}
-          >
-            <Text variant="h2">
-              <Trans i18nKey="provisioning.getting-started.engaging-graphic">Engaging graphic</Trans>
-            </Text>
+          <div className={styles.imageContainer}>
+            <img src={'public/img/provisioning/provisioning.webp'} className={styles.image} />
           </div>
         </Stack>
         {(!hasPublicAccess || !hasImageRenderer) && hasItems && (
@@ -192,3 +181,19 @@ export default function GettingStarted({ items }: Props) {
     </>
   );
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    imageContainer: css({
+      height: 400,
+      display: `flex`,
+      alignItems: `center`,
+      justifyContent: `center`,
+    }),
+    image: css({
+      borderRadius: theme.shape.radius.default,
+      width: '100%',
+      height: '100%',
+    }),
+  };
+}

public/locales/en-US/grafana.json

@@ -6597,7 +6597,6 @@
     },
     "getting-started": {
       "alert-temporary-outage": "When you connect your whole instance, dashboards will be unavailable while running the migration. We recommend warning your users before starting the process.",
-      "engaging-graphic": "Engaging graphic",
       "modal-description-public-access": "Set up public access to your Grafana instance to enable GitHub integration",
       "modal-description-required-features": "Enable required Grafana features for provisioning",
       "modal-title-set-up-public-access": "Set up public access",