message: todo: set up both live and mocked api pages in dev env
diff: * See the License for the specific language governing permissions and
  * limitations under the License.
  */
  +
  import { Entity, LOCATION_ANNOTATION } from '@backstage/catalog-model';
  -import { Content, Header, HeaderLabel, Page } from '@backstage/core';
  +import {
  + ApiProvider,
  + ApiRegistry,
  + Content,
  + Header,
  + HeaderLabel,
  + Page,
  +} from '@backstage/core';
  import { createDevApp } from '@backstage/dev-utils';
  import { EntityProvider } from '@backstage/plugin-catalog-react';
  +import OnlineIcon from '@material-ui/icons/Cloud';
  +import OfflineIcon from '@material-ui/icons/Storage';
  import React from 'react';
  import { EntityTodoContent, todoApiRef, todoPlugin } from '../src';
  @@ -35,13 +45,7 @@ const entity: Entity = {
  },
  };
  -createDevApp()
  - .registerPlugin(todoPlugin)
  - .registerApi({
  - api: todoApiRef,
  - deps: {},
  - factory() {
  - return {
  +const mockedApi = {
  listTodos: async () => ({
  items: [
  {
  @@ -58,13 +62,15 @@ createDevApp()
  },
  }),
  };
  - },
  - })
  +
  +createDevApp()
  + .registerPlugin(todoPlugin)
  .addPage({
  element: (
  + <ApiProvider apis={ApiRegistry.with(todoApiRef, mockedApi)}>
  <EntityProvider entity={entity}>
  <Page themeId="service">
  - <Header title="Some Entity">
  + <Header title="Mocked TODO Data">
  <HeaderLabel label="Mode" value="Development" />
  </Header>
  <Content>
  @@ -72,7 +78,25 @@ createDevApp()
  </Content>
  </Page>
  </EntityProvider>
  + </ApiProvider>
  ),
  title: 'Entity Todo Content',
  + icon: OfflineIcon,
  + })
  + .addPage({
  + element: (
  + <EntityProvider entity={entity}>
  + <Page themeId="service">
  + <Header title="Live TODO Data">
  + <HeaderLabel label="Mode" value="Development" />
  + </Header>
  + <Content>
  + <EntityTodoContent />
  + </Content>
  + </Page>
  + </EntityProvider>
  + ),
  + title: 'Backend Connected',
  + icon: OnlineIcon,
  })
  .render();
  