Use a more strict type for variant of cards

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

.changeset/quick-ways-develop.md

@@ -0,0 +1,13 @@
+---
+'@backstage/core': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-github-actions': patch
+'@backstage/plugin-jenkins': patch
+'@backstage/plugin-lighthouse': patch
+'@backstage/plugin-org': patch
+'@backstage/plugin-sentry': patch
+'@backstage/plugin-sonarqube': patch
+---
+
+Use a more strict type for `variant` of cards.

packages/core/src/components/ProgressBars/GaugeCard.tsx

@@ -16,14 +16,14 @@
 
 import React from 'react';
 import { makeStyles } from '@material-ui/core';
-import { InfoCard } from '../../layout/InfoCard';
+import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
 import { BottomLinkProps } from '../../layout/BottomLink';
 import { Gauge } from './Gauge';
 
 type Props = {
   title: string;
   subheader?: string;
-  variant?: string;
+  variant?: InfoCardVariants;
   /** Progress in % specified as decimal, e.g. "0.23" */
   progress: number;
   deepLink?: BottomLinkProps;

packages/core/src/layout/InfoCard/InfoCard.tsx

@@ -87,6 +87,8 @@ const VARIANT_STYLES = {
   },
 };
 
+export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
+
 /**
  * InfoCard is used to display a paper-styled block on the screen, similar to a panel.
  *
@@ -111,7 +113,7 @@ type Props = {
   divider?: boolean;
   deepLink?: BottomLinkProps;
   slackChannel?: string;
-  variant?: string;
+  variant?: InfoCardVariants;
   style?: object;
   cardStyle?: object;
   children?: ReactNode;

packages/core/src/layout/InfoCard/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { InfoCard } from './InfoCard';
+export type { InfoCardVariants } from './InfoCard';

plugins/catalog-import/src/components/ImportStepper/ImportStepper.tsx

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-import { configApiRef, InfoCard, useApi } from '@backstage/core';
+import {
+  configApiRef,
+  InfoCard,
+  InfoCardVariants,
+  useApi,
+} from '@backstage/core';
 import { Step, StepContent, Stepper } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useMemo } from 'react';
@@ -39,7 +44,7 @@ type Props = {
     flow: ImportFlows,
     defaults: StepperProvider,
   ) => StepperProvider;
-  variant?: string;
+  variant?: InfoCardVariants;
   opts?: StepperProviderOpts;
 };
 

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -79,7 +79,7 @@ function getCodeLinkInfo(entity: Entity): CodeLinkInfo {
 type AboutCardProps = {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: Entity;
-  variant?: string;
+  variant?: 'gridItem';
 };
 
 export function AboutCard({ variant }: AboutCardProps) {

plugins/github-actions/src/components/Cards/Cards.tsx

@@ -13,29 +13,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useEffect } from 'react';
-import { useWorkflowRuns } from '../useWorkflowRuns';
-import { WorkflowRun, WorkflowRunsTable } from '../WorkflowRunsTable';
 import { Entity } from '@backstage/catalog-model';
-import { useEntity } from '@backstage/plugin-catalog-react';
-import { readGitHubIntegrationConfigs } from '@backstage/integration';
-import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import {
-  Link,
-  Theme,
-  makeStyles,
-  LinearProgress,
-  Typography,
-} from '@material-ui/core';
-import {
-  InfoCard,
-  StructuredMetadataTable,
   configApiRef,
   errorApiRef,
+  InfoCard,
+  InfoCardVariants,
+  StructuredMetadataTable,
   useApi,
 } from '@backstage/core';
+import { readGitHubIntegrationConfigs } from '@backstage/integration';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import {
+  LinearProgress,
+  Link,
+  makeStyles,
+  Theme,
+  Typography,
+} from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
+import React, { useEffect } from 'react';
 import { GITHUB_ACTIONS_ANNOTATION } from '../useProjectName';
+import { useWorkflowRuns } from '../useWorkflowRuns';
+import { WorkflowRun, WorkflowRunsTable } from '../WorkflowRunsTable';
+import { WorkflowRunStatus } from '../WorkflowRunStatus';
 
 const useStyles = makeStyles<Theme>({
   externalLinkIcon: {
@@ -125,7 +126,7 @@ type Props = {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: Entity;
   branch: string;
-  variant?: string;
+  variant?: InfoCardVariants;
 };
 
 export const LatestWorkflowsForBranchCard = ({

plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx

@@ -19,6 +19,7 @@ import {
   EmptyState,
   errorApiRef,
   InfoCard,
+  InfoCardVariants,
   Table,
   useApi,
 } from '@backstage/core';
@@ -39,7 +40,7 @@ export type Props = {
   branch?: string;
   dense?: boolean;
   limit?: number;
-  variant?: string;
+  variant?: InfoCardVariants;
 };
 
 export const RecentWorkflowRunsCard = ({

plugins/jenkins/src/components/Cards/Cards.tsx

@@ -13,13 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { DateTime, Duration } from 'luxon';
-import { Link, Theme, makeStyles, LinearProgress } from '@material-ui/core';
-import { InfoCard, StructuredMetadataTable } from '@backstage/core';
+import {
+  InfoCard,
+  InfoCardVariants,
+  StructuredMetadataTable,
+} from '@backstage/core';
+import { LinearProgress, Link, makeStyles, Theme } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
-import { useBuilds } from '../useBuilds';
+import { DateTime, Duration } from 'luxon';
+import React from 'react';
 import { JenkinsRunStatus } from '../BuildsPage/lib/Status';
+import { useBuilds } from '../useBuilds';
 import { useProjectSlugFromEntity } from '../useProjectSlugFromEntity';
 
 const useStyles = makeStyles<Theme>({
@@ -76,7 +80,7 @@ export const LatestRunCard = ({
   variant,
 }: {
   branch: string;
-  variant?: string;
+  variant?: InfoCardVariants;
 }) => {
   const { owner, repo } = useProjectSlugFromEntity();
   const [{ builds, loading }] = useBuilds(owner, repo, branch);

plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.tsx

@@ -13,16 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { Audit, AuditCompleted, LighthouseCategoryId } from '../../api';
 import {
   InfoCard,
+  InfoCardVariants,
   Progress,
   StatusError,
   StatusOK,
   StatusWarning,
   StructuredMetadataTable,
 } from '@backstage/core';
+import React from 'react';
+import { Audit, AuditCompleted, LighthouseCategoryId } from '../../api';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
 import AuditStatusIcon from '../AuditStatusIcon';
 
@@ -96,7 +97,7 @@ export const LastLighthouseAuditCard = ({
   variant,
 }: {
   dense?: boolean;
-  variant?: string;
+  variant?: InfoCardVariants;
 }) => {
   const { value: website, loading, error } = useWebsiteForEntity();
 

plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx

@@ -20,10 +20,10 @@ import {
   RELATION_CHILD_OF,
   RELATION_PARENT_OF,
 } from '@backstage/catalog-model';
-import { Avatar, InfoCard } from '@backstage/core';
+import { Avatar, InfoCard, InfoCardVariants } from '@backstage/core';
 import {
-  getEntityRelations,
   entityRouteParams,
+  getEntityRelations,
   useEntity,
 } from '@backstage/plugin-catalog-react';
 import {
@@ -81,7 +81,7 @@ export const GroupProfileCard = ({
 }: {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: GroupEntity;
-  variant: string;
+  variant?: InfoCardVariants;
 }) => {
   const group = useEntity().entity as GroupEntity;
   const {

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { InfoCard, Progress, useApi } from '@backstage/core';
+import { InfoCard, InfoCardVariants, Progress, useApi } from '@backstage/core';
 import {
   catalogApiRef,
   isOwnerOf,
@@ -121,7 +121,7 @@ export const OwnershipCard = ({
 }: {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: Entity;
-  variant: string;
+  variant?: InfoCardVariants;
 }) => {
   const { entity } = useEntity();
   const catalogApi = useApi(catalogApiRef);

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx

@@ -18,7 +18,7 @@ import {
   RELATION_MEMBER_OF,
   UserEntity,
 } from '@backstage/catalog-model';
-import { Avatar, InfoCard } from '@backstage/core';
+import { Avatar, InfoCard, InfoCardVariants } from '@backstage/core';
 import { entityRouteParams, useEntity } from '@backstage/plugin-catalog-react';
 import {
   Box,
@@ -73,7 +73,7 @@ export const UserProfileCard = ({
 }: {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: UserEntity;
-  variant: string;
+  variant?: InfoCardVariants;
 }) => {
   const user = useEntity().entity as UserEntity;
   const {

plugins/sentry/src/components/SentryIssuesWidget/SentryIssuesWidget.tsx

@@ -14,24 +14,25 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react';
+import { Entity } from '@backstage/catalog-model';
 import {
   EmptyState,
   ErrorApi,
   errorApiRef,
   InfoCard,
+  InfoCardVariants,
   MissingAnnotationEmptyState,
   Progress,
   useApi,
 } from '@backstage/core';
-import SentryIssuesTable from '../SentryIssuesTable/SentryIssuesTable';
+import React, { useEffect } from 'react';
 import { useAsync } from 'react-use';
 import { sentryApiRef } from '../../api';
+import SentryIssuesTable from '../SentryIssuesTable/SentryIssuesTable';
 import {
   SENTRY_PROJECT_SLUG_ANNOTATION,
   useProjectSlug,
 } from '../useProjectSlug';
-import { Entity } from '@backstage/catalog-model';
 
 export const SentryIssuesWidget = ({
   entity,
@@ -40,7 +41,7 @@ export const SentryIssuesWidget = ({
 }: {
   entity: Entity;
   statsFor?: '24h' | '12h';
-  variant?: string;
+  variant?: InfoCardVariants;
 }) => {
   const errorApi = useApi<ErrorApi>(errorApiRef);
   const sentryApi = useApi(sentryApiRef);

plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx

@@ -18,6 +18,7 @@ import { Entity } from '@backstage/catalog-model';
 import {
   EmptyState,
   InfoCard,
+  InfoCardVariants,
   MissingAnnotationEmptyState,
   Progress,
   useApi,
@@ -88,7 +89,7 @@ export const SonarQubeCard = ({
   duplicationRatings = defaultDuplicationRatings,
 }: {
   entity?: Entity;
-  variant?: string;
+  variant?: InfoCardVariants;
   duplicationRatings?: DuplicationRating[];
 }) => {
   const { entity } = useEntity();