feat: Cloud Services, allow changing all fields (#1)

packages/noodl-editor/src/editor/src/models/CloudServices/ExternalCloudService.ts

@@ -52,9 +52,11 @@ export class ExternalCloudService {
     const broker = brokers.find((x) => x.id === options.id);
     if (!broker) return false;
 
-    if (options.name) broker.name = options.name;
-    if (options.description) broker.description = options.description;
-    if (options.masterKey) broker.masterKey = options.masterKey;
+    if (typeof options.name !== undefined) broker.name = options.name;
+    if (typeof options.description !== undefined) broker.description = options.description;
+    if (typeof options.appId !== undefined) broker.appId = options.appId;
+    if (typeof options.masterKey !== undefined) broker.masterKey = options.masterKey;
+    if (typeof options.url !== undefined) broker.endpoint = options.url;
 
     await JSONStorage.set('externalBrokers', { brokers });
 

packages/noodl-editor/src/editor/src/models/CloudServices/type.ts

@@ -14,7 +14,9 @@ export type UpdateEnvironmentRequest = {
   id: string;
   name: string | undefined;
   description: string | undefined;
+  appId: string | undefined;
   masterKey: string | undefined;
+  url: string | undefined;
 };
 
 export type CreateEnvironment = {

packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceModal/CloudSerivceModal.tsx

@@ -42,16 +42,31 @@ function AsSelfHosted({
 }: CloudServiceModalProps) {
   const [name, setName] = useState(environment.name);
   const [description, setDescription] = useState(environment.description);
+  const [appId, setAppId] = useState(environment.appId);
+  const [url, setUrl] = useState(environment.url);
   const [showMasterKey, setShowMasterKey] = useState(false);
   const [masterKey, setMasterKey] = useState(environment.masterKey);
 
   function update() {
+    // Early return if none of the values changed
+    if (
+      name === environment.name &&
+      description === environment.description &&
+      appId === environment.appId &&
+      masterKey === environment.masterKey &&
+      url === environment.url
+    ) {
+      return;
+    }
+
     CloudService.instance.backend
       .update({
         id: environment.id,
         name,
         description,
-        masterKey
+        appId,
+        masterKey,
+        url
       })
       .then(() => {
         ToastLayer.showSuccess(`Updated Cloud Service`);
@@ -86,12 +101,14 @@ function AsSelfHosted({
 
           <Columns hasXGap={4} layoutString="1 1">
             <TextInput
-              value={environment.appId}
+              value={appId}
               variant={TextInputVariant.InModal}
               label="App Id"
-              isReadonly
               isCopyable
               UNSAFE_style={{ flex: 1 }}
+              onChange={(e) => setAppId(e.target.value)}
+              onBlur={update}
+              onEnter={update}
             />
             <VStack>
               <TextInput
@@ -125,11 +142,13 @@ function AsSelfHosted({
           </Columns>
 
           <TextInput
-            value={environment.url}
+            value={url}
             variant={TextInputVariant.InModal}
             label="Endpoint"
-            isReadonly
             isCopyable
+            onChange={(e) => setUrl(e.target.value)}
+            onBlur={update}
+            onEnter={update}
           />
         </VStack>
       </Box>