✨ Removed selects from diff view

graphql-editor · Jun 29, 2023 · 244deac · 244deac
1 parent 754a45b
commit 244deac
Show file tree

Hide file tree

Showing 29 changed files with 209 additions and 196 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/editor-worker/package.json b/packages/editor-worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor-worker",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -46,7 +46,7 @@
     "file-saver": "^2.0.5",
     "framer": "^2.3.0",
     "fuzzyjs": "^5.0.1",
-    "graphql-editor-worker": "^6.6.4",
+    "graphql-editor-worker": "^6.6.5",
     "graphql-js-tree": "^0.4.0",
     "graphql-language-service": "3.1.4",
     "html-to-image": "^1.10.8",

diff --git a/packages/editor/src/DiffEditor/index.tsx b/packages/editor/src/DiffEditor/index.tsx
@@ -1,13 +1,13 @@
-import { DiffEditorPane } from '@/editor/code';
-import styled from '@emotion/styled';
-import React, { useState } from 'react';
-import { Parser, TreeToGraphQL } from 'graphql-js-tree';
-import { useSortState } from '@/state/containers/sort';
-import { fontFamilySans } from '@/vars';
-import { Arrow_AZ, Select } from '@aexol-studio/styling-system';
+import { DiffEditorPane } from "@/editor/code";
+import styled from "@emotion/styled";
+import React, { useState } from "react";
+import { Parser, TreeToGraphQL } from "graphql-js-tree";
+import { useSortState } from "@/state/containers/sort";
+import { fontFamilySans } from "@/vars";
+import { Arrow_AZ } from "@aexol-studio/styling-system";
 
 interface DiffEditorProps {
-  schemas: Record<string, string>;
+  schemas: [string, string];
 }
 
 const Main = styled.div`
@@ -34,16 +34,6 @@ const Heading = styled.h1`
   font-family: ${fontFamilySans};
 `;
 
-const Selects = styled.div`
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  gap: 10px;
-  right: 16px;
-  position: absolute;
-  pointer-events: none;
-`;
-
 const AZContainer = styled.div<{ active?: boolean }>`
   display: flex;
   cursor: pointer;
