feat: diff view (#35)

Author: spaenleh

cypress/e2e/diffView/diffView.cy.ts

@@ -0,0 +1,29 @@
+import { Context, PermissionLevel } from '@graasp/sdk';
+
+import {
+  DIFF_VIEW_CONTAINER_CY,
+  buildDataCy,
+} from '../../../src/config/selectors';
+import {
+  CODE_EXPLAIN_MODE_SETTING,
+  MOCK_DIFF_VIEW_SETTINGS,
+} from '../../fixtures/appSettings';
+
+describe('Diff View', () => {
+  beforeEach(() => {
+    cy.setUpApi({
+      database: {
+        appSettings: [CODE_EXPLAIN_MODE_SETTING, MOCK_DIFF_VIEW_SETTINGS],
+      },
+      appContext: {
+        context: Context.PLAYER,
+        permission: PermissionLevel.Read,
+      },
+    });
+    cy.visit('/');
+  });
+
+  it('show diff view', () => {
+    cy.get(buildDataCy(DIFF_VIEW_CONTAINER_CY)).should('be.visible');
+  });
+});

cypress/fixtures/appSettings.ts

@@ -6,20 +6,23 @@ import {
   APP_MODE_SETTINGS_NAME,
   AppMode,
   CODE_EXECUTION_SETTINGS_NAME,
+  DIFF_VIEW_SETTINGS_NAME,
   GENERAL_SETTINGS_NAME,
   INSTRUCTOR_CODE_VERSION_SETTINGS_NAME,
 } from '../../src/config/appSettingsTypes';
 import { PYTHON } from '../../src/config/constants';
 import {
   DEFAULT_APP_MODE_SETTINGS,
   DEFAULT_CODE_EXECUTION_SETTINGS,
+  DEFAULT_DIFF_VIEW_SETTINGS,
   DEFAULT_GENERAL_SETTINGS,
   DEFAULT_INSTRUCTOR_CODE_VERSION_SETTINGS,
 } from '../../src/config/settings';
 import { CodeVersionType } from '../../src/interfaces/codeVersions';
 import {
   AppModeSettings,
   CodeExecutionSettings,
+  DiffViewSettings,
 } from '../../src/interfaces/settings';
 import { MEMBERS } from './members';
 import { MOCK_SERVER_ITEM } from './mockItem';
@@ -44,6 +47,12 @@ const MOCK_COMMIT_MESSAGE = 'This is a mock commit message';
 const MOCK_COMMIT_DESCRIPTION =
   'This is a mock commit Description\nOn multiple lines';
 
+export const MOCK_DIFF_OLD_CODE =
+  'if not value is None:\n    print("not none")';
+
+export const MOCK_DIFF_NEW_CODE =
+  'if value is not None:\n    print("not none")';
+
 export const EMPTY_SETTING: AppSetting = {
   id: v4(),
   name: '',
@@ -108,6 +117,15 @@ export const CODE_COLLABORATE_MODE_SETTING: AppSetting & {
   },
 };
 
+export const CODE_EXPLAIN_MODE_SETTING: AppSetting & {
+  data: AppModeSettings;
+} = {
+  ...MOCK_APP_MODE_SETTING,
+  data: {
+    mode: AppMode.Explain,
+  },
+};
+
 export const MOCK_CODE_SETTINGS: AppSetting & { data: CodeVersionType } = {
   ...EMPTY_SETTING,
   id: v4(),
@@ -120,6 +138,18 @@ export const MOCK_CODE_SETTINGS: AppSetting & { data: CodeVersionType } = {
   },
 };
 
+export const MOCK_DIFF_VIEW_SETTINGS: AppSetting & { data: DiffViewSettings } =
+  {
+    ...EMPTY_SETTING,
+    id: v4(),
+    name: DIFF_VIEW_SETTINGS_NAME,
+    data: {
+      ...DEFAULT_DIFF_VIEW_SETTINGS,
+      oldCode: MOCK_DIFF_OLD_CODE,
+      newCode: MOCK_DIFF_NEW_CODE,
+    },
+  };
+
 export const MOCK_EXECUTABLE_PYTHON_CODE_SETTINGS: AppSetting & {
   data: CodeVersionType;
 } = {

package.json

@@ -50,6 +50,7 @@
     "prism-react-renderer": "1.3.5",
     "qs": "6.11.0",
     "react": "18.2.0",
+    "react-diff-viewer": "3.1.1",
     "react-dom": "18.2.0",
     "react-i18next": "12.0.0",
     "react-markdown": "8.0.3",

src/components/common/AppModeWrapper.tsx

@@ -11,9 +11,11 @@ import { AppModeSettingsKeys } from '../../interfaces/settings';
 import CodeReview from '../codeReview/CodeReview';
 import { useCodeVersionContext } from '../context/CodeVersionContext';
 import { useSettings } from '../context/SettingsContext';
+import DiffView from '../diffView/DiffView';
 import CodeReviewContainer from '../layout/CodeReviewContainer';
 import Repl from '../repl/Repl';
 import CodeEditor from './CodeEditor';
+import Loader from './Loader';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 type Props = {};
@@ -23,7 +25,7 @@ const AppModeWrapper: FC<Props> = () => {
   const {
     [APP_MODE_SETTINGS_NAME]: appModeSetting = DEFAULT_APP_MODE_SETTINGS,
   } = useSettings();
-  const [view, setView] = useState<AppView>(AppView.CodeExecution);
+  const [view, setView] = useState<AppView>(AppView.LoadingView);
 
   useEffect(() => {
     switch (appModeSetting[AppModeSettingsKeys.Mode]) {
@@ -36,12 +38,17 @@ const AppModeWrapper: FC<Props> = () => {
       case AppMode.Review:
         setView(AppView.CodeReview);
         break;
+      case AppMode.Explain:
+        setView(AppView.DiffView);
+        break;
       default:
         setView(DEFAULT_APP_VIEW);
     }
   }, [appModeSetting]);
 
   switch (view) {
+    case AppView.LoadingView:
+      return <Loader />;
     case AppView.CodeEditor:
       return (
         <CodeReviewContainer data-cy={CODE_EDITOR_CONTAINER_CYPRESS}>
@@ -58,6 +65,8 @@ const AppModeWrapper: FC<Props> = () => {
           onClose={() => setView(AppView.CodeReview)}
         />
       );
+    case AppView.DiffView:
+      return <DiffView />;
     case AppView.CodeReview:
     default:
       return <CodeReview setView={setView} />;

src/components/context/SettingsContext.tsx

@@ -9,6 +9,7 @@ import {
   CODE_EXECUTION_SETTINGS_NAME,
   DATA_FILE_LIST_SETTINGS_NAME,
   DATA_FILE_SETTINGS_NAME,
+  DIFF_VIEW_SETTINGS_NAME,
   GENERAL_SETTINGS_NAME,
   INSTRUCTOR_CODE_VERSION_SETTINGS_NAME,
 } from '../../config/appSettingsTypes';
@@ -17,13 +18,15 @@ import {
   DEFAULT_APP_MODE_SETTINGS,
   DEFAULT_CODE_EXECUTION_SETTINGS,
   DEFAULT_DATA_FILE_LIST_SETTINGS,
+  DEFAULT_DIFF_VIEW_SETTINGS,
   DEFAULT_GENERAL_SETTINGS,
   DEFAULT_INSTRUCTOR_CODE_VERSION_SETTINGS,
 } from '../../config/settings';
 import {
   AppModeSettings,
   CodeExecutionSettings,
   DataFileListSettings,
+  DiffViewSettings,
   GeneralSettings,
   InstructorCodeVersionSettings,
 } from '../../interfaces/settings';
@@ -36,6 +39,7 @@ interface AllSettingsType {
   [INSTRUCTOR_CODE_VERSION_SETTINGS_NAME]?: InstructorCodeVersionSettings;
   [APP_MODE_SETTINGS_NAME]?: AppModeSettings;
   [DATA_FILE_LIST_SETTINGS_NAME]?: DataFileListSettings;
+  [DIFF_VIEW_SETTINGS_NAME]?: DiffViewSettings;
 }
 
 // default values for the data property of settings by name
@@ -46,6 +50,7 @@ const defaultSettingsValues: AllSettingsType = {
     DEFAULT_INSTRUCTOR_CODE_VERSION_SETTINGS,
   [APP_MODE_SETTINGS_NAME]: DEFAULT_APP_MODE_SETTINGS,
   [DATA_FILE_LIST_SETTINGS_NAME]: DEFAULT_DATA_FILE_LIST_SETTINGS,
+  [DIFF_VIEW_SETTINGS_NAME]: DEFAULT_DIFF_VIEW_SETTINGS,
 };
 
 // list of the settings names
@@ -55,6 +60,7 @@ const ALL_SETTING_NAMES = [
   INSTRUCTOR_CODE_VERSION_SETTINGS_NAME,
   APP_MODE_SETTINGS_NAME,
   DATA_FILE_LIST_SETTINGS_NAME,
+  DIFF_VIEW_SETTINGS_NAME,
 ] as const;
 
 // automatically generated types

src/components/diffView/DiffView.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import ReactDiffViewer from 'react-diff-viewer';
+
+import { Stack } from '@mui/material';
+
+import { DIFF_VIEW_SETTINGS_NAME } from '../../config/appSettingsTypes';
+import { DIFF_VIEW_CONTAINER_CY } from '../../config/selectors';
+import { DEFAULT_DIFF_VIEW_SETTINGS } from '../../config/settings';
+import { DiffViewSettingsKeys } from '../../interfaces/settings';
+import { useSettings } from '../context/SettingsContext';
+
+const DiffView: FC = () => {
+  const {
+    [DIFF_VIEW_SETTINGS_NAME]: diffViewSettings = DEFAULT_DIFF_VIEW_SETTINGS,
+  } = useSettings();
+
+  return (
+    <Stack data-cy={DIFF_VIEW_CONTAINER_CY} direction="column" m={2}>
+      <ReactDiffViewer
+        linesOffset={diffViewSettings[DiffViewSettingsKeys.LinesOffset]}
+        oldValue={diffViewSettings[DiffViewSettingsKeys.OldCode]}
+        newValue={diffViewSettings[DiffViewSettingsKeys.NewCode]}
+      />
+    </Stack>
+  );
+};
+export default DiffView;