fix: add missing readOnly state to External fields

measuredco · Sep 16, 2024 · bf1449d · bf1449d
1 parent 1a69125
commit bf1449d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/packages/core/components/AutoField/fields/ExternalField/index.tsx b/packages/core/components/AutoField/fields/ExternalField/index.tsx
@@ -16,6 +16,7 @@ export const ExternalField = ({
   label,
   Label,
   id,
+  readOnly,
 }: FieldPropsInternal) => {
   // DEPRECATED
   const validField = field as ExternalFieldType;
@@ -56,6 +57,7 @@ export const ExternalField = ({
         onChange={onChange}
         value={value}
         id={id}
+        readOnly={readOnly}
       />
     </Label>
   );

diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -21,12 +21,14 @@ export const ExternalInput = ({
   value = null,
   name,
   id,
+  readOnly,
 }: {
   field: ExternalField;
   onChange: (value: any) => void;
   value: any;
   name?: string;
   id: string;
+  readOnly?: boolean;
 }) => {
   const {
     mapProp = (val: any) => val,
@@ -91,6 +93,7 @@ export const ExternalInput = ({
       className={getClassName({
         dataSelected: !!value,
         modalVisible: isOpen,
+        readOnly,
       })}
       id={id}
     >
@@ -99,6 +102,7 @@ export const ExternalInput = ({
           type="button"
           onClick={() => setOpen(true)}
           className={getClassName("button")}
+          disabled={readOnly}
         >
           {/* NB this is hardcoded to strapi for now */}
           {value ? (
@@ -121,6 +125,7 @@ export const ExternalInput = ({
             onClick={() => {
               onChange(null);
             }}
+            disabled={readOnly}
           >
             <Unlock size={16} />
           </button>

diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
@@ -11,7 +11,6 @@
   border: 1px solid var(--puck-color-grey-09);
   border-radius: 4px;
   color: var(--puck-color-azure-04);
-  cursor: pointer;
   padding: 12px 16px;
   font-weight: 500;
   white-space: nowrap;
@@ -29,13 +28,16 @@
   border-bottom-right-radius: 0px;
 }
 
+.ExternalInput--readOnly .ExternalInput-button {
+  background-color: var(--puck-color-grey-11);
+}
+
 .ExternalInput-detachButton {
   border: 1px solid var(--puck-color-grey-09);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   background-color: var(--puck-color-grey-12);
   color: var(--puck-color-grey-05);
-  cursor: pointer;
   display: flex;
   gap: 8px;
   align-items: center;
@@ -54,19 +56,22 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .ExternalInput-button:hover,
-  .ExternalInput-detachButton:hover {
+  .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-button:hover,
+  .ExternalInput:not(.ExternalInput--readOnly)
+    .ExternalInput-detachButton:hover {
     background: var(--puck-color-azure-12);
     transition: none;
   }
 
-  .ExternalInput-detachButton:hover {
+  .ExternalInput:not(.ExternalInput--readOnly)
+    .ExternalInput-detachButton:hover {
     color: var(--puck-color-azure-04);
   }
 }
 
-.ExternalInput-button:active,
-.ExternalInput-detachButton:active {
+.ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-button:active,
+.ExternalInput:not(.ExternalInput--readOnly)
+  .ExternalInput-detachButton:active {
   background: var(--puck-color-azure-11);
   transition: none;
 }

diff --git a/packages/core/lib/use-resolved-permissions.ts b/packages/core/lib/use-resolved-permissions.ts
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useState } from "react";
 import { flattenData } from "./flatten-data";
 import { ComponentData, Config, Permissions, UserGenerics } from "../types";
 import { getChanged } from "./get-changed";
-import { AppContext } from "../components/Puck/context";
 
 type PermissionsArgs<
   UserConfig extends Config = Config,