fix: fallback section for embeds if invalid link (#3673)

* feat: added validation on infra config update

* chore: removed async keyword

* fix: feedback

packages/hoppscotch-backend/src/errors.ts

@@ -676,9 +676,16 @@ export const INFRA_CONFIG_RESET_FAILED = 'infra_config/reset_failed' as const;
  */
 export const INFRA_CONFIG_INVALID_INPUT = 'infra_config/invalid_input' as const;
 
+/**
+ * Infra Config service (auth provider/mailer/audit logs) not configured
+ * (InfraConfigService)
+ */
+export const INFRA_CONFIG_SERVICE_NOT_CONFIGURED =
+  'infra_config/service_not_configured' as const;
+
 /**
  * Error message for when the database table does not exist
  * (InfraConfigService)
  */
 export const DATABASE_TABLE_NOT_EXIST =
-  'Database migration not performed. Please check the FAQ for assistance: https://docs.hoppscotch.io/support/getting-started/faq';
+  'Database migration not found. Please check the documentation for assistance: https://docs.hoppscotch.io/documentation/self-host/community-edition/install-and-build#running-migrations';

packages/hoppscotch-backend/src/infra-config/infra-config.service.ts

@@ -15,11 +15,13 @@ import {
   INFRA_CONFIG_NOT_LISTED,
   INFRA_CONFIG_RESET_FAILED,
   INFRA_CONFIG_UPDATE_FAILED,
+  INFRA_CONFIG_SERVICE_NOT_CONFIGURED,
 } from 'src/errors';
 import { throwErr, validateEmail, validateSMTPUrl } from 'src/utils';
 import { ConfigService } from '@nestjs/config';
 import { ServiceStatus, stopApp } from './helper';
 import { EnableAndDisableSSOArgs, InfraConfigArgs } from './input-args';
+import { AuthProvider } from 'src/auth/helper';
 
 @Injectable()
 export class InfraConfigService implements OnModuleInit {
@@ -124,7 +126,7 @@ export class InfraConfigService implements OnModuleInit {
   cast(dbInfraConfig: DBInfraConfig) {
     return <InfraConfig>{
       name: dbInfraConfig.name,
-      value: dbInfraConfig.value,
+      value: dbInfraConfig.value ?? '',
     };
   }
 
@@ -182,6 +184,38 @@ export class InfraConfigService implements OnModuleInit {
     }
   }
 
+  /**
+   * Check if the service is configured or not
+   * @param service Service can be Auth Provider, Mailer, Audit Log etc.
+   * @returns Either true or false
+   */
+  isServiceConfigured(service: AuthProvider) {
+    switch (service) {
+      case AuthProvider.GOOGLE:
+        return (
+          this.configService.get<string>('INFRA.GOOGLE_CLIENT_ID') &&
+          this.configService.get<string>('INFRA.GOOGLE_CLIENT_SECRET')
+        );
+      case AuthProvider.GITHUB:
+        return (
+          this.configService.get<string>('INFRA.GITHUB_CLIENT_ID') &&
+          !this.configService.get<string>('INFRA.GITHUB_CLIENT_SECRET')
+        );
+      case AuthProvider.MICROSOFT:
+        return (
+          this.configService.get<string>('INFRA.MICROSOFT_CLIENT_ID') &&
+          !this.configService.get<string>('INFRA.MICROSOFT_CLIENT_SECRET')
+        );
+      case AuthProvider.EMAIL:
+        return (
+          this.configService.get<string>('INFRA.MAILER_SMTP_URL') &&
+          this.configService.get<string>('INFRA.MAILER_ADDRESS_FROM')
+        );
+      default:
+        return false;
+    }
+  }
+
   /**
    * Enable or Disable SSO for login/signup
    * @param provider Auth Provider to enable or disable
@@ -195,15 +229,21 @@ export class InfraConfigService implements OnModuleInit {
 
     let updatedAuthProviders = allowedAuthProviders;
 
-    providerInfo.forEach(({ provider, status }) => {
+    for (let i = 0; i < providerInfo.length; i++) {
+      const { provider, status } = providerInfo[i];
+
       if (status === ServiceStatus.ENABLE) {
+        const isConfigured = this.isServiceConfigured(provider);
+        if (!isConfigured) {
+          throwErr(INFRA_CONFIG_SERVICE_NOT_CONFIGURED);
+        }
         updatedAuthProviders.push(provider);
       } else if (status === ServiceStatus.DISABLE) {
         updatedAuthProviders = updatedAuthProviders.filter(
           (p) => p !== provider,
         );
       }
-    });
+    }
 
     updatedAuthProviders = [...new Set(updatedAuthProviders)];
 
@@ -286,6 +326,9 @@ export class InfraConfigService implements OnModuleInit {
     }
   }
 
+  /**
+   * Validate the values of the InfraConfigs
+   */
   validateEnvValues(
     infraConfigs: {
       name: InfraConfigEnumForClient | InfraConfigEnum;
@@ -302,6 +345,24 @@ export class InfraConfigService implements OnModuleInit {
           const isValidEmail = validateEmail(infraConfigs[i].value);
           if (!isValidEmail) return E.left(INFRA_CONFIG_INVALID_INPUT);
           break;
+        case InfraConfigEnumForClient.GOOGLE_CLIENT_ID:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnumForClient.GOOGLE_CLIENT_SECRET:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnumForClient.GITHUB_CLIENT_ID:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnumForClient.GITHUB_CLIENT_SECRET:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnumForClient.MICROSOFT_CLIENT_ID:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
+        case InfraConfigEnumForClient.MICROSOFT_CLIENT_SECRET:
+          if (!infraConfigs[i].value) return E.left(INFRA_CONFIG_INVALID_INPUT);
+          break;
         default:
           break;
       }

packages/hoppscotch-common/locales/en.json

@@ -121,7 +121,7 @@
     "generate_token": "Generate Token",
     "graphql_headers": "Authorization Headers are sent as part of the payload to connection_init",
     "include_in_url": "Include in URL",
-    "inherited_from": "Inherited from {auth} from Parent Collection {collection} ",
+    "inherited_from": "Inherited {auth} from parent collection {collection} ",
     "learn": "Learn how",
     "oauth": {
       "redirect_auth_server_returned_error": "Auth Server returned an error state",
@@ -295,6 +295,7 @@
     "incorrect_email": "Incorrect email",
     "invalid_link": "Invalid link",
     "invalid_link_description": "The link you clicked is invalid or expired.",
+    "invalid_embed_link": "The embed does not exist or is invalid.",
     "json_parsing_failed": "Invalid JSON",
     "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
     "network_error": "There seems to be a network error. Please try again.",

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

@@ -1,11 +1,11 @@
-// generated by unplugin-vue-components
+/* eslint-disable */
-// We suggest you to commit this file into source control
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
     AppBanner: typeof import('./components/app/Banner.vue')['default']
@@ -210,5 +210,4 @@ declare module '@vue/runtime-core' {
     WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
     WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
   }
-
 }

packages/hoppscotch-common/src/components/app/PaneLayout.vue

@@ -1,15 +1,16 @@
 <template>
   <Splitpanes
-    class="smart-splitter"
     :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
     :class="{
       '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
+      'smart-splitter': SIDEBAR && hasSidebar,
+      'no-splitter': !(SIDEBAR && hasSidebar),
     }"
     :horizontal="!mdAndLarger"
     @resize="setPaneEvent($event, 'vertical')"
   >
     <Pane
-      :size="PANE_MAIN_SIZE"
+      :size="SIDEBAR && hasSidebar ? PANE_MAIN_SIZE : 100"
       min-size="65"
       class="flex flex-col !overflow-auto"
     >
@@ -36,9 +37,8 @@
       </Splitpanes>
     </Pane>
     <Pane
-      v-if="SIDEBAR && hasSidebar"
+      :size="SIDEBAR && hasSidebar ? PANE_SIDEBAR_SIZE : 0"
-      :size="PANE_SIDEBAR_SIZE"
+      :min-size="25"
-      min-size="25"
       class="flex flex-col !overflow-auto bg-primaryContrast"
     >
       <slot name="sidebar" />

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -140,7 +140,10 @@ const runQuery = async (
     const runVariables = clone(request.value.variables)
     const runAuth =
       request.value.auth.authType === "inherit" && request.value.auth.authActive
-        ? clone(tabs.currentActiveTab.value.document.inheritedProperties?.auth)
+        ? clone(
+            tabs.currentActiveTab.value.document.inheritedProperties?.auth
+              .inheritedAuth
+          )
         : clone(request.value.auth)
 
     const inheritedHeaders =

packages/hoppscotch-common/src/helpers/graphql/default.ts

@@ -27,7 +27,7 @@ export const getDefaultGQLRequest = (): HoppGQLRequest => ({
 }`,
   query: DEFAULT_QUERY,
   auth: {
-    authType: "inherit",
+    authType: "none",
     authActive: true,
   },
 })

packages/hoppscotch-common/src/newstore/collections.ts

@@ -4,6 +4,7 @@ import {
   HoppRESTRequest,
   HoppCollection,
   makeCollection,
+  HoppGQLAuth,
 } from "@hoppscotch/data"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import { cloneDeep } from "lodash-es"
@@ -11,6 +12,9 @@ import { resolveSaveContextOnRequestReorder } from "~/helpers/collection/request
 import { getService } from "~/modules/dioc"
 import { RESTTabService } from "~/services/tab/rest"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { HoppRESTAuth } from "@hoppscotch/data"
+import { HoppRESTHeaders } from "@hoppscotch/data"
+import { HoppGQLHeader } from "~/helpers/graphql"
 
 const defaultRESTCollectionState = {
   state: [
@@ -63,6 +67,12 @@ export function navigateToFolderWithIndexPath(
   return target !== undefined ? target : null
 }
 
+/**
+ * Used to obtain the inherited auth and headers for a given folder path, used for both REST and GraphQL
+ * @param folderPath the path of the folder to cascade the auth from
+ * @param type the type of collection
+ * @returns the inherited auth and headers for the given folder path
+ */
 export function cascadeParentCollectionForHeaderAuth(
   folderPath: string | undefined,
   type: "rest" | "graphql"
@@ -103,10 +113,16 @@ export function cascadeParentCollectionForHeaderAuth(
       return { auth, headers }
     }
 
-    const parentFolderAuth = parentFolder.auth
+    const parentFolderAuth = parentFolder.auth as HoppRESTAuth | HoppGQLAuth
-    const parentFolderHeaders = parentFolder.headers
+    const parentFolderHeaders = parentFolder.headers as
+      | HoppRESTHeaders
+      | HoppGQLHeader[]
+
     // check if the parent folder has authType 'inherit' and if it is the root folder
-    if (parentFolderAuth?.authType === "inherit" && path.length === 1) {
+    if (
+      parentFolderAuth?.authType === "inherit" &&
+      [...path.slice(0, i + 1)].length === 1
+    ) {
       auth = {
         parentID: [...path.slice(0, i + 1)].join("/"),
         parentName: parentFolder.name,

packages/hoppscotch-common/src/pages/e/_id.vue

@@ -1,7 +1,19 @@
 <template>
-  <div class="flex flex-col flex-1 w-full">
+  <div class="flex flex-col justify-center">
+    <div
+      v-if="invalidLink"
+      class="flex flex-1 flex-col items-center justify-center p-8"
+    >
+      <icon-lucide-alert-triangle class="svg-icons mb-2 opacity-75" />
+      <h1 class="heading text-center">
+        {{ t("error.invalid_link") }}
+      </h1>
+      <p class="mt-2 text-center">
+        {{ t("error.invalid_embed_link") }}
+      </p>
+    </div>
     <Embeds
-      v-if="tab"
+      v-else-if="!invalidLink && tab"
       v-model:modelTab="tab"
       :properties="properties"
       :shared-request-i-d="sharedRequestID"
@@ -28,6 +40,9 @@ import {
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
 import { applySetting } from "~/newstore/settings"
+import { useI18n } from "~/composables/i18n"
+
+const t = useI18n()
 
 const route = useRoute()
 

packages/hoppscotch-common/src/services/persistence/index.ts

@@ -244,9 +244,13 @@ export class PersistenceService extends Service {
   private setupSettingsPersistence() {
     const settingsKey = "settings"
     let settingsData = JSON.parse(
-      window.localStorage.getItem(settingsKey) || "{}"
+      window.localStorage.getItem(settingsKey) ?? "null"
     )
 
+    if (!settingsData) {
+      settingsData = getDefaultSettings()
+    }
+
     // Validate data read from localStorage
     const result = SETTINGS_SCHEMA.safeParse(settingsData)
     if (result.success) {

packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts

@@ -36,7 +36,7 @@ const SettingsDefSchema = z.object({
     httpUser: z.boolean(),
     httpPassword: z.boolean(),
     bearerToken: z.boolean(),
-    oauth2Token: z.boolean(),
+    oauth2Token: z.optional(z.boolean()),
   }),
   THEME_COLOR: ThemeColorSchema,
   BG_COLOR: BgColorSchema,
@@ -103,13 +103,10 @@ export const LOCAL_STATE_SCHEMA = z.union([
     .strict(),
 ])
 
-export const SETTINGS_SCHEMA = z.union([
+export const SETTINGS_SCHEMA = SettingsDefSchema.extend({
-  z.object({}).strict(),
-  SettingsDefSchema.extend({
   EXTENSIONS_ENABLED: z.optional(z.boolean()),
   PROXY_ENABLED: z.optional(z.boolean()),
-  }),
+})
-])
 
 export const REST_HISTORY_ENTRY_SCHEMA = z
   .object({
@@ -208,7 +205,7 @@ export const MQTT_REQUEST_SCHEMA = z.nullable(
   z
     .object({
       endpoint: z.string(),
-      clientID: z.string(),
+      clientID: z.optional(z.string()),
     })
     .strict()
 )

packages/hoppscotch-selfhost-web/postcss.config.cjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
+module.exports = config