[graphiql] remove unnecessary <div /> wrappers (#3235)

graphql · Jun 21, 2023 · 5d06280 · 5d06280
1 parent 8461b02
commit 5d06280
Show file tree

Hide file tree

Showing 5 changed files with 268 additions and 274 deletions.
diff --git a/.changeset/lucky-penguins-perform.md b/.changeset/lucky-penguins-perform.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+remove unnecessary `<div />` wrappers
diff --git a/packages/graphiql-react/src/utility/resize.ts b/packages/graphiql-react/src/utility/resize.ts
@@ -63,17 +63,16 @@ export function useDragResize({
   const store = useMemo(
     () =>
       debounce(500, (value: string) => {
-        if (storage && storageKey) {
-          storage.set(storageKey, value);
+        if (storageKey) {
+          storage?.set(storageKey, value);
         }
       }),
     [storage, storageKey],
   );
 
   const [hiddenElement, setHiddenElement] = useState<ResizableElement | null>(
     () => {
-      const storedValue =
-        storage && storageKey ? storage.get(storageKey) : null;
+      const storedValue = storageKey && storage?.get(storageKey);
       if (storedValue === HIDE_FIRST || initiallyHidden === 'first') {
         return 'first';
       }
@@ -105,14 +104,10 @@ export function useDragResize({
    */
   useLayoutEffect(() => {
     const storedValue =
-      storage && storageKey
-        ? storage.get(storageKey) || defaultFlexRef.current
-        : defaultFlexRef.current;
-    const flexDirection = direction === 'horizontal' ? 'row' : 'column';
+      (storageKey && storage?.get(storageKey)) || defaultFlexRef.current;
 
     if (firstRef.current) {
       firstRef.current.style.display = 'flex';
-      firstRef.current.style.flexDirection = flexDirection;
       firstRef.current.style.flex =
         storedValue === HIDE_FIRST || storedValue === HIDE_SECOND
           ? defaultFlexRef.current
@@ -121,13 +116,11 @@ export function useDragResize({
 
     if (secondRef.current) {
       secondRef.current.style.display = 'flex';
-      secondRef.current.style.flexDirection = flexDirection;
       secondRef.current.style.flex = '1';
     }
 
     if (dragBarRef.current) {
       dragBarRef.current.style.display = 'flex';
-      dragBarRef.current.style.flexDirection = flexDirection;
     }
   }, [direction, storage, storageKey]);
 
@@ -172,9 +165,13 @@ export function useDragResize({
       element.style.position = '';
       element.style.left = '';
 
-      if (firstRef.current && storage && storageKey) {
-        const storedValue = storage?.get(storageKey);
-        if (storedValue !== HIDE_FIRST && storedValue !== HIDE_SECOND) {
+      if (storage && storageKey) {
+        const storedValue = storage.get(storageKey);
+        if (
+          firstRef.current &&
+          storedValue !== HIDE_FIRST &&
+          storedValue !== HIDE_SECOND
+        ) {
           firstRef.current.style.flex = storedValue || defaultFlexRef.current;
         }
       }

diff --git a/packages/graphiql/cypress/e2e/headers.cy.ts b/packages/graphiql/cypress/e2e/headers.cy.ts
@@ -5,7 +5,7 @@ describe('Headers', () => {
     it('should have default headers while open new tabs', () => {
       cy.visit(`/?query={test}&defaultHeaders=${DEFAULT_HEADERS}`);
       cy.assertHasValues({ query: '{test}', headersString: DEFAULT_HEADERS });
-      cy.get('.graphiql-add-tab-wrapper').click();
+      cy.get('.graphiql-tab-add').click();
       cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
       cy.get('.graphiql-tab-add').click();
       cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
@@ -17,7 +17,7 @@ describe('Headers', () => {
         `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&headers=${HEADERS}`,
       );
       cy.assertHasValues({ query: '{test}', headersString: HEADERS });
-      cy.get('.graphiql-add-tab-wrapper').click();
+      cy.get('.graphiql-tab-add').click();
       cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
       cy.get('.graphiql-tab-add').click();
       cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });