Chore: Fix strict null errors on getting started (#24605)

* fix strict nulls

* fix typings

public/app/plugins/panel/gettingstarted/components/Step.tsx

@@ -3,7 +3,7 @@ import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '@grafana/ui';
 import { TutorialCard } from './TutorialCard';
-import { Card, SetupStep } from '../types';
+import { Card, SetupStep, TutorialCardType } from '../types';
 import { DocsCard } from './DocsCard';
 
 interface Props {
@@ -21,10 +21,10 @@ export const Step: FC<Props> = ({ step }) => {
         <p>{step.info}</p>
       </div>
       <div className={styles.cards}>
-        {step.cards.map((card: Card, index: number) => {
+        {step.cards.map((card: Card | TutorialCardType, index: number) => {
           const key = `${card.title}-${index}`;
           if (card.type === 'tutorial') {
-            return <TutorialCard key={key} card={card} />;
+            return <TutorialCard key={key} card={card as TutorialCardType} />;
           }
           return <DocsCard key={key} card={card} />;
         })}

public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx

@@ -4,10 +4,10 @@ import { Icon, stylesFactory, useTheme } from '@grafana/ui';
 import { css } from 'emotion';
 import store from 'app/core/store';
 import { cardContent, cardStyle, iconStyle } from './sharedStyles';
-import { Card } from '../types';
+import { TutorialCardType } from '../types';
 
 interface Props {
-  card: Card;
+  card: TutorialCardType;
 }
 
 export const TutorialCard: FC<Props> = ({ card }) => {
@@ -27,7 +27,7 @@ export const TutorialCard: FC<Props> = ({ card }) => {
   );
 };
 
-const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Card) => {
+const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: TutorialCardType) => {
   event.preventDefault();
   const isSet = store.get(card.key);
   if (!isSet) {

public/app/plugins/panel/gettingstarted/types.ts

@@ -10,10 +10,13 @@ export interface Card {
   check: () => Promise<boolean>;
   done: boolean;
   heading: string;
+  learnHref?: string;
+}
+
+export interface TutorialCardType extends Card {
   info?: string;
   // For local storage
-  key?: string;
-  learnHref?: string;
+  key: string;
 }
 
 export interface SetupStep {
@@ -21,6 +24,6 @@ export interface SetupStep {
   subheading: string;
   title: string;
   info: string;
-  cards: Card[];
+  cards: (Card | TutorialCardType)[];
   done: boolean;
 }