Skip to content

[RQ-4283] Remove API Client from legacy onboarding & workspace creation #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Kanishkrawatt wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[RQ-4283] Remove API Client from legacy onboarding & workspace creation #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 11 additions & 93 deletions app/src/componentsV2/modals/CreateWorkspaceModalOld/CreateWorkspaceModalOld.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import React, { useCallback, useState } from "react";
import { Checkbox, Input, Modal, Radio, Tag } from "antd";
import { Checkbox, Input, Modal, Radio } from "antd";
import { useDispatch, useSelector } from "react-redux";
import * as Sentry from "@sentry/react";

import { getAppMode } from "store/selectors";
import { RQButton } from "lib/design-system-v2/components";
import { CreateTeamParams, LocalWorkspaceConfig, SharedOrPrivateWorkspaceConfig } from "types";
import { displayFolderSelector } from "components/mode-specific/desktop/misc/FileDialogButton";
import { CONSTANTS as GLOBAL_CONSTANTS } from "@requestly/requestly-core";
import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
import { CreateTeamParams, SharedOrPrivateWorkspaceConfig } from "types";
import { getFunctions, httpsCallable } from "firebase/functions";
import {
trackAddTeamMemberSuccess,
Expand All @@ -24,10 +21,8 @@ import { switchWorkspace } from "actions/TeamWorkspaceActions";
import { redirectToTeam } from "utils/RedirectionUtils";
import { useNavigate } from "react-router-dom";
import { getAvailableBillingTeams } from "store/features/billing/selectors";
import { createWorkspaceFolder } from "services/fsManagerServiceAdapter";
import { isActiveWorkspaceShared } from "store/slices/workspaces/selectors";
import { workspaceActions } from "store/slices/workspaces/slice";
import { Workspace, WorkspaceMemberRole, WorkspaceType } from "features/workspaces/types";
import { WorkspaceType } from "features/workspaces/types";
import "./createOldWorkspaceModal.scss";

interface Props {
Expand All @@ -45,17 +40,10 @@ export const CreateWorkspaceModalOld: React.FC<Props> = ({ isOpen, defaultWorksp
const isSharedWorkspaceMode = useSelector(isActiveWorkspaceShared);
const billingTeams = useSelector(getAvailableBillingTeams);
const [workspaceName, setWorkspaceName] = useState("");
const [workspaceType, setWorkspaceType] = useState(
defaultWorkspaceType || (user.loggedIn ? WorkspaceType.SHARED : WorkspaceType.LOCAL)
);
const [folderPath, setFolderPath] = useState("");
const [workspaceType, setWorkspaceType] = useState(defaultWorkspaceType || WorkspaceType.SHARED);
const [isLoading, setIsLoading] = useState(false);
const [isNotifyAllSelected, setIsNotifyAllSelected] = useState(false);

const folderSelectCallback = (path: string) => {
setFolderPath(path);
};

const handlePostTeamCreationStep = useCallback(
(teamId: string, newTeamName: string, hasMembersInSameDomain: boolean) => {
switchWorkspace(
Expand Down Expand Up @@ -138,43 +126,15 @@ export const CreateWorkspaceModalOld: React.FC<Props> = ({ isOpen, defaultWorksp
const createOrgTeamInvite = httpsCallable(functions, "invites-createOrganizationTeamInvite");
const upsertTeamCommonInvite = httpsCallable(functions, "invites-upsertTeamCommonInvite");

const config =
workspaceType === WorkspaceType.LOCAL
? ({ type: WorkspaceType.LOCAL, rootPath: folderPath } as LocalWorkspaceConfig)
: ({ type: WorkspaceType.SHARED } as SharedOrPrivateWorkspaceConfig);
const config = { type: WorkspaceType.SHARED } as SharedOrPrivateWorkspaceConfig;

try {
const teamId = await (async () => {
if (config.type === WorkspaceType.LOCAL) {
const workspaceCreationResult = await createWorkspaceFolder(workspaceName, config.rootPath);
if (workspaceCreationResult.type === "error") {
throw new Error(workspaceCreationResult.error.message);
}
const partialWorkspace = workspaceCreationResult.content;
const localWorkspace: Workspace = {
id: partialWorkspace.id,
name: partialWorkspace.name,
owner: user?.details?.profile?.uid,
accessCount: 1,
adminCount: 1,
members: {
[user?.details?.profile?.uid]: {
role: WorkspaceMemberRole.admin,
},
},
appsumo: null,
workspaceType: WorkspaceType.LOCAL,
rootPath: partialWorkspace.path,
};
dispatch(workspaceActions.upsertWorkspace(localWorkspace));
return partialWorkspace.id;
} else {
const response: any = await createTeam({
teamName: workspaceName,
config,
});
return response.data.teamId;
}
const response: any = await createTeam({
teamName: workspaceName,
config,
});
return response.data.teamId;
})();

trackNewTeamCreateSuccess(teamId, workspaceName, "create_workspace_modal", workspaceType);
Expand Down Expand Up @@ -216,16 +176,13 @@ export const CreateWorkspaceModalOld: React.FC<Props> = ({ isOpen, defaultWorksp
}, [
billingTeams,
callback,
dispatch,
isNotifyAllSelected,
toggleModal,
user?.details?.profile?.email,
workspaceName,
handlePostTeamCreationStep,
handleDomainInvitesCreation,
workspaceType,
folderPath,
user?.details?.profile?.uid,
]);

return (
Expand All @@ -245,7 +202,7 @@ export const CreateWorkspaceModalOld: React.FC<Props> = ({ isOpen, defaultWorksp
<RQButton onClick={toggleModal}>Cancel</RQButton>
<RQButton
type="primary"
disabled={!workspaceName.length || (workspaceType === WorkspaceType.LOCAL && !folderPath.length)}
disabled={!workspaceName.length}
loading={isLoading}
onClick={handleTeamWorkspaceCreation}
>
Expand Down Expand Up @@ -300,45 +257,6 @@ export const CreateWorkspaceModalOld: React.FC<Props> = ({ isOpen, defaultWorksp
</div>
),
},
{
value: WorkspaceType.LOCAL,
disabled: appMode !== GLOBAL_CONSTANTS.APP_MODES.DESKTOP,
label: (
<div className="workspace-type-content">
<div className="workspace-type-content_title">
Local workspace <Tag>BETA</Tag>
</div>
<div className="workspace-type-content_description">
In a Local Workspace, your files are stored on your device. Currently, only API client files are
supported.
</div>
{workspaceType === WorkspaceType.LOCAL ? (
<div className="folder-path-selector">
{folderPath.length ? (
<div className="selected-folder-container">
<div className="selected-folder-header">
<span>SELECTED LOCATION</span> <IoMdClose onClick={() => setFolderPath("")} />
</div>
<div className="selected-folder-path">{folderPath}</div>
</div>
) : (
<>
<RQButton
disabled={appMode !== GLOBAL_CONSTANTS.APP_MODES.DESKTOP}
block
type="primary"
onClick={() => displayFolderSelector(folderSelectCallback)}
>
Select a folder
</RQButton>
<div className="selector-description">A location to store your workspace data.</div>
</>
)}
</div>
) : null}
</div>
),
},
]}
></Radio.Group>
</div>
Expand Down
8 changes: 0 additions & 8 deletions ...rding/components/recommendations/components/recommendations/personaRecommendationData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { FeatureSection, FeatureReleaseTag } from "./types";
import { CONSTANTS as GLOBAL_CONSTANTS } from "@requestly/requestly-core";
import { FiVideo } from "@react-icons/all-files/fi/FiVideo";
import { IoDocumentTextOutline } from "@react-icons/all-files/io5/IoDocumentTextOutline";
import { ApiOutlined } from "@ant-design/icons";

const { RULE_TYPES } = GLOBAL_CONSTANTS;
const { RULE_TYPES_CONFIG } = APP_CONSTANTS;
Expand Down Expand Up @@ -76,13 +75,6 @@ export const personaRecommendationData: FeatureSection[] = [
subTitle: "Create mocks for your APIs",
link: PATHS.MOCK_SERVER_V2.ABSOLUTE,
},
{
id: "test_api_endpoints",
title: "Test API endpoints",
icon: () => <ApiOutlined />,
subTitle: "Test responses quickly using API Client",
link: PATHS.API_CLIENT.ABSOLUTE,
},
],
},
];
65 changes: 22 additions & 43 deletions app/src/features/onboarding/componentsV2/DesktopOnboardingModal/DesktopOnboardingModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,20 @@
import React, { useEffect, useState } from "react";
import { Button, Modal } from "antd";
import { useNavigate } from "react-router-dom";
import { WorkspaceCreationView } from "componentsV2/modals/CreateWorkspaceModal/components/WorkspaceCreationView";
import { AuthCard } from "./components/AuthCard/AuthCard";
import { WelcomeCard } from "./components/WelcomeCard/WelcomeCard";
import { useDispatch, useSelector } from "react-redux";
import { globalActions } from "store/slices/global/slice";
import { getUserAuthDetails } from "store/slices/global/user/selectors";
// import { IoMdArrowBack } from "@react-icons/all-files/io/IoMdArrowBack";
import { redirectToApiClient } from "utils/RedirectionUtils";
import "./desktopOnboardingModal.scss";
import { trackDesktopOnboardingStepSkipped, trackDesktopOnboardingViewed } from "./analytics";
import { OnboardingStep } from "./types";
import { WorkspaceType } from "features/workspaces/types";
import { WorkspaceCreationProvider } from "componentsV2/modals/CreateWorkspaceModal/context";

export const DesktopOnboardingCard = ({ children, className }: { children: React.ReactNode; className?: string }) => {
return <div className={`rq-desktop-onboarding-modal-content__card ${className}`}>{children}</div>;
};

export const DesktopOnboardingModal = () => {
const dispatch = useDispatch();
const navigate = useNavigate();
const user = useSelector(getUserAuthDetails);
const [onboardingStep, setOnboardingStep] = useState<OnboardingStep>(OnboardingStep.FEATURE_SELECTION);

Expand All @@ -42,43 +35,29 @@ export const DesktopOnboardingModal = () => {
wrapClassName="rq-desktop-onboarding-modal-wrapper"
className="rq-desktop-onboarding-modal"
>
<WorkspaceCreationProvider>
<div className="rq-desktop-onboarding-modal-content">
{onboardingStep === OnboardingStep.FEATURE_SELECTION ? (
<DesktopOnboardingCard className="welcome-card">
<WelcomeCard onFeatureClick={(step: OnboardingStep) => setOnboardingStep(step)} />
<div className="rq-desktop-onboarding-modal-content">
{onboardingStep === OnboardingStep.FEATURE_SELECTION ? (
<DesktopOnboardingCard className="welcome-card">
<WelcomeCard onFeatureClick={(step: OnboardingStep) => setOnboardingStep(step)} />
</DesktopOnboardingCard>
) : onboardingStep === OnboardingStep.AUTH ? (
<>
<DesktopOnboardingCard className="auth-card">
<AuthCard onBackClick={() => setOnboardingStep(OnboardingStep.FEATURE_SELECTION)} />
</DesktopOnboardingCard>
) : onboardingStep === OnboardingStep.FOLDER_SELECTION ? (
<DesktopOnboardingCard className="local-workspace-card">
<WorkspaceCreationView
workspaceType={WorkspaceType.LOCAL}
onCancel={() => setOnboardingStep(OnboardingStep.FEATURE_SELECTION)}
callback={() => {
dispatch(globalActions.updateIsOnboardingCompleted(true));
redirectToApiClient(navigate);
}}
analyticEventSource="desktop_onboarding_modal"
/>
</DesktopOnboardingCard>
) : onboardingStep === OnboardingStep.AUTH ? (
<>
<DesktopOnboardingCard className="auth-card">
<AuthCard onBackClick={() => setOnboardingStep(OnboardingStep.FEATURE_SELECTION)} />
</DesktopOnboardingCard>
<Button
type="link"
className="skip-desktop-onboarding"
onClick={() => {
trackDesktopOnboardingStepSkipped(OnboardingStep.AUTH);
dispatch(globalActions.updateIsOnboardingCompleted(true));
}}
>
Continue without sign in
</Button>
</>
) : null}
</div>
</WorkspaceCreationProvider>
<Button
type="link"
className="skip-desktop-onboarding"
onClick={() => {
trackDesktopOnboardingStepSkipped(OnboardingStep.AUTH);
dispatch(globalActions.updateIsOnboardingCompleted(true));
}}
>
Continue without sign in
</Button>
</>
) : null}
</div>
</Modal>
);
};
Loading