fix: Docs to Rich Text - Resolves bugs on configuration screen [] (#4632)

Author: ellavationlabs

apps/docs-to-rich-text/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "docs-to-rich-text",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "dependencies": {
     "@contentful/app-sdk": "^4.29.3",

apps/docs-to-rich-text/package.json

@@ -51,6 +51,7 @@ const ConfigScreen = () => {
   const [richTextFields, setRichTextFields] = useState<RtfField[]>([]);
   const [richTextFieldsLoaded, setRichTextFieldsLoaded] = useState<boolean>(false);
   const [isLicensed, setIsLicensed] = useState(false);
+  const [isInstalled, setIsInstalled] = useState(false);
 
   const sdk = useSDK<ConfigAppSDK>();
 
@@ -109,6 +110,30 @@ const ConfigScreen = () => {
       setRichTextFieldsLoaded(true);
     })();
   }, [sdk]);
+  useEffect(() => {
+    let intervalId: any;
+    (async () => {
+      // Initial check
+      const installed = await checkInstallationStatus();
+      if (installed) {
+        return;
+      }
+      // Polling
+      intervalId = setInterval(async () => {
+        if (await checkInstallationStatus()) {
+          clearInterval(intervalId);
+        }
+      }, 2000);
+    })();
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [sdk.app]);
+  async function checkInstallationStatus(): Promise<boolean> {
+    const installed = await sdk.app.isInstalled();
+    setIsInstalled(installed);
+    return installed;
+  }
 
   async function enableEditorForAllRichTextFields() {
     if (!isLicensed && richTextFields.length > 5) {
@@ -258,43 +283,49 @@ const ConfigScreen = () => {
   const fieldsCard = (
     <Card>
       <Heading>Configure Rich Text Fields</Heading>
-      <p>Select which rich text fields should have Docs to Rich Text enabled</p>
-      <br />
-
-      {!richTextFieldsLoaded && (
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
-          <Spinner variant="default" />
-        </div>
-      )}
-      {richTextFieldsLoaded && (
-        <div>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'flex-end',
-              marginBottom: '20px',
-            }}>
-            {isLicenseLimitReached ? (
-              <Tooltip content="Free plan limit reached. Disable another field or upgrade to remove limits" placement="top">
-                <Button variant="primary" size="small" style={{ marginRight: '20px' }} isDisabled={true}>
-                  Enable All
-                </Button>
-              </Tooltip>
-            ) : (
-              <Button
-                variant="primary"
-                size="small"
-                style={{ marginRight: '20px' }}
-                onClick={async () => {
-                  await enableEditorForAllRichTextFields();
-                }}
-                isDisabled={false}>
-                Enable All
-              </Button>
-            )}
-          </div>
-          {fieldsTable}
-        </div>
+      {!isInstalled ? (
+        <p>Install to begin</p>
+      ) : (
+        <>
+          <p>Select which rich text fields should have Docs to Rich Text enabled</p>
+          <br />
+
+          {!richTextFieldsLoaded && (
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <Spinner variant="default" />
+            </div>
+          )}
+          {richTextFieldsLoaded && (
+            <div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                  marginBottom: '20px',
+                }}>
+                {isLicenseLimitReached ? (
+                  <Tooltip content="Free plan limit reached. Disable another field or upgrade to remove limits" placement="top">
+                    <Button variant="primary" size="small" style={{ marginRight: '20px' }} isDisabled={true}>
+                      Enable All
+                    </Button>
+                  </Tooltip>
+                ) : (
+                  <Button
+                    variant="primary"
+                    size="small"
+                    style={{ marginRight: '20px' }}
+                    onClick={async () => {
+                      await enableEditorForAllRichTextFields();
+                    }}
+                    isDisabled={false}>
+                    Enable All
+                  </Button>
+                )}
+              </div>
+              {fieldsTable}
+            </div>
+          )}
+        </>
       )}
     </Card>
   );

apps/docs-to-rich-text/src/locations/ConfigScreen.tsx

@@ -12,10 +12,6 @@ export async function getRichTextFields(cma: CMAClient, appDefinitionId: string)
   // Get all content types
   const contentTypes = await cma.contentType.getMany({});
 
-  // Get our widgetId
-  const def = await cma.appDefinition.get({ appDefinitionId: appDefinitionId });
-  const appWidgetId = def.sys.id;
-
   const richTextFields: RtfField[] = [];
   for (const contentType of contentTypes.items) {
     const editorInterface = await cma.editorInterface.get({ contentTypeId: contentType.sys.id });
@@ -27,7 +23,7 @@ export async function getRichTextFields(cma: CMAClient, appDefinitionId: string)
         contentTypeName: contentType.name,
         fieldId: rtfField.id,
         fieldName: rtfField.name,
-        isEnabled: control!.widgetId === appWidgetId,
+        isEnabled: control!.widgetId === appDefinitionId,
       });
     }
   }
@@ -48,8 +44,7 @@ export async function getRichTextFields(cma: CMAClient, appDefinitionId: string)
 
 export async function setAppRichTextEditor(sdk: ConfigAppSDK, contentTypeId: string, fieldId: string) {
   lock.acquire(contentTypeId, async function () {
-    const def = await sdk.cma.appDefinition.get({ appDefinitionId: sdk.ids.app });
-    const appWidgetId = def.sys.id;
+    const appWidgetId = sdk.ids.app;
 
     const editorInterface = await sdk.cma.editorInterface.get({ contentTypeId: contentTypeId });
     const control = editorInterface.controls!.find((w) => w.fieldId === fieldId)!;