HIde sidebar if no permissions

KevinBatdorf · Oct 8, 2023 · 9fb8b74 · 9fb8b74
1 parent 407ecc5
commit 9fb8b74
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 35 deletions.
diff --git a/cypress/e2e/permissions.cy.js b/cypress/e2e/permissions.cy.js
@@ -26,24 +26,9 @@ context('Permissions', () => {
 
     it('Prevents updating attributes', () => {
         cy.addBlock('kevinbatdorf/code-block-pro');
-        cy.openSideBarPanel('Line Settings');
 
         cy.wait('@canSaveHtml');
 
-        // ported from lines spec with the final assertions updated
-        cy.get('[data-cy="show-line-numbers"]')
-            .should('exist')
-            .should('not.be.checked');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]').should(
-            'not.have.class',
-            'cbp-has-line-numbers',
-        );
-
-        cy.get('[data-cy="show-line-numbers"]').check();
-        cy.get('[data-cy="show-line-numbers"]').should('be.checked');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]').should(
-            'not.have.class', // changed here
-            'cbp-has-line-numbers',
-        );
+        cy.get('[data-cy="show-line-numbers"]').should('not.exist');
     });
 });
diff --git a/src/Editor.tsx b/src/Editor.tsx
@@ -13,7 +13,6 @@ import { fontFamilyLong, maybeClamp } from './util/fonts';
 import { AttributesPropsAndSetter } from './types';
 import defaultThemes from './defaultThemes.json';
 import { ThemeOption } from './types';
