add netlify development banner (#1229)

packages/desktop-client/config-overrides.js

@@ -14,6 +14,11 @@ if (process.env.CI) {
   process.env.DISABLE_ESLINT_PLUGIN = 'true';
 }
 
+// Forward Netlify env variables
+if (process.env.REVIEW_ID) {
+  process.env.REACT_APP_REVIEW_ID = process.env.REVIEW_ID;
+}
+
 module.exports = {
   webpack: override(
     babelInclude([path.resolve('src'), path.resolve('../loot-core')]),

packages/desktop-client/src/components/App.js

@@ -14,6 +14,7 @@ import { ResponsiveProvider } from '../ResponsiveProvider';
 import { styles, hasHiddenScrollbars } from '../style';
 
 import AppBackground from './AppBackground';
+import DevelopmentTopBar from './DevelopmentTopBar';
 import FatalError from './FatalError';
 import FinancesApp from './FinancesApp';
 import ManagementApp from './manager/ManagementApp';
@@ -103,6 +104,8 @@ class App extends Component {
             styles.lightScrollbar,
           ])}
         >
+          {process.env.REACT_APP_REVIEW_ID && <DevelopmentTopBar />}
+
           {fatalError ? (
             <>
               <AppBackground />

packages/desktop-client/src/components/DevelopmentTopBar.tsx

+import { colors } from '../style';
+
+import { ExternalLink } from './common';
+import View from './common/View';
+
+export default function DevelopmentTopBar() {
+  return (
+    <View
+      style={[
+        {
+          padding: '6px 20px',
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          color: colors.y2,
+          backgroundColor: colors.y8,
+          borderBottom: `1px solid ${colors.y6}`,
+          zIndex: 1,
+        },
+      ]}
+    >
+      <View>This is a demo build of Actual.</View>
+      <View>
+        <ExternalLink
+          to={`https://github.com/actualbudget/actual/pull/${process.env.REACT_APP_REVIEW_ID}`}
+        >
+          Open the PR: #{process.env.REACT_APP_REVIEW_ID}
+        </ExternalLink>
+      </View>
+    </View>
+  );
+}

packages/desktop-client/src/components/FatalError.js

@@ -39,7 +39,7 @@ class FatalError extends Component {
           does not support <code>SharedArrayBuffer</code>, or your server is not
           sending the appropriate headers, or you are not using HTTPS. See{' '}
           <ExternalLink
-            muted
+            linkColor="muted"
             to="https://actualbudget.org/docs/troubleshooting/shared-array-buffer"
           >
             our troubleshooting documentation
@@ -55,7 +55,10 @@ class FatalError extends Component {
         <Text>
           There was a problem loading the app in this browser version. If this
           continues to be a problem, you can{' '}
-          <ExternalLink muted to="https://github.com/actualbudget/releases">
+          <ExternalLink
+            linkColor="muted"
+            to="https://github.com/actualbudget/releases"
+          >
             download the desktop app
           </ExternalLink>
           .
@@ -83,7 +86,10 @@ class FatalError extends Component {
           <Text>{msg}</Text>
           <Text>
             Please get{' '}
-            <ExternalLink muted to="https://actualbudget.org/contact">
+            <ExternalLink
+              linkColor="muted"
+              to="https://actualbudget.org/contact"
+            >
               in touch
             </ExternalLink>{' '}
             for support

upcoming-release-notes/1229.md

+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Added a Netlify banner for easy jumping back to the PR