Introduce TabbedLayout for creating tabs that are routed

plugins/explore/package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.12",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/plugin-explore-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
@@ -59,4 +59,4 @@
   "files": [
     "dist"
   ]
-}
+}

plugins/explore/src/components/DomainCard/DomainCard.tsx

@@ -15,7 +15,7 @@
  */
 import { DomainEntity } from '@backstage/catalog-model';
 import { ItemCard } from '@backstage/core';
-import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog';
+import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog-react';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
 

plugins/explore/src/components/DomainExplorerContent/DomainExplorerContent.tsx

@@ -22,7 +22,7 @@ import {
   SupportButton,
   useApi,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Button } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';

plugins/explore/src/components/ExplorePage/ExploreTabs.tsx

@@ -13,37 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Tabs } from '@backstage/core';
-import { makeStyles } from '@material-ui/core';
+import { TabbedLayout } from '@backstage/core';
 import React from 'react';
 import { DomainExplorerContent } from '../DomainExplorerContent';
 import { ToolExplorerContent } from '../ToolExplorerContent';
 
-// TODO: Support sub routes for these tabs in the future
-
-const useStyles = makeStyles({
-  layout: {
-    gridArea: 'pageContent',
-  },
-});
-
-export const ExploreTabs = () => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.layout}>
-      <Tabs
-        tabs={[
-          {
-            label: `Domains`,
-            content: <DomainExplorerContent />,
-          },
-          {
-            label: `Tools`,
-            content: <ToolExplorerContent />,
-          },
-        ]}
-      />
-    </div>
-  );
-};
+export const ExploreTabs = () => (
+  <TabbedLayout>
+    <TabbedLayout.Route path="domains" title="Domains">
+      <DomainExplorerContent />
+    </TabbedLayout.Route>
+    <TabbedLayout.Route path="tools" title="Tools">
+      <ToolExplorerContent />
+    </TabbedLayout.Route>
+  </TabbedLayout>
+);