Merge pull request #22548 from backstage/rugvip/nointro

core-components: remove SidebarIntro and IntroCard

.changeset/four-mugs-try.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+**BREAKING**: Removed the `SidebarIntro` component as it was providing instructions for features that do not exist, along with `IntroCard`. If you were relying on this component and want to keep using it you can refer to the original implementations of [`SidebarIntro`](https://github.com/backstage/backstage/blob/80f2413334ed9b221ec3c2b7c22fa737ad8d8885/packages/core-components/src/layout/Sidebar/Intro.tsx#L149) and [`IntroCard`](https://github.com/backstage/backstage/blob/80f2413334ed9b221ec3c2b7c22fa737ad8d8885/packages/core-components/src/layout/Sidebar/Intro.tsx#L100).

packages/core-components/api-report.md

@@ -593,11 +593,6 @@ export type InfoCardClassKey =
 // @public (undocumented)
 export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem';
 
-// Warning: (ae-forgotten-export) The symbol "IntroCardProps" needs to be exported by the entry point index.d.ts
-//
-// @public
-export function IntroCard(props: IntroCardProps): React_2.JSX.Element;
-
 // Warning: (ae-forgotten-export) The symbol "ItemCardProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "ItemCard" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -953,19 +948,6 @@ export interface SidebarGroupProps extends BottomNavigationActionProps {
   to?: string;
 }
 
-// Warning: (ae-missing-release-tag) "SidebarIntro" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export function SidebarIntro(_props: {}): React_2.JSX.Element | null;
-
-// @public (undocumented)
-export type SidebarIntroClassKey =
-  | 'introCard'
-  | 'introDismiss'
-  | 'introDismissLink'
-  | 'introDismissText'
-  | 'introDismissIcon';
-
 // Warning: (ae-forgotten-export) The symbol "SidebarItemProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "SidebarItem" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

packages/core-components/src/layout/Sidebar/Intro.tsx

@@ -1,199 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import Box from '@material-ui/core/Box';
-import Collapse from '@material-ui/core/Collapse';
-import IconButton from '@material-ui/core/IconButton';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import CloseIcon from '@material-ui/icons/Close';
-import { useLocalStorageValue } from '@react-hookz/web';
-import React, { useContext, useState } from 'react';
-
-import {
-  SIDEBAR_INTRO_LOCAL_STORAGE,
-  SidebarConfig,
-  SidebarConfigContext,
-} from './config';
-import { SidebarDivider } from './Items';
-import { useSidebarOpenState } from './SidebarOpenStateContext';
-
-/** @public */
-export type SidebarIntroClassKey =
-  | 'introCard'
-  | 'introDismiss'
-  | 'introDismissLink'
-  | 'introDismissText'
-  | 'introDismissIcon';
-
-const useStyles = makeStyles<Theme, { sidebarConfig: SidebarConfig }>(
-  theme => ({
-    introCard: props => ({
-      color: '#b5b5b5',
-      // XXX (@koroeskohr): should I be using a Mui theme variable?
-      fontSize: 12,
-      width: props.sidebarConfig.drawerWidthOpen,
-      marginTop: theme.spacing(2.25),
-      marginBottom: theme.spacing(1.5),
-      paddingLeft: props.sidebarConfig.iconPadding,
-      paddingRight: props.sidebarConfig.iconPadding,
-    }),
-    introDismiss: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      alignItems: 'center',
-      marginTop: theme.spacing(1.5),
-    },
-    introDismissLink: {
-      color: '#dddddd',
-      display: 'flex',
-      alignItems: 'center',
-      marginBottom: theme.spacing(0.5),
-      '&:hover': {
-        color: theme.palette.linkHover,
-        transition: theme.transitions.create('color', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.shortest,
-        }),
-      },
-    },
-    introDismissText: {
-      fontSize: '0.7rem',
-      fontWeight: 'bold',
-      textTransform: 'uppercase',
-      letterSpacing: 1,
-    },
-    introDismissIcon: {
-      width: 18,
-      height: 18,
-      marginRight: theme.spacing(1.5),
-    },
-  }),
-  { name: 'BackstageSidebarIntro' },
-);
-
-type IntroCardProps = {
-  text: string;
-  onClose: () => void;
-};
-
-/**
- * Closable card with information from Navigation Sidebar
- *
- * @public
- *
- */
-
-export function IntroCard(props: IntroCardProps) {
-  const { sidebarConfig } = useContext(SidebarConfigContext);
-  const classes = useStyles({ sidebarConfig });
-  const { text, onClose } = props;
-  const handleClose = () => onClose();
-
-  return (
-    <Box className={classes.introCard}>
-      <Typography variant="subtitle2">{text}</Typography>
-      <Box className={classes.introDismiss}>
-        <IconButton onClick={handleClose} className={classes.introDismissLink}>
-          <CloseIcon className={classes.introDismissIcon} />
-          <Typography component="span" className={classes.introDismissText}>
-            Dismiss
-          </Typography>
-        </IconButton>
-      </Box>
-    </Box>
-  );
-}
-
-type SidebarIntroLocalStorage = {
-  starredItemsDismissed: boolean;
-  recentlyViewedItemsDismissed: boolean;
-};
-
-type SidebarIntroCardProps = {
-  text: string;
-  onDismiss: () => void;
-};
-
-const SidebarIntroCard = (props: SidebarIntroCardProps) => {
-  const { text, onDismiss } = props;
-  const [collapsing, setCollapsing] = useState(false);
-  const startDismissing = () => {
-    setCollapsing(true);
-  };
-  return (
-    <Collapse in={!collapsing} onExited={onDismiss}>
-      <IntroCard text={text} onClose={startDismissing} />
-    </Collapse>
-  );
-};
-
-const starredIntroText = `Fun fact! As you explore all the awesome plugins in Backstage, you can actually pin them to this side nav.
-Keep an eye out for the little star icon (⭐) next to the plugin name and give it a click!`;
-const recentlyViewedIntroText =
-  'And your recently viewed plugins will pop up here!';
-
-export function SidebarIntro(_props: {}) {
-  const { isOpen } = useSidebarOpenState();
-  const defaultValue = {
-    starredItemsDismissed: false,
-    recentlyViewedItemsDismissed: false,
-  };
-  const { value: dismissedIntro, set: setDismissedIntro } =
-    useLocalStorageValue<SidebarIntroLocalStorage>(SIDEBAR_INTRO_LOCAL_STORAGE);
-
-  const { starredItemsDismissed, recentlyViewedItemsDismissed } =
-    dismissedIntro ?? {};
-
-  const dismissStarred = () => {
-    setDismissedIntro(state => ({
-      ...defaultValue,
-      ...state,
-      starredItemsDismissed: true,
-    }));
-  };
-  const dismissRecentlyViewed = () => {
-    setDismissedIntro(state => ({
-      ...defaultValue,
-      ...state,
-      recentlyViewedItemsDismissed: true,
-    }));
-  };
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <>
-      {!starredItemsDismissed && (
-        <>
-          <SidebarIntroCard
-            text={starredIntroText}
-            onDismiss={dismissStarred}
-          />
-          <SidebarDivider />
-        </>
-      )}
-      {!recentlyViewedItemsDismissed && (
-        <SidebarIntroCard
-          text={recentlyViewedIntroText}
-          onDismiss={dismissRecentlyViewed}
-        />
-      )}
-    </>
-  );
-}

packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx

@@ -34,7 +34,6 @@ import {
   SidebarSearchField,
   SidebarSpace,
 } from './Items';
-import { SidebarIntro } from './Intro';
 import { SidebarSubmenu } from './SidebarSubmenu';
 import { SidebarSubmenuItem } from './SidebarSubmenuItem';
 
@@ -65,7 +64,6 @@ export const SampleSidebar = () => (
         <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
         <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
         <SidebarDivider />
-        <SidebarIntro />
         <SidebarSpace />
       </SidebarGroup>
     </Sidebar>
@@ -104,7 +102,6 @@ export const SampleScalableSidebar = () => (
         <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
       </SidebarGroup>
       <SidebarDivider />
-      <SidebarIntro />
       <SidebarSpace />
       <SidebarExpandButton />
     </Sidebar>

packages/core-components/src/layout/Sidebar/index.ts

@@ -44,8 +44,6 @@ export type {
   SidebarSpacerClassKey,
   SidebarDividerClassKey,
 } from './Items';
-export { IntroCard, SidebarIntro } from './Intro';
-export type { SidebarIntroClassKey } from './Intro';
 export { SIDEBAR_INTRO_LOCAL_STORAGE, sidebarConfig } from './config';
 export type { SidebarOptions, SubmenuOptions } from './config';
 export {

packages/core-components/src/overridableComponents.ts

@@ -83,7 +83,6 @@ import {
   SidebarSpaceClassKey,
   SidebarSpacerClassKey,
   SidebarDividerClassKey,
-  SidebarIntroClassKey,
   SidebarItemClassKey,
   SidebarPageClassKey,
   CustomProviderClassKey,
@@ -157,7 +156,6 @@ type BackstageComponentsNameToClassKey = {
   BackstageSidebarSpace: SidebarSpaceClassKey;
   BackstageSidebarSpacer: SidebarSpacerClassKey;
   BackstageSidebarDivider: SidebarDividerClassKey;
-  BackstageSidebarIntro: SidebarIntroClassKey;
   BackstageSidebarItem: SidebarItemClassKey;
   BackstageSidebarPage: SidebarPageClassKey;
   BackstageCustomProvider: CustomProviderClassKey;