Merge branch 'master' into production

app/src/components/features/mocksV2/MockEditorIndex/Editor/index.tsx

@@ -331,6 +331,7 @@ const MockEditor: React.FC<Props> = ({
  defaultValue={headersString}
  handleChange={setHeadersString}
  language={EditorLanguage.JSON}
+ analyticEventProperties={{ source: "mocks", mock_type: type }}
  />
  </Col>
  </Row>
@@ -349,6 +350,7 @@ const MockEditor: React.FC<Props> = ({
  handleChange={setBody}
  language={getEditorLanguage(fileType)}
  isReadOnly={isEditorReadOnly}
+ analyticEventProperties={{ source: "mocks", mock_type: mockType }}
  toolbarOptions={{
  title: mockType === MockType.FILE ? "File content" : "",
  options: null,

app/src/components/features/rules/RulePairs/Pairs/Rows/RowsMarkup/CustomScriptRow/index.jsx

@@ -15,6 +15,7 @@ import { getDefaultScriptRender, createRenderedScript } from "./utils";
 import { isExtensionManifestVersion3 } from "actions/ExtensionActions";
 import { MockPickerModal } from "features/mocks/modals";
 import CodeEditor, { EditorLanguage } from "componentsV2/CodeEditor";
+import { RuleType } from "features/rules";
 
 const { Text } = Typography;
 
@@ -246,6 +247,7 @@ const CustomScriptRow = ({
  value={initialCodeEditorValue}
  handleChange={handleEditorUpdate}
  isReadOnly={isInputDisabled}
+ analyticEventProperties={{ source: "rule_editor", rule_type: RuleType.SCRIPT }}
  toolbarOptions={{
  title: "Code",
  }}

app/src/components/features/rules/RulePairs/Pairs/Rows/RowsMarkup/RequestBodyRow/index.js

@@ -13,6 +13,7 @@ import { PremiumIcon } from "components/common/PremiumIcon";
 import { PremiumFeature } from "features/pricing";
 import CodeEditor, { EditorLanguage } from "componentsV2/CodeEditor";
 import { MdInfoOutline } from "@react-icons/all-files/md/MdInfoOutline";
+import { RuleType } from "features/rules";
 
 const RequestBodyRow = ({ rowIndex, pair, pairIndex, ruleDetails, isInputDisabled }) => {
  const dispatch = useDispatch();
@@ -188,7 +189,7 @@ const RequestBodyRow = ({ rowIndex, pair, pairIndex, ruleDetails, isInputDisable
  >
  <Col xl="12" span={24}>
  <CodeEditor
- key={pair.request.type}
+ // key={pair.request.type}
  language={
  pair.request.type === GLOBAL_CONSTANTS.REQUEST_BODY_TYPES.CODE
  ? EditorLanguage.JAVASCRIPT
@@ -202,6 +203,7 @@ const RequestBodyRow = ({ rowIndex, pair, pairIndex, ruleDetails, isInputDisable
  }
  handleChange={requestBodyChangeHandler}
  isReadOnly={isInputDisabled}
+ analyticEventProperties={{ source: "rule_editor", rule_type: RuleType.REQUEST }}
  toolbarOptions={{
  title: "Request Body",
  options: [EditorRadioGroupOptions],

app/src/components/features/rules/RulePairs/Pairs/Rows/RowsMarkup/ResponseBodyRow/index.js

@@ -23,6 +23,7 @@ import { PremiumIcon } from "components/common/PremiumIcon";
 import { PremiumFeature } from "features/pricing";
 import CodeEditor, { EditorLanguage } from "componentsV2/CodeEditor";
 import { MdInfoOutline } from "@react-icons/all-files/md/MdInfoOutline";
+import { RuleType } from "features/rules";
 import "./ResponseBodyRow.css";
 
 const ResponseBodyRow = ({ rowIndex, pair, pairIndex, ruleDetails, isInputDisabled }) => {
@@ -299,7 +300,7 @@ const ResponseBodyRow = ({ rowIndex, pair, pairIndex, ruleDetails, isInputDisabl
  >
  <Col xl="12" span={24}>
  <CodeEditor
- key={pair.response.type}
+ // key={pair.response.type}
  language={
  pair.response.type === GLOBAL_CONSTANTS.RESPONSE_BODY_TYPES.CODE
  ? EditorLanguage.JAVASCRIPT
@@ -314,6 +315,7 @@ const ResponseBodyRow = ({ rowIndex, pair, pairIndex, ruleDetails, isInputDisabl
  isReadOnly={isInputDisabled}
  handleChange={responseBodyChangeHandler}
  isResizable
+ analyticEventProperties={{ source: "rule_editor", rule_type: RuleType.RESPONSE }}
  toolbarOptions={{
  title: "Response Body",
  options: [EditorRadioGroupOptions],

app/src/components/mode-specific/desktop/InterceptTraffic/WebTraffic/TrafficTableV2/FixedRequestLogPane.js

@@ -168,6 +168,7 @@ const LogPane = ({ log_id, title, requestState, timestamp, data: request_data })
  language={EditorLanguage.JSON}
  isReadOnly
  isResizable={false}
+ analyticEventProperties={{ source: "traffic_table" }}
  />
  </div>
  ),

app/src/componentsV2/CodeEditor/components/Editor/Editor.tsx

@@ -5,14 +5,19 @@ import { json } from "@codemirror/lang-json";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
-import { EditorLanguage, EditorCustomToolbar } from "componentsV2/CodeEditor/types";
+import { EditorLanguage, EditorCustomToolbar, AnalyticEventProperties } from "componentsV2/CodeEditor/types";
 import { ResizableBox } from "react-resizable";
 import { useDispatch, useSelector } from "react-redux";
 import { actions } from "store";
-import { getAllEditorToast } from "store/selectors";
+import { getAllEditorToast, getIsCodeEditorFullScreenModeOnboardingCompleted } from "store/selectors";
 import { EditorToastContainer } from "../EditorToast/EditorToastContainer";
 import { getByteSize } from "utils/FormattingHelper";
 import CodeEditorToolbar from "./components/Toolbar/Toolbar";
+import { Modal } from "antd";
+import { toast } from "utils/Toast";
+import { useLocation } from "react-router-dom";
+import PATHS from "config/constants/sub/paths";
+import { trackCodeEditorCollapsedClick, trackCodeEditorExpandedClick } from "../analytics";
 import "./editor.scss";
 
 interface EditorProps {
@@ -26,6 +31,7 @@ interface EditorProps {
  toolbarOptions?: EditorCustomToolbar;
  hideCharacterCount?: boolean;
  handleChange?: (value: string) => void;
+ analyticEventProperties?: AnalyticEventProperties;
 }
 
 const Editor: React.FC<EditorProps> = ({
@@ -39,10 +45,14 @@ const Editor: React.FC<EditorProps> = ({
  handleChange = () => {},
  toolbarOptions,
  id = "",
+ analyticEventProperties = {},
 }) => {
+ const location = useLocation();
  const dispatch = useDispatch();
  const [editorHeight, setEditorHeight] = useState(height);
  const [editorContent, setEditorContent] = useState(value);
+ const [isFullScreen, setIsFullScreen] = useState(false);
+ const isFullScreenModeOnboardingCompleted = useSelector(getIsCodeEditorFullScreenModeOnboardingCompleted);
 
  const allEditorToast = useSelector(getAllEditorToast);
  const toastOverlay = useMemo(() => allEditorToast[id], [allEditorToast, id]); // todo: rename
@@ -51,6 +61,27 @@ const Editor: React.FC<EditorProps> = ({
  setEditorHeight(size.height);
  };
 
+ const handleFullScreenToggle = () => {
+ setIsFullScreen((prev) => !prev);
+
+ if (!isFullScreen) {
+ trackCodeEditorExpandedClick(analyticEventProperties);
+
+ if (!isFullScreenModeOnboardingCompleted) {
+ // TODO: @rohanmathur to remove this check after adding shortcut in mocks save button
+ const isRuleEditor = location?.pathname.includes(PATHS.RULE_EDITOR.RELATIVE);
+
+ if (isRuleEditor) {
+ toast.info(`Use '⌘+S' or 'ctrl+S' to save the rule`, 3);
+ // @ts-ignore
+ dispatch(actions.updateIsCodeEditorFullScreenModeOnboardingCompleted(true));
+ }
+ }
+ } else {
+ trackCodeEditorCollapsedClick(analyticEventProperties);
+ }
+ };
+
  const editorLanguage = useMemo(() => {
  switch (language) {
  case EditorLanguage.JAVASCRIPT:
@@ -91,14 +122,75 @@ const Editor: React.FC<EditorProps> = ({
  [handleChange]
  );
 
- return (
+ return isFullScreen ? (
+ <>
+ <Modal
+ keyboard
+ open={isFullScreen}
+ destroyOnClose
+ onCancel={() => {
+ setIsFullScreen(false);
+ }}
+ closable={false}
+ closeIcon={null}
+ maskClosable={false}
+ wrapClassName="code-editor-fullscreen-modal"
+ maskStyle={{ background: "var(--requestly-color-surface-0, #212121)" }}
+ footer={<div className="code-editor-character-count">{getByteSize(value)} characters</div>}
+ >
+ <CodeEditorToolbar
+ language={language}
+ code={editorContent}
+ isFullScreen={isFullScreen}
+ onCodeFormat={(formattedCode: string) => {
+ setEditorContent(formattedCode);
+ }}
+ handleFullScreenToggle={handleFullScreenToggle}
+ customOptions={toolbarOptions}
+ />
+
+ <>
+ {toastOverlay && (
+ <EditorToastContainer
+ message={toastOverlay.message}
+ type={toastOverlay.type}
+ onClose={() => handleEditorClose(toastOverlay.id)}
+ isVisible={toastOverlay}
+ autoClose={toastOverlay.autoClose}
+ />
+ )}
+ <CodeMirror
+ className="code-editor"
+ width="100%"
+ readOnly={isReadOnly}
+ value={editorContent ?? ""}
+ defaultValue={defaultValue}
+ onChange={handleEditorBodyChange}
+ theme={vscodeDark}
+ extensions={[editorLanguage, EditorView.lineWrapping]}
+ basicSetup={{
+ highlightActiveLine: false,
+ bracketMatching: true,
+ closeBrackets: true,
+ allowMultipleSelections: true,
+ }}
+ data-enable-grammarly="false"
+ data-gramm_editor="false"
+ data-gramm="false"
+ />
+ </>
+ </Modal>
+ </>
+ ) : (
  <>
  <CodeEditorToolbar
  language={language}
  code={editorContent}
+ isFullScreen={isFullScreen}
  onCodeFormat={(formattedCode: string) => {
  setEditorContent(formattedCode);
  }}
+ handleFullScreenToggle={handleFullScreenToggle}
  customOptions={toolbarOptions}
  />
  <ResizableBox

app/src/componentsV2/CodeEditor/components/Editor/components/Toolbar/Toolbar.tsx

@@ -3,6 +3,8 @@ import { RQButton } from "lib/design-system/components";
 import { IoMdCopy } from "@react-icons/all-files/io/IoMdCopy";
 import { PiBracketsCurlyBold } from "@react-icons/all-files/pi/PiBracketsCurlyBold";
 import { BsFiletypeRaw } from "@react-icons/all-files/bs/BsFiletypeRaw";
+import { MdOpenInFull } from "@react-icons/all-files/md/MdOpenInFull";
+import { MdCloseFullscreen } from "@react-icons/all-files/md/MdCloseFullscreen";
 import { EditorLanguage, EditorCustomToolbar } from "componentsV2/CodeEditor/types";
 import { Tooltip } from "antd";
 import { useTheme } from "styled-components";
@@ -19,9 +21,18 @@ interface CodeEditorToolbarProps {
  code: string;
  customOptions?: EditorCustomToolbar;
  onCodeFormat: (formattedCode: string) => void;
+ isFullScreen: boolean;
+ handleFullScreenToggle: () => void;
 }
 
-const CodeEditorToolbar: React.FC<CodeEditorToolbarProps> = ({ language, code, onCodeFormat, customOptions }) => {
+const CodeEditorToolbar: React.FC<CodeEditorToolbarProps> = ({
+ language,
+ code,
+ onCodeFormat,
+ customOptions,
+ isFullScreen = false,
+ handleFullScreenToggle = () => {},
+}) => {
  const theme = useTheme();
  const [isCodePrettified, setIsCodePrettified] = useState(false);
  const [isCopied, setIsCopied] = useState(false);
@@ -106,6 +117,18 @@ const CodeEditorToolbar: React.FC<CodeEditorToolbarProps> = ({ language, code, o
  onClick={handleCodeFormatting}
  />
  </Tooltip>
+
+ <Tooltip
+ color={theme.colors.black}
+ title={isFullScreen ? "Exit full screen (esc)" : "Full screen"}
+ placement="bottomLeft"
+ >
+ <RQButton
+ type="text"
+ icon={isFullScreen ? <MdCloseFullscreen /> : <MdOpenInFull />}
+ onClick={handleFullScreenToggle}
+ />
+ </Tooltip>
  </div>
  </div>
  );

app/src/componentsV2/CodeEditor/components/Editor/editor.scss

@@ -50,3 +50,35 @@
  color: var(--requestly-color-text-subtle);
  font-size: var(--requestly-font-size-xs);
 }
+
+.code-editor-fullscreen-modal {
+ .ant-modal {
+ width: 100% !important;
+ max-width: 1440px;
+ top: 0px;
+ padding: 8px;
+ margin: 0 auto;
+
+ .ant-modal-content {
+ border-radius: var(--space-4, 8px);
+ border: 1px solid var(--requestly-color-white-t-10, rgba(255, 255, 255, 0.06));
+
+ .ant-modal-body {
+ padding: 8px 8px 24px 8px !important;
+ height: calc(100vh - 54px) !important; // 54px -> vertical padding + footer height
+
+ .code-editor {
+ border: none;
+ border-radius: 4px;
+ height: calc(100% - 20px);
+ background: var(--requestly-color-surface-0, #212121);
+ }
+ }
+
+ .ant-modal-footer {
+ padding: 8px;
+ border: none;
+ }
+ }
+ }
+}

app/src/componentsV2/CodeEditor/components/analytics/constants.ts

@@ -2,4 +2,6 @@ export const CODE_EDITOR = {
  CODE_COPIED: "code_editor_code_copied",
  CODE_PRETTIFIED: "code_editor_code_prettified",
  CODE_MINIFIED: "code_editor_code_minified",
+ EXPANDED: "code_editor_expanded",
+ COLLAPSED: "code_editor_collapsed",
 };

app/src/componentsV2/CodeEditor/components/analytics/index.ts

@@ -1,5 +1,6 @@
 import { trackEvent } from "modules/analytics";
 import { CODE_EDITOR } from "./constants";
+import { AnalyticEventProperties } from "componentsV2/CodeEditor/types";
 
 export const trackCodeEditorCodeCopied = () => {
  trackEvent(CODE_EDITOR.CODE_COPIED);
@@ -12,3 +13,13 @@ export const trackCodeEditorCodePrettified = () => {
 export const trackCodeEditorCodeMinified = () => {
  trackEvent(CODE_EDITOR.CODE_MINIFIED);
 };
+
+export const trackCodeEditorExpandedClick = (props: AnalyticEventProperties) => {
+ const params = { ...props };
+ trackEvent(CODE_EDITOR.EXPANDED, params);
+};
+
+export const trackCodeEditorCollapsedClick = (props: AnalyticEventProperties) => {
+ const params = { ...props };
+ trackEvent(CODE_EDITOR.COLLAPSED, params);
+};

app/src/componentsV2/CodeEditor/types/index.ts

@@ -1,4 +1,6 @@
+import { MockType } from "components/features/mocksV2/types";
 import { ReactNode } from "react";
+import { RuleType } from "types";
 
 export enum EditorLanguage {
  JAVASCRIPT = "javascript",
@@ -29,3 +31,18 @@ export const getEditorLanguageFromContentType = (contentType: string): EditorLan
  return EditorLanguage.CSS;
  }
 };
+
+export type AnalyticEventProperties =
+ | {
+ source: "rule_editor";
+ rule_type: RuleType;
+ }
+ | {
+ source: "mocks";
+ mock_type: MockType;
+ }
+ | {
+ source: "api_client";
+ }
+ | { source: "traffic_table" }
+ | Record<string, unknown>;

app/src/store/features/userActions.js

@@ -208,3 +208,7 @@ export const updateIsAppBannerVisible = (prevState, action) => {
 export const updateIsSupportChatOpened = (prevState, action) => {
  prevState.misc.persist.isSupportChatOpened = action.payload;
 };
+
+export const updateIsCodeEditorFullScreenModeOnboardingCompleted = (prevState, action) => {
+ prevState.misc.persist.isCodeEditorFullScreenModeOnboardingCompleted = action.payload;
+};

app/src/store/initial-state/index.js

@@ -195,6 +195,7 @@ const INITIAL_STATE = {
  isConnectedAppsTourCompleted: false,
  isNetworkSessionTooltipShown: false,
  isRuleEditorTourCompleted: false,
+ isCodeEditorFullScreenModeOnboardingCompleted: false,
  extensionInstallSource: null,
  isMiscTourCompleted: {
  firstDraftSession: false,