feat(netlify): more resilient netlify docs alert implementation

Uses the already built-in netlify configuration variables that
will be injected by the netlify build environment, which should
allow use to not have to configure anything extra to get this
feature to work properly.

Also adds some more information about the deployment, specifying
whether or not it's a pull request (and redirects to the right
pr link), or if it's being deployed from a specific branch.

www/src/components/MasterDocsAlert.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Alert from 'react-bootstrap/Alert';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+
+function MasterDocsAlert() {
+  let deploymentDetails = null;
+  if (process.env.NETLIFY) {
+    if (process.env.PULL_REQUEST === 'true') {
+      deploymentDetails = (
+        <span>
+          a{' '}
+          <Alert.Link
+            href={`https://github.com/react-bootstrap/react-bootstrap/pull/${process.env.REVIEW_ID}`}
+          >
+            pull request
+          </Alert.Link>
+        </span>
+      );
+    } else {
+      deploymentDetails = `the ${process.env.BRANCH} branch`;
+    }
+  }
+  return process.env.NETLIFY ? (
+    <Container fluid>
+      <Row>
+        <Alert variant="warning" className="w-100">
+          You are currently viewing the auto-generated docs from{' '}
+          {deploymentDetails}. The docs for the current release are available at{' '}
+          <Alert.Link href="https://react-bootstrap.github.io/">
+            https://react-bootstrap.github.io/
+          </Alert.Link>
+        </Alert>
+      </Row>
+    </Container>
+  ) : null;
+}
+
+export default MasterDocsAlert;

www/src/layouts/index.js

@@ -7,6 +7,7 @@ import NavMain from '../components/NavMain';
 import Heading from '../components/Heading';
 import CodeBlock from '../components/CodeBlock';
 import LinkedHeading from '../components/LinkedHeading';
+import MasterDocsAlert from '../components/MasterDocsAlert';
 
 const styles = css`
   .gray > :not(:first-child) {
@@ -46,6 +47,7 @@ function DefaultLayout({ children, location, grayscale = true }) {
   return (
     <div className={grayscale ? styles.gray : undefined}>
       <NavMain activePage={location.pathname} />
+      <MasterDocsAlert />
       <MDXProvider components={components}>{children}</MDXProvider>
     </div>
   );