@@ -55,26 +45,12 @@ const AZContainer = styled.div<{ active?: boolean }>`
 export const DiffEditor = ({ schemas }: DiffEditorProps) => {
   const { sortAlphabetically } = useSortState();
   const [isSortActive, setIsSortActive] = useState(true);
-  const [leftVersion, setLeftVersion] = useState(
-    Object.keys(schemas)[Object.keys(schemas).length - 1],
-  );
-  const [rightVersion, setRightVersion] = useState(
-    Object.keys(schemas)[Object.keys(schemas).length - 2],
-  );
-
-  const selectOptions = Object.keys(schemas).map((el) => {
-    return {
-      label: el,
-      value: el,
-    };
-  });
-
   const sortSchema = (schema: string) => {
-    if (!schema) return '';
+    if (!schema) return "";
     const tree = Parser.parse(schema);
     tree.nodes.sort(sortAlphabetically);
     tree.nodes = tree.nodes.filter(
-      (n) => n.args?.sort(sortAlphabetically) && n,
+      (n) => n.args?.sort(sortAlphabetically) && n
     );
     return TreeToGraphQL.parse(tree);
   };
@@ -83,20 +59,6 @@ export const DiffEditor = ({ schemas }: DiffEditorProps) => {
     <Main>
       <TopBar>
         <Heading>DIFF VIEW</Heading>
-        <Selects>
-          <Select
-            options={selectOptions}
-            onChange={setLeftVersion}
-            placeholder="Select version..."
-            selectedOption={leftVersion}
-          />
-          <Select
-            options={selectOptions}
-            onChange={setRightVersion}
-            placeholder="Select version..."
-            selectedOption={rightVersion}
-          />
-        </Selects>
         <AZContainer
           active={isSortActive}
           onClick={() => setIsSortActive((s) => !s)}
@@ -105,14 +67,8 @@ export const DiffEditor = ({ schemas }: DiffEditorProps) => {
         </AZContainer>
       </TopBar>
       <DiffEditorPane
-        schema={
-          isSortActive ? sortSchema(schemas[leftVersion]) : schemas[leftVersion]
-        }
-        newSchema={
-          isSortActive
-            ? sortSchema(schemas[rightVersion])
-            : schemas[rightVersion]
-        }
+        schema={isSortActive ? sortSchema(schemas[0]) : schemas[0]}
+        newSchema={isSortActive ? sortSchema(schemas[1]) : schemas[1]}
         size={`100vw-50px`}
       />
     </Main>

diff --git a/packages/editor/src/editor/Editor.tsx b/packages/editor/src/editor/Editor.tsx
@@ -74,8 +74,8 @@ export interface EditorProps {
   // Code and libraries
   schema: PassedSchema;
   // force expand/hide sidebar
-  // Record containing graphql schemas with "name" as a key and graphql schema as a "value"
-  diffSchemas?: Record<string, string>;
+  // schemas to compare usually latest its the first schema second one is compared
+  diffSchemas?: [string, string];
   // Function to be called when schema is set by the editor
   setSchema: (props: PassedSchema, isInvalid?: boolean) => void;
   // Function that could be fired if tree changes
@@ -276,6 +276,7 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
           path={path}
           toggleCode={routes.code === "on"}
           setSchema={setSchema}
+          readOnly={readonly}
           setToggleCode={() =>
             set(
               {

diff --git a/packages/editor/src/editor/code/DiffEditorPane.tsx b/packages/editor/src/editor/code/DiffEditorPane.tsx
@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
-import { theme as MonacoTheme, diffEditorSettings } from './monaco';
+import React, { useMemo } from "react";
+import { theme as MonacoTheme, diffEditorSettings } from "./monaco";
 
-import { fontFamily } from '@/vars';
-import { useTheme } from '@/state/containers';
-import { SchemaDiffEditor } from '@/editor/code/guild';
-import { CodeContainer } from '@/editor/code/style/Code';
+import { fontFamily } from "@/vars";
+import { useTheme } from "@/state/containers";
+import { SchemaDiffEditor } from "@/editor/code/guild";
+import { CodeContainer } from "@/editor/code/style/Code";
 
 export type DiffEditorPaneProps = {
   size: number | string;
@@ -23,7 +23,7 @@ export const DiffEditorPane = ({ schema, newSchema }: DiffEditorPaneProps) => {
       ...diffEditorSettings,
       fontFamily,
     }),
-    [],
+    []
   );
   return (
     <>
@@ -32,7 +32,7 @@ export const DiffEditorPane = ({ schema, newSchema }: DiffEditorPaneProps) => {
           <SchemaDiffEditor
             height="100%"
             beforeMount={(monaco) =>
-              monaco.editor.defineTheme('graphql-editor', MonacoTheme(theme))
+              monaco.editor.defineTheme("graphql-editor", MonacoTheme(theme))
             }
             original={schema}
             modified={newSchema}

diff --git a/packages/editor/src/editor/menu/Menu.tsx b/packages/editor/src/editor/menu/Menu.tsx
@@ -93,6 +93,7 @@ export interface MenuProps {
   setActivePane: (pane?: ActivePane) => void;
   schema: string;
   libraries?: string;
+  readOnly?: boolean;
   setSchema: (props: PassedSchema, isInvalid?: boolean) => void;
   path: string;
 }
@@ -106,6 +107,7 @@ export const Menu = ({
   path,
   schema,
   libraries,
+  readOnly,
   excludePanes = [],
 }: MenuProps) => {
   const [importOpen, setImportOpen] = useState(false);
@@ -208,11 +210,13 @@ export const Menu = ({
             </MenuItem>
           </Tooltip>
         </DropdownMenu>
-        <Tooltip title="Import schema" position="right-center">
-          <MenuItem onClick={() => setImportOpen(true)} data-tour="import">
-            <ArrowNarrowBottomAlignment />
-          </MenuItem>
-        </Tooltip>
+        {!readOnly && (
+          <Tooltip title="Import schema" position="right-center">
+            <MenuItem onClick={() => setImportOpen(true)} data-tour="import">
+              <ArrowNarrowBottomAlignment />
+            </MenuItem>
+          </Tooltip>
+        )}
         <Filler />
       </Sidebar>
       <ImportSchema

diff --git a/packages/sandbox/apps/Light.tsx b/packages/sandbox/apps/Light.tsx
@@ -1,38 +1,37 @@
-import React, { useState } from 'react';
-import { GraphQLEditor } from 'graphql-editor';
-import { PassedSchema } from 'graphql-editor';
-import * as schemas from '../schema';
+import React, { useState } from "react";
+import { GraphQLEditor, PassedSchema } from "graphql-editor";
+import * as schemas from "../schema";
 
 export const Light = () => {
   const [mySchema, setMySchema] = useState<PassedSchema>({
     code: schemas.food,
-    libraries: '',
+    libraries: "",
   });
   return (
     <div
       style={{
         flex: 1,
-        width: '100%',
-        height: '100%',
-        alignSelf: 'stretch',
-        display: 'flex',
-        position: 'relative',
+        width: "100%",
+        height: "100%",
+        alignSelf: "stretch",
+        display: "flex",
+        position: "relative",
       }}
     >
       <GraphQLEditor
         path="light"
         setSchema={(props) => {
           setMySchema(props);
         }}
-        diffSchemas={{
-          '1': schemas.versionedUsersLibraryLatest,
-          '2': schemas.versionedUsersLibrary01,
-        }}
+        diffSchemas={[
+          schemas.versionedUsersLibraryLatest,
+          schemas.versionedUsersLibrary01,
+        ]}
         schema={mySchema}
       />
     </div>
   );
 };
 
 Light.description =
-  'Part schema of a big delivery service Deliverer in Light theme';
+  "Part schema of a big delivery service Deliverer in Light theme";
diff --git a/packages/sandbox/apps/diff.tsx b/packages/sandbox/apps/diff.tsx
@@ -1,26 +1,23 @@
-import React from 'react';
-import { GraphQLEditor } from 'graphql-editor';
-import * as schemas from '../schema';
+import React from "react";
+import { GraphQLEditor } from "graphql-editor";
+import * as schemas from "../schema";
 
-export type SchemasVersions = Record<string, string>;
-
-const mockData: SchemasVersions = {
-  '1.0.31': '',
-  '1.0.32': '',
-  '1.0.33': schemas.versionedUsersLibraryLatest,
-  '1.0.34': schemas.versionedUsersLibrary01,
-};
+export type SchemasVersions = [string, string];
 
+const mockData: SchemasVersions = [
+  schemas.versionedUsersLibraryLatest,
+  schemas.versionedUsersLibrary01,
+];
 export const diff = () => {
   return (
     <div
       style={{
         flex: 1,
-        width: '100%',
-        height: '100%',
-        alignSelf: 'stretch',
-        display: 'flex',
-        position: 'relative',
+        width: "100%",
+        height: "100%",
+        alignSelf: "stretch",
+        display: "flex",
+        position: "relative",
       }}
     >
       <GraphQLEditor
@@ -33,4 +30,4 @@ export const diff = () => {
   );
 };
 
-diff.description = 'User Auth GraphQL Schema with diffs';
+diff.description = "User Auth GraphQL Schema with diffs";