Use Radiant Earth as default stac browser

Fix #23

Author: danielfdsilva

packages/client/.env

@@ -1,2 +1,4 @@
 APP_TITLE=STAC Manager
-APP_DESCRIPTION=Plugin baed stac editor
+APP_DESCRIPTION=Plugin based STAC editor
+REACT_APP_STAC_BROWSER=
+REACT_APP_STAC_API=

packages/client/README.md

@@ -4,4 +4,18 @@
 The STAC-Manager is a tool designed for managing the values of a STAC (SpatioTemporal Asset Catalog) collection and its items. This interface provides a user-friendly way to modify and update the properties of collections and items within a STAC catalog.
 
 ## Installation and Usage
-See root README.md for instructions on how to install and use the project.
+See root README.md for instructions on how to install and run the project.
+
+## Client specific instructions
+
+Some client options are controlled by environment variables. These are:
+```
+APP_TITLE
+APP_DESCRIPTION
+REACT_APP_STAC_BROWSER
+REACT_APP_STAC_API
+```
+
+You must provide a value for the `REACT_APP_STAC_API` environment variable. This should be the URL of the STAC API you wish to interact with.
+
+If the `REACT_APP_STAC_BROWSER` environment variable is not set, [Radiant Earth's STAC Browser](https://radiantearth.github.io/stac-browser/) will be used by default, which will connect to the STAC API specified in `REACT_APP_STAC_API`.

packages/client/src/components/StacBrowserMenuItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { MenuItem, MenuItemProps } from '@chakra-ui/react';
+import { CollecticonGlobe } from '@devseed-ui/collecticons-chakra';
+import SmartLink from './SmartLink';
+
+const baseStacBrowserUrl =
+  process.env.REACT_APP_STAC_BROWSER ||
+  'https://radiantearth.github.io/stac-browser/#/external';
+
+export function StacBrowserMenuItem(
+  props: MenuItemProps & { resourcePath: string }
+) {
+  const { resourcePath, ...rest } = props;
+  return (
+    <MenuItem
+      icon={<CollecticonGlobe />}
+      as={SmartLink}
+      _hover={{ textDecoration: 'none' }}
+      to={`${baseStacBrowserUrl}${resourcePath}`}
+      {...rest}
+    >
+      View in STAC Browser
+    </MenuItem>
+  );
+}

packages/client/src/pages/CollectionDetail/index.tsx

@@ -19,7 +19,6 @@ import { MdAccessTime, MdBalance, MdEdit } from 'react-icons/md';
 import { useCollection, useStacSearch } from '@developmentseed/stac-react';
 import {
   CollecticonEllipsisVertical,
-  CollecticonGlobe,
   CollecticonPencil,
   CollecticonTrashBin
 } from '@devseed-ui/collecticons-chakra';
@@ -31,6 +30,7 @@ import ItemResults from '../../components/ItemResults';
 import CollectionMap from './CollectionMap';
 import SmartLink from '$components/SmartLink';
 import { InnerPageHeader } from '$components/InnerPageHeader';
+import { StacBrowserMenuItem } from '$components/StacBrowserMenuItem';
 
 const dateFormat: Intl.DateTimeFormatOptions = {
   year: 'numeric',
@@ -115,14 +115,7 @@ function CollectionDetail() {
                 size='sm'
               />
               <MenuList>
-                <MenuItem
-                  icon={<CollecticonGlobe />}
-                  as={SmartLink}
-                  _hover={{ textDecoration: 'none' }}
-                  to={`${process.env.REACT_APP_STAC_BROWSER}/collections/${id}`}
-                >
-                  View in STAC Browser
-                </MenuItem>
+                <StacBrowserMenuItem resourcePath={`/collections/${id}`} />
                 <MenuItem
                   icon={<CollecticonTrashBin />}
                   color='danger.500'

packages/client/src/pages/ItemDetail/index.tsx

@@ -16,7 +16,6 @@ import { StacAsset } from 'stac-ts';
 import { useItem } from '@developmentseed/stac-react';
 import {
   CollecticonEllipsisVertical,
-  CollecticonGlobe,
   CollecticonTrashBin
 } from '@devseed-ui/collecticons-chakra';
 import getBbox from '@turf/bbox';
@@ -28,7 +27,7 @@ import { PropertyGroup } from '../../types';
 import { BackgroundTiles } from '../../components/Map';
 import AssetList from './AssetList';
 import { InnerPageHeader } from '$components/InnerPageHeader';
-import SmartLink from '$components/SmartLink';
+import { StacBrowserMenuItem } from '$components/StacBrowserMenuItem';
 
 const resultsOutline = {
   'line-color': '#C53030',
@@ -114,14 +113,9 @@ function ItemDetail() {
                 size='sm'
               />
               <MenuList>
-                <MenuItem
-                  icon={<CollecticonGlobe />}
-                  as={SmartLink}
-                  _hover={{ textDecoration: 'none' }}
-                  to={`${process.env.REACT_APP_STAC_BROWSER}/collections/${properties.collection}/items/${properties.id}/edit`}
-                >
-                  View in STAC Browser
-                </MenuItem>
+                <StacBrowserMenuItem
+                  resourcePath={`/collections/${properties.collection}/items/${properties.id}`}
+                />
                 <MenuItem
                   icon={<CollecticonTrashBin />}
                   color='danger.500'