feat: added codegen tab in the sidebar (#4099)

packages/hoppscotch-common/locales/en.json

@@ -175,7 +175,7 @@
     "different_parent": "Cannot reorder collection with different parent",
     "edit": "Edit Collection",
     "import_or_create": "Import or create a collection",
-    "import_collection":"Import Collection",
+    "import_collection": "Import Collection",
     "invalid_name": "Please provide a name for the collection",
     "invalid_root_move": "Collection already in the root",
     "moved": "Moved Successfully",
@@ -858,7 +858,7 @@
       "switch_to_personal": "Switch to your personal workspace",
       "title": "Workspaces"
     },
-    "phrases":{
+    "phrases": {
       "try": "Try",
       "import_collections": "Import collections",
       "create_environment": "Create environment",
@@ -941,6 +941,8 @@
     "query": "Query",
     "schema": "Schema",
     "shared_requests": "Shared Requests",
+    "codegen": "Generate Code",
+    "code_snippet": "Code snippet",
     "share_tab_request": "Share tab request",
     "socketio": "Socket.IO",
     "sse": "SSE",

packages/hoppscotch-common/src/components.d.ts

@@ -7,152 +7,149 @@ export {}
 
 declare module "@vue/runtime-core" {
   export interface GlobalComponents {
-    AccessTokens: (typeof import("./components/accessTokens/index.vue"))["default"]
+    AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
-    AccessTokensGenerate: (typeof import("./components/accessTokens/Generate.vue"))["default"]
+    AppBanner: typeof import('./components/app/Banner.vue')['default']
-    AccessTokensGenerateModal: (typeof import("./components/accessTokens/GenerateModal.vue"))["default"]
+    AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default']
-    AccessTokensList: (typeof import("./components/accessTokens/List.vue"))["default"]
+    AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
-    AccessTokensOverview: (typeof import("./components/accessTokens/Overview.vue"))["default"]
+    AppFooter: typeof import('./components/app/Footer.vue')['default']
-    AppActionHandler: (typeof import("./components/app/ActionHandler.vue"))["default"]
+    AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
-    AppBanner: (typeof import("./components/app/Banner.vue"))["default"]
+    AppHeader: typeof import('./components/app/Header.vue')['default']
-    AppContextMenu: (typeof import("./components/app/ContextMenu.vue"))["default"]
+    AppInspection: typeof import('./components/app/Inspection.vue')['default']
-    AppDeveloperOptions: (typeof import("./components/app/DeveloperOptions.vue"))["default"]
+    AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
-    AppFooter: (typeof import("./components/app/Footer.vue"))["default"]
+    AppLogo: typeof import('./components/app/Logo.vue')['default']
-    AppGitHubStarButton: (typeof import("./components/app/GitHubStarButton.vue"))["default"]
+    AppOptions: typeof import('./components/app/Options.vue')['default']
-    AppHeader: (typeof import("./components/app/Header.vue"))["default"]
+    AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
-    AppInspection: (typeof import("./components/app/Inspection.vue"))["default"]
+    AppShare: typeof import('./components/app/Share.vue')['default']
-    AppInterceptor: (typeof import("./components/app/Interceptor.vue"))["default"]
+    AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
-    AppLogo: (typeof import("./components/app/Logo.vue"))["default"]
+    AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
-    AppOptions: (typeof import("./components/app/Options.vue"))["default"]
+    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
-    AppPaneLayout: (typeof import("./components/app/PaneLayout.vue"))["default"]
+    AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
-    AppShare: (typeof import("./components/app/Share.vue"))["default"]
+    AppSpotlight: typeof import('./components/app/spotlight/index.vue')['default']
-    AppShortcuts: (typeof import("./components/app/Shortcuts.vue"))["default"]
+    AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default']
-    AppShortcutsEntry: (typeof import("./components/app/ShortcutsEntry.vue"))["default"]
+    AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default']
-    AppShortcutsPrompt: (typeof import("./components/app/ShortcutsPrompt.vue"))["default"]
+    AppSpotlightEntryGQLRequest: typeof import('./components/app/spotlight/entry/GQLRequest.vue')['default']
-    AppSidenav: (typeof import("./components/app/Sidenav.vue"))["default"]
+    AppSpotlightEntryIconSelected: typeof import('./components/app/spotlight/entry/IconSelected.vue')['default']
-    AppSpotlight: (typeof import("./components/app/spotlight/index.vue"))["default"]
+    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
-    AppSpotlightEntry: (typeof import("./components/app/spotlight/Entry.vue"))["default"]
+    AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.vue')['default']
-    AppSpotlightEntryGQLHistory: (typeof import("./components/app/spotlight/entry/GQLHistory.vue"))["default"]
+    AppSpotlightEntryRESTTeamRequestEntry: typeof import('./components/app/spotlight/entry/RESTTeamRequestEntry.vue')['default']
-    AppSpotlightEntryGQLRequest: (typeof import("./components/app/spotlight/entry/GQLRequest.vue"))["default"]
+    AppSpotlightSearch: typeof import('./components/app/SpotlightSearch.vue')['default']
-    AppSpotlightEntryIconSelected: (typeof import("./components/app/spotlight/entry/IconSelected.vue"))["default"]
+    AppSupport: typeof import('./components/app/Support.vue')['default']
-    AppSpotlightEntryRESTHistory: (typeof import("./components/app/spotlight/entry/RESTHistory.vue"))["default"]
+    Collections: typeof import('./components/collections/index.vue')['default']
-    AppSpotlightEntryRESTRequest: (typeof import("./components/app/spotlight/entry/RESTRequest.vue"))["default"]
+    CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
-    AppSpotlightEntryRESTTeamRequestEntry: (typeof import("./components/app/spotlight/entry/RESTTeamRequestEntry.vue"))["default"]
+    CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']
-    AppSpotlightSearch: (typeof import("./components/app/SpotlightSearch.vue"))["default"]
+    CollectionsAddRequest: typeof import('./components/collections/AddRequest.vue')['default']
-    AppSupport: (typeof import("./components/app/Support.vue"))["default"]
+    CollectionsCollection: typeof import('./components/collections/Collection.vue')['default']
-    Collections: (typeof import("./components/collections/index.vue"))["default"]
+    CollectionsEdit: typeof import('./components/collections/Edit.vue')['default']
-    CollectionsAdd: (typeof import("./components/collections/Add.vue"))["default"]
+    CollectionsEditFolder: typeof import('./components/collections/EditFolder.vue')['default']
-    CollectionsAddFolder: (typeof import("./components/collections/AddFolder.vue"))["default"]
+    CollectionsEditRequest: typeof import('./components/collections/EditRequest.vue')['default']
-    CollectionsAddRequest: (typeof import("./components/collections/AddRequest.vue"))["default"]
+    CollectionsGraphql: typeof import('./components/collections/graphql/index.vue')['default']
-    CollectionsCollection: (typeof import("./components/collections/Collection.vue"))["default"]
+    CollectionsGraphqlAdd: typeof import('./components/collections/graphql/Add.vue')['default']
-    CollectionsEdit: (typeof import("./components/collections/Edit.vue"))["default"]
+    CollectionsGraphqlAddFolder: typeof import('./components/collections/graphql/AddFolder.vue')['default']
-    CollectionsEditFolder: (typeof import("./components/collections/EditFolder.vue"))["default"]
+    CollectionsGraphqlAddRequest: typeof import('./components/collections/graphql/AddRequest.vue')['default']
-    CollectionsEditRequest: (typeof import("./components/collections/EditRequest.vue"))["default"]
+    CollectionsGraphqlCollection: typeof import('./components/collections/graphql/Collection.vue')['default']
-    CollectionsGraphql: (typeof import("./components/collections/graphql/index.vue"))["default"]
+    CollectionsGraphqlEdit: typeof import('./components/collections/graphql/Edit.vue')['default']
-    CollectionsGraphqlAdd: (typeof import("./components/collections/graphql/Add.vue"))["default"]
+    CollectionsGraphqlEditFolder: typeof import('./components/collections/graphql/EditFolder.vue')['default']
-    CollectionsGraphqlAddFolder: (typeof import("./components/collections/graphql/AddFolder.vue"))["default"]
+    CollectionsGraphqlEditRequest: typeof import('./components/collections/graphql/EditRequest.vue')['default']
-    CollectionsGraphqlAddRequest: (typeof import("./components/collections/graphql/AddRequest.vue"))["default"]
+    CollectionsGraphqlFolder: typeof import('./components/collections/graphql/Folder.vue')['default']
-    CollectionsGraphqlCollection: (typeof import("./components/collections/graphql/Collection.vue"))["default"]
+    CollectionsGraphqlImportExport: typeof import('./components/collections/graphql/ImportExport.vue')['default']
-    CollectionsGraphqlEdit: (typeof import("./components/collections/graphql/Edit.vue"))["default"]
+    CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
-    CollectionsGraphqlEditFolder: (typeof import("./components/collections/graphql/EditFolder.vue"))["default"]
+    CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
-    CollectionsGraphqlEditRequest: (typeof import("./components/collections/graphql/EditRequest.vue"))["default"]
+    CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
-    CollectionsGraphqlFolder: (typeof import("./components/collections/graphql/Folder.vue"))["default"]
+    CollectionsProperties: typeof import('./components/collections/Properties.vue')['default']
-    CollectionsGraphqlImportExport: (typeof import("./components/collections/graphql/ImportExport.vue"))["default"]
+    CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
-    CollectionsGraphqlRequest: (typeof import("./components/collections/graphql/Request.vue"))["default"]
+    CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
-    CollectionsImportExport: (typeof import("./components/collections/ImportExport.vue"))["default"]
+    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
-    CollectionsMyCollections: (typeof import("./components/collections/MyCollections.vue"))["default"]
+    CookiesAllModal: typeof import('./components/cookies/AllModal.vue')['default']
-    CollectionsProperties: (typeof import("./components/collections/Properties.vue"))["default"]
+    CookiesEditCookie: typeof import('./components/cookies/EditCookie.vue')['default']
-    CollectionsRequest: (typeof import("./components/collections/Request.vue"))["default"]
+    Embeds: typeof import('./components/embeds/index.vue')['default']
-    CollectionsSaveRequest: (typeof import("./components/collections/SaveRequest.vue"))["default"]
+    Environments: typeof import('./components/environments/index.vue')['default']
-    CollectionsTeamCollections: (typeof import("./components/collections/TeamCollections.vue"))["default"]
+    EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default']
-    CookiesAllModal: (typeof import("./components/cookies/AllModal.vue"))["default"]
+    EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
-    CookiesEditCookie: (typeof import("./components/cookies/EditCookie.vue"))["default"]
+    EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
-    Embeds: (typeof import("./components/embeds/index.vue"))["default"]
+    EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
-    Environments: (typeof import("./components/environments/index.vue"))["default"]
+    EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
-    EnvironmentsAdd: (typeof import("./components/environments/Add.vue"))["default"]
+    EnvironmentsSelector: typeof import('./components/environments/Selector.vue')['default']
-    EnvironmentsImportExport: (typeof import("./components/environments/ImportExport.vue"))["default"]
+    EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
-    EnvironmentsMy: (typeof import("./components/environments/my/index.vue"))["default"]
+    EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
-    EnvironmentsMyDetails: (typeof import("./components/environments/my/Details.vue"))["default"]
+    EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
-    EnvironmentsMyEnvironment: (typeof import("./components/environments/my/Environment.vue"))["default"]
+    FirebaseLogin: typeof import('./components/firebase/Login.vue')['default']
-    EnvironmentsSelector: (typeof import("./components/environments/Selector.vue"))["default"]
+    FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default']
-    EnvironmentsTeams: (typeof import("./components/environments/teams/index.vue"))["default"]
+    GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default']
-    EnvironmentsTeamsDetails: (typeof import("./components/environments/teams/Details.vue"))["default"]
+    GraphqlField: typeof import('./components/graphql/Field.vue')['default']
-    EnvironmentsTeamsEnvironment: (typeof import("./components/environments/teams/Environment.vue"))["default"]
+    GraphqlHeaders: typeof import('./components/graphql/Headers.vue')['default']
-    FirebaseLogin: (typeof import("./components/firebase/Login.vue"))["default"]
+    GraphqlQuery: typeof import('./components/graphql/Query.vue')['default']
-    FirebaseLogout: (typeof import("./components/firebase/Logout.vue"))["default"]
+    GraphqlRequest: typeof import('./components/graphql/Request.vue')['default']
-    GraphqlAuthorization: (typeof import("./components/graphql/Authorization.vue"))["default"]
+    GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default']
-    GraphqlField: (typeof import("./components/graphql/Field.vue"))["default"]
+    GraphqlRequestTab: typeof import('./components/graphql/RequestTab.vue')['default']
-    GraphqlHeaders: (typeof import("./components/graphql/Headers.vue"))["default"]
+    GraphqlResponse: typeof import('./components/graphql/Response.vue')['default']
-    GraphqlQuery: (typeof import("./components/graphql/Query.vue"))["default"]
+    GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default']
-    GraphqlRequest: (typeof import("./components/graphql/Request.vue"))["default"]
+    GraphqlSubscriptionLog: typeof import('./components/graphql/SubscriptionLog.vue')['default']
-    GraphqlRequestOptions: (typeof import("./components/graphql/RequestOptions.vue"))["default"]
+    GraphqlTabHead: typeof import('./components/graphql/TabHead.vue')['default']
-    GraphqlRequestTab: (typeof import("./components/graphql/RequestTab.vue"))["default"]
+    GraphqlType: typeof import('./components/graphql/Type.vue')['default']
-    GraphqlResponse: (typeof import("./components/graphql/Response.vue"))["default"]
+    GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default']
-    GraphqlSidebar: (typeof import("./components/graphql/Sidebar.vue"))["default"]
+    GraphqlVariable: typeof import('./components/graphql/Variable.vue')['default']
-    GraphqlSubscriptionLog: (typeof import("./components/graphql/SubscriptionLog.vue"))["default"]
+    History: typeof import('./components/history/index.vue')['default']
-    GraphqlTabHead: (typeof import("./components/graphql/TabHead.vue"))["default"]
+    HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
-    GraphqlType: (typeof import("./components/graphql/Type.vue"))["default"]
+    HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
-    GraphqlTypeLink: (typeof import("./components/graphql/TypeLink.vue"))["default"]
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    GraphqlVariable: (typeof import("./components/graphql/Variable.vue"))["default"]
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    History: (typeof import("./components/history/index.vue"))["default"]
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HistoryGraphqlCard: (typeof import("./components/history/graphql/Card.vue"))["default"]
+    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
-    HistoryRestCard: (typeof import("./components/history/rest/Card.vue"))["default"]
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppButtonPrimary: (typeof import("@hoppscotch/ui"))["HoppButtonPrimary"]
+    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
-    HoppButtonSecondary: (typeof import("@hoppscotch/ui"))["HoppButtonSecondary"]
+    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
-    HoppSmartAnchor: (typeof import("@hoppscotch/ui"))["HoppSmartAnchor"]
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
-    HoppSmartCheckbox: (typeof import("@hoppscotch/ui"))["HoppSmartCheckbox"]
+    HoppSmartIntersection: typeof import('@hoppscotch/ui')['HoppSmartIntersection']
-    HoppSmartConfirmModal: (typeof import("@hoppscotch/ui"))["HoppSmartConfirmModal"]
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartExpand: (typeof import("@hoppscotch/ui"))["HoppSmartExpand"]
+    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
-    HoppSmartFileChip: (typeof import("@hoppscotch/ui"))["HoppSmartFileChip"]
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartInput: (typeof import("@hoppscotch/ui"))["HoppSmartInput"]
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartIntersection: (typeof import("@hoppscotch/ui"))["HoppSmartIntersection"]
+    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
-    HoppSmartItem: (typeof import("@hoppscotch/ui"))["HoppSmartItem"]
+    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
-    HoppSmartLink: (typeof import("@hoppscotch/ui"))["HoppSmartLink"]
+    HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio']
-    HoppSmartModal: (typeof import("@hoppscotch/ui"))["HoppSmartModal"]
+    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
-    HoppSmartPicture: (typeof import("@hoppscotch/ui"))["HoppSmartPicture"]
+    HoppSmartSelectWrapper: typeof import('@hoppscotch/ui')['HoppSmartSelectWrapper']
-    HoppSmartPlaceholder: (typeof import("@hoppscotch/ui"))["HoppSmartPlaceholder"]
+    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
-    HoppSmartProgressRing: (typeof import("@hoppscotch/ui"))["HoppSmartProgressRing"]
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    HoppSmartRadio: (typeof import("@hoppscotch/ui"))["HoppSmartRadio"]
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
-    HoppSmartRadioGroup: (typeof import("@hoppscotch/ui"))["HoppSmartRadioGroup"]
+    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
-    HoppSmartSelectWrapper: (typeof import("@hoppscotch/ui"))["HoppSmartSelectWrapper"]
+    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
-    HoppSmartSlideOver: (typeof import("@hoppscotch/ui"))["HoppSmartSlideOver"]
+    HoppSmartTree: typeof import('@hoppscotch/ui')['HoppSmartTree']
-    HoppSmartSpinner: (typeof import("@hoppscotch/ui"))["HoppSmartSpinner"]
+    HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
-    HoppSmartTab: (typeof import("@hoppscotch/ui"))["HoppSmartTab"]
+    HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
-    HoppSmartTabs: (typeof import("@hoppscotch/ui"))["HoppSmartTabs"]
+    HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
-    HoppSmartToggle: (typeof import("@hoppscotch/ui"))["HoppSmartToggle"]
+    HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default']
-    HoppSmartTree: (typeof import("@hoppscotch/ui"))["HoppSmartTree"]
+    HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default']
-    HoppSmartWindow: (typeof import("@hoppscotch/ui"))["HoppSmartWindow"]
+    HttpBody: typeof import('./components/http/Body.vue')['default']
-    HoppSmartWindows: (typeof import("@hoppscotch/ui"))["HoppSmartWindows"]
+    HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
-    HttpAuthorization: (typeof import("./components/http/Authorization.vue"))["default"]
+    HttpCodegen: typeof import('./components/http/Codegen.vue')['default']
-    HttpAuthorizationApiKey: (typeof import("./components/http/authorization/ApiKey.vue"))["default"]
+    HttpCodegenBody: typeof import('./components/http/CodegenBody.vue')['default']
-    HttpAuthorizationBasic: (typeof import("./components/http/authorization/Basic.vue"))["default"]
+    HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default']
-    HttpBody: (typeof import("./components/http/Body.vue"))["default"]
+    HttpHeaders: typeof import('./components/http/Headers.vue')['default']
-    HttpBodyParameters: (typeof import("./components/http/BodyParameters.vue"))["default"]
+    HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default']
-    HttpCodegenModal: (typeof import("./components/http/CodegenModal.vue"))["default"]
+    HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default']
-    HttpHeaders: (typeof import("./components/http/Headers.vue"))["default"]
+    HttpParameters: typeof import('./components/http/Parameters.vue')['default']
-    HttpImportCurl: (typeof import("./components/http/ImportCurl.vue"))["default"]
+    HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default']
-    HttpOAuth2Authorization: (typeof import("./components/http/OAuth2Authorization.vue"))["default"]
+    HttpRawBody: typeof import('./components/http/RawBody.vue')['default']
-    HttpParameters: (typeof import("./components/http/Parameters.vue"))["default"]
+    HttpReqChangeConfirmModal: typeof import('./components/http/ReqChangeConfirmModal.vue')['default']
-    HttpPreRequestScript: (typeof import("./components/http/PreRequestScript.vue"))["default"]
+    HttpRequest: typeof import('./components/http/Request.vue')['default']
-    HttpRawBody: (typeof import("./components/http/RawBody.vue"))["default"]
+    HttpRequestOptions: typeof import('./components/http/RequestOptions.vue')['default']
-    HttpReqChangeConfirmModal: (typeof import("./components/http/ReqChangeConfirmModal.vue"))["default"]
+    HttpRequestTab: typeof import('./components/http/RequestTab.vue')['default']
-    HttpRequest: (typeof import("./components/http/Request.vue"))["default"]
+    HttpRequestVariables: typeof import('./components/http/RequestVariables.vue')['default']
-    HttpRequestOptions: (typeof import("./components/http/RequestOptions.vue"))["default"]
+    HttpResponse: typeof import('./components/http/Response.vue')['default']
-    HttpRequestTab: (typeof import("./components/http/RequestTab.vue"))["default"]
+    HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default']
-    HttpRequestVariables: (typeof import("./components/http/RequestVariables.vue"))["default"]
+    HttpSidebar: typeof import('./components/http/Sidebar.vue')['default']
-    HttpResponse: (typeof import("./components/http/Response.vue"))["default"]
+    HttpTabHead: typeof import('./components/http/TabHead.vue')['default']
-    HttpResponseMeta: (typeof import("./components/http/ResponseMeta.vue"))["default"]
+    HttpTestResult: typeof import('./components/http/TestResult.vue')['default']
-    HttpSidebar: (typeof import("./components/http/Sidebar.vue"))["default"]
+    HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default']
-    HttpTabHead: (typeof import("./components/http/TabHead.vue"))["default"]
+    HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default']
-    HttpTestResult: (typeof import("./components/http/TestResult.vue"))["default"]
+    HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
-    HttpTestResultEntry: (typeof import("./components/http/TestResultEntry.vue"))["default"]
+    HttpTests: typeof import('./components/http/Tests.vue')['default']
-    HttpTestResultEnv: (typeof import("./components/http/TestResultEnv.vue"))["default"]
+    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    HttpTestResultReport: (typeof import("./components/http/TestResultReport.vue"))["default"]
+    IconLucideActivity: typeof import('~icons/lucide/activity')['default']
-    HttpTests: (typeof import("./components/http/Tests.vue"))["default"]
+    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
-    HttpURLEncodedParams: (typeof import("./components/http/URLEncodedParams.vue"))["default"]
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideActivity: (typeof import("~icons/lucide/activity"))["default"]
+    IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
-    IconLucideAlertTriangle: (typeof import("~icons/lucide/alert-triangle"))["default"]
-    IconLucideArrowLeft: (typeof import("~icons/lucide/arrow-left"))["default"]
-    IconLucideArrowUpRight: (typeof import("~icons/lucide/arrow-up-right"))["default"]
     IconLucideBrush: (typeof import("~icons/lucide/brush"))["default"]
     IconLucideCheckCircle: (typeof import("~icons/lucide/check-circle"))["default"]
     IconLucideChevronRight: (typeof import("~icons/lucide/chevron-right"))["default"]

packages/hoppscotch-common/src/components/http/Codegen.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="flex flex-col">
+    <label for="requestType" class="px-4 pb-4" v-if="!hideLabel">
+      {{ t("request.choose_language") }}
+    </label>
+    <tippy
+      interactive
+      trigger="click"
+      theme="popover"
+      placement="bottom"
+      :on-shown="() => tippyActions.focus()"
+    >
+      <HoppSmartSelectWrapper>
+        <HoppButtonSecondary
+          :label="
+            CodegenDefinitions.find((x) => x.name === codegenType)!.caption
+          "
+          outline
+          class="flex-1 pr-8"
+        />
+      </HoppSmartSelectWrapper>
+      <template #content="{ hide }">
+        <div class="flex flex-col space-y-2">
+          <div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">
+            <input
+              v-model="searchQuery"
+              type="search"
+              autocomplete="off"
+              class="input flex w-full !bg-primaryContrast p-4 py-2"
+              :placeholder="`${t('action.search')}`"
+            />
+          </div>
+          <div
+            ref="tippyActions"
+            class="flex flex-col focus:outline-none"
+            tabindex="0"
+            @keyup.escape="hide()"
+          >
+            <HoppSmartItem
+              v-for="codegen in filteredCodegenDefinitions"
+              :key="codegen.name"
+              :label="codegen.caption"
+              :info-icon="codegen.name === codegenType ? IconCheck : undefined"
+              :active-info-icon="codegen.name === codegenType"
+              @click="
+                () => {
+                  codegenType = codegen.name
+                  hide()
+                }
+              "
+            />
+            <HoppSmartPlaceholder
+              v-if="filteredCodegenDefinitions.length === 0"
+              :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
+            >
+              <template #icon>
+                <icon-lucide-search class="svg-icons opacity-75" />
+              </template>
+            </HoppSmartPlaceholder>
+          </div>
+        </div>
+      </template>
+    </tippy>
+    <div
+      v-if="errorState"
+      class="mt-4 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
+    >
+      {{ t("error.something_went_wrong") }}
+    </div>
+    <div
+      v-else-if="codegenType"
+      class="mt-4 rounded border border-dividerLight"
+    >
+      <div class="flex items-center justify-between pl-4">
+        <label class="truncate font-semibold text-secondaryLight">
+          {{ t("request.generated_code") }}
+        </label>
+        <div class="flex items-center">
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('state.linewrap')"
+            :class="{ '!text-accent': WRAP_LINES }"
+            :icon="IconWrapText"
+            @click.prevent="toggleNestedSetting('WRAP_LINES', 'codeGen')"
+          />
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
+            :title="t('action.download_file')"
+            :icon="downloadIcon"
+            @click="downloadResponse"
+          />
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
+            :title="t('action.copy')"
+            :icon="copyIcon"
+            @click="copyResponse"
+          />
+        </div>
+      </div>
+      <div
+        ref="generatedCode"
+        class="rounded-b border-t border-dividerLight"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCodemirror } from "@composables/codemirror"
+import { useI18n } from "@composables/i18n"
+import { Environment, makeRESTRequest } from "@hoppscotch/data"
+import * as O from "fp-ts/Option"
+import { computed, reactive, ref } from "vue"
+import {
+  useCopyResponse,
+  useDownloadResponse,
+} from "~/composables/lens-actions"
+import {
+  CodegenDefinitions,
+  CodegenName,
+  generateCode,
+} from "~/helpers/new-codegen"
+import {
+  getEffectiveRESTRequest,
+  resolvesEnvsInBody,
+} from "~/helpers/utils/EffectiveURL"
+import { getAggregateEnvs } from "~/newstore/environments"
+
+import { useService } from "dioc/vue"
+import cloneDeep from "lodash-es/cloneDeep"
+import { onMounted } from "vue"
+import { useNestedSetting } from "~/composables/settings"
+import { toggleNestedSetting } from "~/newstore/settings"
+import { platform } from "~/platform"
+import { RESTTabService } from "~/services/tab/rest"
+import IconCheck from "~icons/lucide/check"
+import IconWrapText from "~icons/lucide/wrap-text"
+
+const t = useI18n()
+
+const tabs = useService(RESTTabService)
+const request = computed(() =>
+  cloneDeep(tabs.currentActiveTab.value.document.request)
+)
+const codegenType = ref<CodegenName>("shell-curl")
+const errorState = ref(false)
+
+defineProps({
+  hideLabel: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (e: "request-code", value: string): void
+}>()
+
+const requestCode = computed(() => {
+  const aggregateEnvs = getAggregateEnvs()
+  const requestVariables = request.value.requestVariables.map(
+    (requestVariable) => {
+      if (requestVariable.active)
+        return {
+          key: requestVariable.key,
+          value: requestVariable.value,
+          secret: false,
+        }
+      return {}
+    }
+  )
+  const env: Environment = {
+    v: 1,
+    id: "env",
+    name: "Env",
+    variables: [
+      ...(requestVariables as Environment["variables"]),
+      ...aggregateEnvs,
+    ],
+  }
+  const effectiveRequest = getEffectiveRESTRequest(request.value, env)
+
+  const result = generateCode(
+    codegenType.value,
+    makeRESTRequest({
+      ...effectiveRequest,
+      body: resolvesEnvsInBody(effectiveRequest.body, env),
+      headers: effectiveRequest.effectiveFinalHeaders.map((header) => ({
+        ...header,
+        active: true,
+      })),
+      params: effectiveRequest.effectiveFinalParams.map((param) => ({
+        ...param,
+        active: true,
+      })),
+      endpoint: effectiveRequest.effectiveFinalURL,
+      requestVariables: effectiveRequest.effectiveFinalRequestVariables.map(
+        (requestVariable) => ({
+          ...requestVariable,
+          active: true,
+        })
+      ),
+    })
+  )
+
+  if (O.isSome(result)) {
+    errorState.value = false
+    emit("request-code", result.value)
+    return result.value
+  }
+  errorState.value = true
+  return ""
+})
+
+// Template refs
+const tippyActions = ref<any | null>(null)
+const generatedCode = ref<any | null>(null)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "codeGen")
+
+useCodemirror(
+  generatedCode,
+  requestCode,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/plain",
+      readOnly: true,
+      lineWrapping: WRAP_LINES,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)
+
+onMounted(() => {
+  platform.analytics?.logEvent({
+    type: "HOPP_REST_CODEGEN_OPENED",
+  })
+})
+
+const searchQuery = ref("")
+
+const filteredCodegenDefinitions = computed(() => {
+  return CodegenDefinitions.filter((obj) =>
+    Object.values(obj).some((val) =>
+      val.toLowerCase().includes(searchQuery.value.toLowerCase())
+    )
+  )
+})
+
+const { copyIcon, copyResponse } = useCopyResponse(requestCode)
+const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
+</script>

packages/hoppscotch-common/src/components/http/CodegenModal.vue

@@ -6,110 +6,7 @@
     @close="hideModal"
   >
     <template #body>
-      <div class="flex flex-col">
+      <HttpCodegen @request-code="requestCode = $event" />
-        <label for="requestType" class="px-4 pb-4">
-          {{ t("request.choose_language") }}
-        </label>
-        <tippy
-          interactive
-          trigger="click"
-          theme="popover"
-          placement="bottom"
-          :on-shown="() => tippyActions.focus()"
-        >
-          <HoppSmartSelectWrapper>
-            <HoppButtonSecondary
-              :label="
-                CodegenDefinitions.find((x) => x.name === codegenType)!.caption
-              "
-              outline
-              class="flex-1 pr-8"
-            />
-          </HoppSmartSelectWrapper>
-          <template #content="{ hide }">
-            <div class="flex flex-col space-y-2">
-              <div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">
-                <input
-                  v-model="searchQuery"
-                  type="search"
-                  autocomplete="off"
-                  class="input flex w-full !bg-primaryContrast p-4 py-2"
-                  :placeholder="`${t('action.search')}`"
-                />
-              </div>
-              <div
-                ref="tippyActions"
-                class="flex flex-col focus:outline-none"
-                tabindex="0"
-                @keyup.escape="hide()"
-              >
-                <HoppSmartItem
-                  v-for="codegen in filteredCodegenDefinitions"
-                  :key="codegen.name"
-                  :label="codegen.caption"
-                  :info-icon="codegen.name === codegenType ? IconCheck : null"
-                  :active-info-icon="codegen.name === codegenType"
-                  @click="
-                    () => {
-                      codegenType = codegen.name
-                      hide()
-                    }
-                  "
-                />
-                <HoppSmartPlaceholder
-                  v-if="filteredCodegenDefinitions.length === 0"
-                  :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
-                >
-                  <template #icon>
-                    <icon-lucide-search class="svg-icons opacity-75" />
-                  </template>
-                </HoppSmartPlaceholder>
-              </div>
-            </div>
-          </template>
-        </tippy>
-        <div
-          v-if="errorState"
-          class="mt-4 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
-        >
-          {{ t("error.something_went_wrong") }}
-        </div>
-        <div
-          v-else-if="codegenType"
-          class="mt-4 rounded border border-dividerLight"
-        >
-          <div class="flex items-center justify-between pl-4">
-            <label class="truncate font-semibold text-secondaryLight">
-              {{ t("request.generated_code") }}
-            </label>
-            <div class="flex items-center">
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('state.linewrap')"
-                :class="{ '!text-accent': WRAP_LINES }"
-                :icon="IconWrapText"
-                @click.prevent="toggleNestedSetting('WRAP_LINES', 'codeGen')"
-              />
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip', allowHTML: true }"
-                :title="t('action.download_file')"
-                :icon="downloadIcon"
-                @click="downloadResponse"
-              />
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip', allowHTML: true }"
-                :title="t('action.copy')"
-                :icon="copyIcon"
-                @click="copyResponse"
-              />
-            </div>
-          </div>
-          <div
-            ref="generatedCode"
-            class="rounded-b border-t border-dividerLight"
-          ></div>
-        </div>
-      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -131,38 +28,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from "vue"
-import * as O from "fp-ts/Option"
-import { Environment, makeRESTRequest } from "@hoppscotch/data"
-import { refAutoReset } from "@vueuse/core"
-import { useCodemirror } from "@composables/codemirror"
-import { copyToClipboard } from "~/helpers/utils/clipboard"
-import {
-  getEffectiveRESTRequest,
-  resolvesEnvsInBody,
-} from "~/helpers/utils/EffectiveURL"
-import { getAggregateEnvs } from "~/newstore/environments"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import {
+import { refAutoReset } from "@vueuse/core"
-  CodegenDefinitions,
+import { ref, watch } from "vue"
-  CodegenName,
+import { copyToClipboard } from "~/helpers/utils/clipboard"
-  generateCode,
-} from "~/helpers/new-codegen"
-import {
-  useCopyResponse,
-  useDownloadResponse,
-} from "~/composables/lens-actions"
 
-import IconCopy from "~icons/lucide/copy"
-import IconCheck from "~icons/lucide/check"
-import IconWrapText from "~icons/lucide/wrap-text"
-import cloneDeep from "lodash-es/cloneDeep"
 import { platform } from "~/platform"
-import { RESTTabService } from "~/services/tab/rest"
+import IconCheck from "~icons/lucide/check"
-import { useService } from "dioc/vue"
+import IconCopy from "~icons/lucide/copy"
-import { useNestedSetting } from "~/composables/settings"
-import { toggleNestedSetting } from "~/newstore/settings"
 
 const t = useI18n()
 
@@ -176,99 +50,17 @@ const emit = defineEmits<{
 
 const toast = useToast()
 
-const tabs = useService(RESTTabService)
-const request = ref(cloneDeep(tabs.currentActiveTab.value.document.request))
-const codegenType = ref<CodegenName>("shell-curl")
-const errorState = ref(false)
-
 const copyCodeIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
   IconCopy,
   1000
 )
 
-const requestCode = computed(() => {
+const requestCode = ref<string>("")
-  const aggregateEnvs = getAggregateEnvs()
-  const requestVariables = request.value.requestVariables.map(
-    (requestVariable) => {
-      if (requestVariable.active)
-        return {
-          key: requestVariable.key,
-          value: requestVariable.value,
-          secret: false,
-        }
-      return {}
-    }
-  )
-  const env: Environment = {
-    v: 1,
-    id: "env",
-    name: "Env",
-    variables: [
-      ...(requestVariables as Environment["variables"]),
-      ...aggregateEnvs,
-    ],
-  }
-  const effectiveRequest = getEffectiveRESTRequest(request.value, env)
-
-  if (!props.show) return ""
-
-  const result = generateCode(
-    codegenType.value,
-    makeRESTRequest({
-      ...effectiveRequest,
-      body: resolvesEnvsInBody(effectiveRequest.body, env),
-      headers: effectiveRequest.effectiveFinalHeaders.map((header) => ({
-        ...header,
-        active: true,
-      })),
-      params: effectiveRequest.effectiveFinalParams.map((param) => ({
-        ...param,
-        active: true,
-      })),
-      endpoint: effectiveRequest.effectiveFinalURL,
-      requestVariables: effectiveRequest.effectiveFinalRequestVariables.map(
-        (requestVariable) => ({
-          ...requestVariable,
-          active: true,
-        })
-      ),
-    })
-  )
-
-  if (O.isSome(result)) {
-    errorState.value = false
-    return result.value
-  }
-  errorState.value = true
-  return ""
-})
-
-// Template refs
-const tippyActions = ref<any | null>(null)
-const generatedCode = ref<any | null>(null)
-const WRAP_LINES = useNestedSetting("WRAP_LINES", "codeGen")
-
-useCodemirror(
-  generatedCode,
-  requestCode,
-  reactive({
-    extendedEditorConfig: {
-      mode: "text/plain",
-      readOnly: true,
-      lineWrapping: WRAP_LINES,
-    },
-    linter: null,
-    completer: null,
-    environmentHighlights: false,
-  })
-)
 
 watch(
   () => props.show,
   (goingToShow) => {
     if (goingToShow) {
-      request.value = cloneDeep(tabs.currentActiveTab.value.document.request)
-
       platform.analytics?.logEvent({
         type: "HOPP_REST_CODEGEN_OPENED",
       })
@@ -283,17 +75,4 @@ const copyRequestCode = () => {
   copyCodeIcon.value = IconCheck
   toast.success(`${t("state.copied_to_clipboard")}`)
 }
-
-const searchQuery = ref("")
-
-const filteredCodegenDefinitions = computed(() => {
-  return CodegenDefinitions.filter((obj) =>
-    Object.values(obj).some((val) =>
-      val.toLowerCase().includes(searchQuery.value.toLowerCase())
-    )
-  )
-})
-
-const { copyIcon, copyResponse } = useCopyResponse(requestCode)
-const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
 </script>

packages/hoppscotch-common/src/components/http/Sidebar.vue

@@ -33,6 +33,24 @@
     >
       <Share />
     </HoppSmartTab>
+    <HoppSmartTab
+      :id="'codegen'"
+      :icon="IconCode"
+      :label="`${t('tab.codegen')}`"
+    >
+      <div
+        class="flex items-center overflow-x-auto whitespace-nowrap border-b border-dividerLight px-4 py-2 text-tiny text-secondaryLight"
+      >
+        <span class="truncate"> {{ t("request.title") }} </span>
+        <icon-lucide-chevron-right class="mx-2" />
+        {{ t("tab.code_snippet") }}
+      </div>
+      <HttpCodegen
+        :hide-label="true"
+        class="px-4 mt-4"
+        v-if="selectedNavigationTab === 'codegen'"
+      />
+    </HoppSmartTab>
   </HoppSmartTabs>
 </template>
 
@@ -41,12 +59,18 @@ import IconClock from "~icons/lucide/clock"
 import IconLayers from "~icons/lucide/layers"
 import IconFolder from "~icons/lucide/folder"
 import IconShare2 from "~icons/lucide/share-2"
+import IconCode from "~icons/lucide/code"
 import { ref } from "vue"
 import { useI18n } from "@composables/i18n"
 
 const t = useI18n()
 
-type RequestOptionTabs = "history" | "collections" | "env"
+type RequestOptionTabs =
+  | "history"
+  | "collections"
+  | "env"
+  | "share-request"
+  | "codegen"
 
 const selectedNavigationTab = ref<RequestOptionTabs>("collections")
 </script>