-import { useCanEditHTML } from './hooks/useCanEditHTML';
 
 export const Editor = ({
     attributes,
@@ -25,14 +24,11 @@ export const Editor = ({
         defaultThemes,
     ) as ThemeOption;
     const styles = themes[attributes.theme]?.styles;
-    const hasPermission = useCanEditHTML();
-    setAttributes = hasPermission ? setAttributes : () => undefined;
 
     return (
         <>
             <SidebarControls
                 attributes={attributes}
-                canEdit={!!hasPermission}
                 setAttributes={setAttributes}
             />
             <ToolbarControls
@@ -99,11 +95,7 @@ export const Editor = ({
                 })}>
                 <HeaderType {...attributes} />
                 <ButtonList {...attributes} />
-                <Edit
-                    attributes={attributes}
-                    setAttributes={setAttributes}
-                    canEdit={!!hasPermission}
-                />
+                <Edit attributes={attributes} setAttributes={setAttributes} />
                 <FooterType {...attributes} />
                 <SeeMoreType {...attributes} />
             </div>

diff --git a/src/editor/Edit.tsx b/src/editor/Edit.tsx
@@ -17,12 +17,12 @@ import { parseJSONArrayWithRanges } from '../util/arrayHelpers';
 import { computeLineHighlightColor } from '../util/colors';
 import { getEditorLanguage } from '../util/languages';
 import { MissingPermissionsTip } from './components/misc/MissingPermissions';
+import { useCanEditHTML } from '../hooks/useCanEditHTML';
 
 export const Edit = ({
     attributes,
     setAttributes,
-    canEdit,
-}: AttributesPropsAndSetter & { canEdit: boolean }) => {
+}: AttributesPropsAndSetter) => {
     const {
         language,
         theme,
@@ -51,6 +51,7 @@ export const Edit = ({
     } = attributes;
 
     const textAreaRef = useRef<HTMLDivElement>(null);
+    const canEdit = useCanEditHTML();
     const handleChange = (code: string) =>
         setAttributes({ code: encode(code) });
     const { previousLanguage } = useLanguageStore();
@@ -115,7 +116,7 @@ export const Edit = ({
             bgColor: highlighter.getBackgroundColor(),
             textColor: highlighter.getForegroundColor(),
         });
-    }, [theme, highlighter, setAttributes]);
+    }, [theme, highlighter, setAttributes, canEdit]);
 
     useEffect(() => {
         if (!highlighter) return;
@@ -150,6 +151,7 @@ export const Edit = ({
         highlighter,
         seeMoreAfterLine,
         seeMoreTransition,
+        canEdit,
         color,
         code,
         enableMaxHeight,
@@ -193,6 +195,7 @@ export const Edit = ({
         startingLineNumber,
         code,
         loading,
+        canEdit,
         error,
         textAreaRef,
         setAttributes,
@@ -227,6 +230,8 @@ export const Edit = ({
         );
     }
 
+    if (canEdit === undefined) return null;
+
     return (
         <div
             ref={textAreaRef}

diff --git a/src/editor/controls/Sidebar.tsx b/src/editor/controls/Sidebar.tsx
@@ -32,12 +32,12 @@ import { ThemesPanel } from '../components/ThemesPanel';
 import { MissingPermissionsTip } from '../components/misc/MissingPermissions';
 import { BlurControl } from './BlurControl';
 import { HighlightingControl } from './HighlightingControl';
+import { useCanEditHTML } from '../../hooks/useCanEditHTML';
 
 export const SidebarControls = ({
     attributes,
     setAttributes,
-    canEdit,
-}: AttributesPropsAndSetter & { canEdit: boolean }) => {
+}: AttributesPropsAndSetter) => {
     const [language, setLanguage] = useLanguage({ attributes, setAttributes });
     const { recentLanguages } = useLanguageStore();
     const { updateThemeHistory } = useThemeStore();
@@ -46,9 +46,8 @@ export const SidebarControls = ({
     const languagesSorted = new Map(
         Object.entries(languages).sort((a, b) => a[1].localeCompare(b[1])),
     );
-
+    const canEdit = useCanEditHTML();
     const footersNeedingLinks = ['simpleStringEnd', 'simpleStringStart'];
-
     const showHeaderTextEdit = [
         'simpleString',
         'pillString',
@@ -71,9 +70,15 @@ export const SidebarControls = ({
         });
     }, [bringAttentionToPanel, closeGeneralSidebar, openGeneralSidebar]);
 
+    if (!canEdit)
+        return (
+            <InspectorControls>
+                {canEdit ? null : <MissingPermissionsTip />}
+            </InspectorControls>
+        );
+
     return (
         <InspectorControls>
-            {canEdit ? null : <MissingPermissionsTip />}
             <PanelBody
                 title={__('Language', 'code-block-pro')}
                 initialOpen={bringAttention === 'language-select'}>

diff --git a/src/editor/controls/Toolbar.tsx b/src/editor/controls/Toolbar.tsx
@@ -7,6 +7,7 @@ import { useLanguage } from '../../hooks/useLanguage';
 import { useGlobalStore } from '../../state/global';
 import { AttributesPropsAndSetter, ThemeOption } from '../../types';
 import { languages } from '../../util/languages';
+import { useCanEditHTML } from '../../hooks/useCanEditHTML';
 
 export const ToolbarControls = ({
     attributes,
@@ -19,6 +20,9 @@ export const ToolbarControls = ({
         defaultThemes,
     ) as ThemeOption;
     const { setBringAttentionToPanel } = useGlobalStore();
+    const canEdit = useCanEditHTML();
+
+    if (canEdit === undefined) return null;
 
     return (
         <BlockControls>

diff --git a/src/hooks/useCanEditHTML.ts b/src/hooks/useCanEditHTML.ts
@@ -1,12 +1,13 @@
 import useSWRImmutable from 'swr/immutable';
 import apiFetch from '@wordpress/api-fetch';
 
-const fetcher = (url: string) => apiFetch({ path: url });
+const fetcher = (url: string) => apiFetch<boolean>({ path: url });
 
 export const useCanEditHTML = () => {
-    const { data } = useSWRImmutable(
+    const { data } = useSWRImmutable<boolean>(
         '/code-block-pro/v1/can-save-html',
         fetcher,
     );
+    // Consider it true until the request completes
     return data;
 };