experimental rc ui

firebase.json

@@ -28,10 +28,16 @@
     },
     "pubsub": {
       "port": 8085
+    },
+    "remoteconfig": {
+      "port": 9200
     }
   },
   "extensions": {
     "storage-resize-images": "firebase/[email protected]",
     "firestore-stripe-payments": "stripe/[email protected]"
+  },
+  "remoteconfig": {
+    "template": "remoteconfig.template.json"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "firebase-tools-ui",
-  "version": "1.11.7",
+  "version": "1.11.1-rc-bash",
   "private": true,
   "engines": {
     "node": ">=16.4.0"
@@ -10,6 +10,7 @@
     "@rmwc/button": "^7.0.3",
     "@rmwc/card": "^7.0.3",
     "@rmwc/checkbox": "^7.0.3",
+    "@rmwc/chip": "^7.0.3",
     "@rmwc/circular-progress": "^7.0.3",
     "@rmwc/data-table": "^7.0.3",
     "@rmwc/dialog": "^7.0.3",
@@ -122,6 +123,7 @@
     "eslint-plugin-jest": "^23.11.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "firebase-admin": "^10.0.0",
     "globalthis": "^1.0.1",
     "husky": "^8.0.0",
     "import-sort-config": "^6.0.0",

remoteconfig.template.json

@@ -0,0 +1,40 @@
+{
+  "conditions": [
+    {
+      "name": "iOS",
+      "expression": "device.os == 'ios'",
+      "tagColor": "LIME"
+    }
+  ],
+  "parameters": {
+    "welcome_message": {
+      "defaultValue": {
+        "value": "Welcome to this sample app"
+      },
+      "conditionalValues": {
+        "iOS": {
+          "value": "Welcome to this sample iOS app"
+        }
+      }
+    },
+    "welcome_message_caps": {
+      "defaultValue": {
+        "value": "false"
+      }
+    },
+    "header_text": {
+      "defaultValue": {
+        "useInAppDefault": true
+      }
+    }
+  },
+  "version": {
+    "versionNumber": "28",
+    "updateTime": "2020-05-14T18:39:38.994Z",
+    "updateUser": {
+      "email": "[email protected]"
+    },
+    "updateOrigin": "CONSOLE",
+    "updateType": "INCREMENTAL_UPDATE"
+  }
+}

src/components/Home/index.tsx

@@ -38,6 +38,7 @@ import {
   FunctionsIcon,
   HostingIcon,
   PubSubIcon,
+  RemoteConfigIcon,
   StorageIcon,
 } from '../common/icons';
 import { Spinner } from '../common/Spinner';
@@ -94,6 +95,13 @@ const Overview: React.FC<
           linkLabel="Go to database emulator"
           testId="emulator-info-database"
         />
+        <EmulatorCard
+          name="Remote Config emulator"
+          icon={<RemoteConfigIcon theme="secondary" />}
+          config={config['remoteconfig']}
+          linkTo="/remote-config"
+          testId="emulator-info-remote-config"
+        />
         <EmulatorCard
           name="Functions emulator"
           icon={<FunctionsIcon theme="secondary" />}

src/components/RemoteConfig/AdvancedEditCard.module.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance
+  the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import '../common/color';
+
+.wrapper {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding: 32px 24px;
+}

src/components/RemoteConfig/AdvancedEditCard.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Card } from '@rmwc/card';
+import { Typography } from '@rmwc/typography';
+import React from 'react';
+
+import styles from './AdvancedEditCard.module.scss';
+
+export const AdvancedEditCard: React.FC<{}> = () => {
+  return (
+    <Card className={styles.wrapper}>
+      <div>
+        <Typography use="headline6" tag="div" theme="textPrimaryOnBackground">
+          Need to make more advanced edits?
+        </Typography>
+        <Typography use="body2" theme="textPrimaryOnBackground">
+          <p>
+            Edit your local <code>remoteconfig.template.json</code> file in your
+            favorite code editor to make more in-depth changes to your Remote
+            Config template, such as modifying in-app default values.
+          </p>
+        </Typography>
+        <Typography use="body2" theme="textPrimaryOnBackground">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://firebase.google.com/docs/remote-config/templates"
+          >
+            Learn more about Remote Config templates
+          </a>
+        </Typography>
+      </div>
+    </Card>
+  );
+};