feat: automatic update of slug field appearance settings to use the b…

…etter slugs widget
pauloamgomes · Apr 3, 2024 · e58069f · e58069f
1 parent e02cb07
commit e58069f
Show file tree

Hide file tree

Showing 19 changed files with 71 additions and 225 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Install the App using by doing the below steps:
 
 1. Create a new Contentful custom App and define the Application Name (e.g. Better Slugs)
 
-2. Download [dist.zip](https://github.com/pauloamgomes/contentful-better-slugs-app/releases/download/V1.0.2/dist.zip), unzip and add the resulting folder into the Bundles upload zone:
+2. Download [dist.zip](https://github.com/pauloamgomes/contentful-better-slugs-app/releases/download/V1.0.3/dist.zip), unzip and add the resulting folder into the Bundles upload zone:
 (or download/clone this repo and use the dist folder):
 
 ![App Bundles Upload](./docs/app-bundles.png)
@@ -44,7 +44,7 @@ exactly as per below screenshot:
 
 Configure the options you want (check the configuration section further below in this document)
 
-6. Go to the Content Model definitions and set the Better Slugs app in the Appearance tab:
+6. Go to the Content Model definitions, edit the slug field settings, and confirm that the Better Slugs app is selected inside the Appearance section:
 
 ![Apps Menu](./docs/app-field-config.png)
 

diff --git a/dist/assets/index.11c8f708.js → dist/assets/index.d728fac3.js b/dist/assets/index.11c8f708.js → dist/assets/index.d728fac3.js
diff --git a/dist/index.html b/dist/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script type="module" crossorigin src="./assets/index.11c8f708.js"></script>
+    <script type="module" crossorigin src="./assets/index.d728fac3.js"></script>
   </head>
 
   <body>

diff --git a/docs/app-field-config.png b/docs/app-field-config.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,21 +2,11 @@ import { locations } from '@contentful/app-sdk';
 import { useSDK } from '@contentful/react-apps-toolkit';
 import { useMemo } from 'react';
 import ConfigScreen from './locations/ConfigScreen';
-import Dialog from './locations/Dialog';
-import EntryEditor from './locations/EntryEditor';
 import Field from './locations/Field';
-import Page from './locations/Page';
-import Sidebar from './locations/Sidebar';
-import Home from './locations/Home';
 
 const ComponentLocationSettings = {
   [locations.LOCATION_APP_CONFIG]: ConfigScreen,
   [locations.LOCATION_ENTRY_FIELD]: Field,
-  [locations.LOCATION_ENTRY_EDITOR]: EntryEditor,
-  [locations.LOCATION_DIALOG]: Dialog,
-  [locations.LOCATION_ENTRY_SIDEBAR]: Sidebar,
-  [locations.LOCATION_PAGE]: Page,
-  [locations.LOCATION_HOME]: Home,
 };
 
 const App = () => {

diff --git a/src/components/AvailableTokens.tsx b/src/components/AvailableTokens.tsx
@@ -1,3 +1,4 @@
+import { FieldAppSDK } from "@contentful/app-sdk";
 import {
   Flex,
   IconButton,
@@ -6,7 +7,7 @@ import {
   Text,
 } from "@contentful/f36-components";
 import { CopyIcon } from "@contentful/f36-icons";
-import { useCMA } from "@contentful/react-apps-toolkit";
+import { useSDK } from "@contentful/react-apps-toolkit";
 
 import { css } from "emotion";
 import { useEffect, useState } from "react";
@@ -28,13 +29,13 @@ const AvailableTokens = ({
   activeSlugField: string;
   onClick: (token: string) => void;
 }) => {
-  const cma = useCMA();
+  const sdk = useSDK<FieldAppSDK>();
   const [tokens, setTokens] = useState<Record<string, string>>({});
   const [loading, setLoading] = useState<boolean>(true);
 
   const getLinkModelValidTokenFields = async (linkModelName: string) => {
     const validFields: string[] = [];
-    const contentModel = await cma.contentType.get({
+    const contentModel = await sdk.cma.contentType.get({
       contentTypeId: linkModelName,
     });
 
@@ -52,7 +53,7 @@ const AvailableTokens = ({
   useEffect(() => {
     const fetchModel = async () => {
       const newTokens: Record<string, string> = {};
-      const contentModel = await cma.contentType.get({ contentTypeId: name });
+      const contentModel = await sdk.cma.contentType.get({ contentTypeId: name });
       const fields = contentModel.fields.filter(
         (field) => field.id !== activeSlugField
       );

diff --git a/src/components/ContentModelsDropdown.tsx b/src/components/ContentModelsDropdown.tsx
@@ -1,5 +1,6 @@
+import { ConfigAppSDK } from "@contentful/app-sdk";
 import { FormControl, Select } from "@contentful/f36-components";
-import { useCMA } from "@contentful/react-apps-toolkit";
+import { useSDK } from "@contentful/react-apps-toolkit";
 import { useEffect, useState } from "react";
 
 interface IContentModelsDropdown {
@@ -13,12 +14,12 @@ export default function ContentModelsDropdown({
   configuredModels = {},
   onChange,
 }: IContentModelsDropdown) {
-  const cma = useCMA();
+  const sdk = useSDK<ConfigAppSDK>();
   const [models, setModels] = useState<Record<string, string>>({});
 
   useEffect(() => {
     const fetchModels = async () => {
-      const contentModels = await cma.contentType.getMany({ limit: 1000 });
+      const contentModels = await sdk.cma.contentType.getMany({ limit: 1000 });
       const contentModelsDefaults = contentModels.items.reduce(
         (acc: Record<string, string>, item) => {
           acc[item.sys.id] = item.name;

diff --git a/src/components/SlugFieldsDropdown.tsx b/src/components/SlugFieldsDropdown.tsx
@@ -1,6 +1,6 @@
 import { ConfigAppSDK } from "@contentful/app-sdk";
 import { FormControl, Select, TextLink } from "@contentful/f36-components";
-import { useCMA, useSDK } from "@contentful/react-apps-toolkit";
+import { useSDK } from "@contentful/react-apps-toolkit";
 import { useEffect, useState } from "react";
 
 interface ISlugFieldsDropdownProps {
@@ -15,13 +15,12 @@ export default function SlugFieldsDropdown({
   onChange,
 }: ISlugFieldsDropdownProps) {
   const sdk = useSDK<ConfigAppSDK>();
-  const cma = useCMA();
   const [loading, setLoading] = useState<boolean>(true);
   const [fields, setFields] = useState<Record<string, string>>({});
 
   useEffect(() => {
     const fetchFields = async () => {
-      const contentModel = await cma.contentType.get({ contentTypeId: model });
+      const contentModel = await sdk.cma.contentType.get({ contentTypeId: model });
       const fields = contentModel.fields
         .filter((field) => field.type === "Symbol" || field.type === "Text")
         .reduce((acc: Record<string, string>, field) => {

diff --git a/src/locations/ConfigScreen.tsx b/src/locations/ConfigScreen.tsx
@@ -19,7 +19,7 @@ import {
   Pill,
 } from "@contentful/f36-components";
 import { PlusIcon } from "@contentful/f36-icons";
-import { useCMA, useSDK } from "@contentful/react-apps-toolkit";
+import { useSDK } from "@contentful/react-apps-toolkit";
 import { css } from "emotion";
 import { useCallback, useEffect, useReducer, useState } from "react";
 import SlugFieldsDropdown from "../components/SlugFieldsDropdown";
@@ -57,7 +57,6 @@ interface IState {
 const ConfigScreen = () => {
   const [parameters, setParameters] = useState<AppInstallationParameters>({});
   const sdk = useSDK<ConfigAppSDK>();
-  const cma = useCMA();
 
   const [state, setState] = useReducer(
     (state: IState, newState: Partial<IState>) => ({
@@ -82,6 +81,24 @@ const ConfigScreen = () => {
     }
   });
 
+  const updateModels = async () => {
+    for (const key of Object.keys(parameters.models || {})) {
+      const editorInterface = await sdk.cma.editorInterface.get({ contentTypeId: key });
+      const controlIdx = editorInterface?.controls?.findIndex(control => control.fieldId === parameters.models?.[key].slugField);
+      if (controlIdx) {
+        const fieldControl = editorInterface?.controls?.[controlIdx];
+        if (editorInterface.controls && controlIdx && fieldControl?.fieldId === parameters.models?.[key].slugField && fieldControl?.widgetId !== sdk.ids.app) {
+          editorInterface.controls[controlIdx].widgetId = sdk.ids.app;
+          editorInterface.controls[controlIdx].widgetNamespace = "app";
+          await sdk.cma.editorInterface.update({ contentTypeId: key }, { sys: editorInterface.sys, controls: editorInterface.controls });
+          sdk.notifier.success(
+            `Updated slug field appearance settings in ${key} to use Better Slugs.`
+          );
+        }
+      }
+    }
+  }
+
   const onConfigure = useCallback(async () => {
     // This method will be called when a user clicks on "Install"
     // or "Save" in the configuration screen.
@@ -104,12 +121,15 @@ const ConfigScreen = () => {
     // `onConfigure` allows to configure a callback to be
     // invoked when a user attempts to install the app or update
     // its configuration.
-    sdk.app.onConfigure(() => onConfigure());
+    sdk.app.onConfigure(async () => {
+      await updateModels();
+      return onConfigure();
+    });
   }, [sdk, onConfigure]);
 
   useEffect(() => {
     (async () => {
-      const contentModels = await cma.contentType.getMany({ limit: 1000 });
+      const contentModels = await sdk.cma.contentType.getMany({ limit: 1000 });
       const contentModelsDefaults = contentModels.items.reduce(
         (acc: Record<string, string>, item) => {
           acc[item.sys.id] = item.name;

diff --git a/src/locations/Dialog.spec.tsx b/src/locations/Dialog.spec.tsx
diff --git a/src/locations/Dialog.tsx b/src/locations/Dialog.tsx
diff --git a/src/locations/EntryEditor.spec.tsx b/src/locations/EntryEditor.spec.tsx
diff --git a/src/locations/EntryEditor.tsx b/src/locations/EntryEditor.tsx
diff --git a/src/locations/Home.spec.tsx b/src/locations/Home.spec.tsx
diff --git a/src/locations/Home.tsx b/src/locations/Home.tsx
diff --git a/src/locations/Page.spec.tsx b/src/locations/Page.spec.tsx
diff --git a/src/locations/Page.tsx b/src/locations/Page.tsx
diff --git a/src/locations/Sidebar.spec.tsx b/src/locations/Sidebar.spec.tsx
diff --git a/src/locations/Sidebar.tsx b/src/locations/Sidebar.tsx