[#3062] fix(web): Support special character like "//" and improve the…

… interceptors of axios (#3116)

<!--
1. Title: [#<issue>] <type>(<scope>): <subject>
   Examples:
     - "[#123] feat(operator): support xxx"
     - "[#233] fix: check null before access result in xxx"
     - "[MINOR] refactor: fix typo in variable name"
     - "[MINOR] docs: fix typo in README"
     - "[#255] test: fix flaky test NameOfTheTest"
   Reference: https://www.conventionalcommits.org/en/v1.0.0/
2. If the PR is unfinished, please mark this PR as draft.
-->

### What changes were proposed in this pull request?

1. Support special character like '//' for database name or table name
and so on.
<img width="852" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/9ae20ce1-3683-453a-a651-53a2277a8e25">

3. Improvment interceptors of axois for avoide repeat request
4. Fix some runtime errors

### Why are the changes needed?
N/A

Fix: #3062

### Does this PR introduce _any_ user-facing change?
N/A

### How was this patch tested?
Manual

web/src/lib/api/catalogs/index.js

@@ -6,11 +6,14 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake }) => `/api/metalakes/${metalake}/catalogs?details=true`,
-  GET_DETAIL: ({ metalake, catalog }) => `/api/metalakes/${metalake}/catalogs/${catalog}`,
-  CREATE: ({ metalake }) => `/api/metalakes/${metalake}/catalogs`,
-  UPDATE: ({ metalake, catalog }) => `/api/metalakes/${metalake}/catalogs/${catalog}`,
-  DELETE: ({ metalake, catalog }) => `/api/metalakes/${metalake}/catalogs/${catalog}`
+  GET: ({ metalake }) => `/api/metalakes/${encodeURIComponent(metalake)}/catalogs?details=true`,
+  GET_DETAIL: ({ metalake, catalog }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`,
+  CREATE: ({ metalake }) => `/api/metalakes/${encodeURIComponent(metalake)}/catalogs`,
+  UPDATE: ({ metalake, catalog }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`,
+  DELETE: ({ metalake, catalog }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`
 }
 
 export const getCatalogsApi = params => {

web/src/lib/api/filesets/index.js

@@ -6,9 +6,14 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/filesets`,
+  GET: ({ metalake, catalog, schema }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/filesets`,
   GET_DETAIL: ({ metalake, catalog, schema, fileset }) =>
-    `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/filesets/${fileset}`
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/filesets/${encodeURIComponent(fileset)}`
 }
 
 export const getFilesetsApi = params => {

web/src/lib/api/schemas/index.js

@@ -6,8 +6,12 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake, catalog }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas`,
-  GET_DETAIL: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}`
+  GET: ({ metalake, catalog }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}/schemas`,
+  GET_DETAIL: ({ metalake, catalog, schema }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}`
 }
 
 export const getSchemasApi = params => {

web/src/lib/api/tables/index.js

@@ -6,9 +6,14 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/tables`,
+  GET: ({ metalake, catalog, schema }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/tables`,
   GET_DETAIL: ({ metalake, catalog, schema, table }) =>
-    `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/tables/${table}`
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/tables/${encodeURIComponent(table)}`
 }
 
 export const getTablesApi = params => {

web/src/lib/api/topics/index.js

@@ -6,9 +6,14 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/topics`,
+  GET: ({ metalake, catalog, schema }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/topics`,
   GET_DETAIL: ({ metalake, catalog, schema, topic }) =>
-    `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/topics/${topic}`
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/topics/${encodeURIComponent(topic)}`
 }
 
 export const getTopicsApi = params => {

web/src/lib/provider/session.js

@@ -48,7 +48,7 @@ const AuthProvider = ({ children }) => {
   useEffect(() => {
     const initAuth = async () => {
       const [authConfigsErr, resAuthConfigs] = await to(dispatch(getAuthConfigs()))
-      const { authType } = resAuthConfigs.payload
+      const authType = resAuthConfigs?.payload?.authType
 
       if (authType === 'simple') {
         dispatch(initialVersion())

web/src/lib/store/metalakes/index.js

@@ -140,12 +140,12 @@ export const setIntoTreeNodeWithFetch = createAsyncThunk(
     } else if (pathArr.length === 4 && type === 'relational') {
       const [err, res] = await to(getTablesApi({ metalake, catalog, schema }))
 
-      const { identifiers = [] } = res
-
       if (err || !res) {
         throw new Error(err)
       }
 
+      const { identifiers = [] } = res
+
       result.data = identifiers.map(tableItem => {
         return {
           ...tableItem,
@@ -163,12 +163,12 @@ export const setIntoTreeNodeWithFetch = createAsyncThunk(
     } else if (pathArr.length === 4 && type === 'fileset') {
       const [err, res] = await to(getFilesetsApi({ metalake, catalog, schema }))
 
-      const { identifiers = [] } = res
-
       if (err || !res) {
         throw new Error(err)
       }
 
+      const { identifiers = [] } = res
+
       result.data = identifiers.map(filesetItem => {
         return {
           ...filesetItem,
@@ -184,12 +184,12 @@ export const setIntoTreeNodeWithFetch = createAsyncThunk(
     } else if (pathArr.length === 4 && type === 'messaging') {
       const [err, res] = await to(getTopicsApi({ metalake, catalog, schema }))
 
-      const { identifiers = [] } = res
-
       if (err || !res) {
         throw new Error(err)
       }
 
+      const { identifiers = [] } = res
+
       result.data = identifiers.map(topicItem => {
         return {
           ...topicItem,
@@ -970,27 +970,37 @@ export const appMetalakesSlice = createSlice({
       state.metalakes = action.payload.metalakes
     })
     builder.addCase(fetchMetalakes.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(setIntoTreeNodeWithFetch.fulfilled, (state, action) => {
       const { key, data, tree } = action.payload
 
       state.metalakeTree = updateTreeData(tree, key, data)
     })
     builder.addCase(setIntoTreeNodeWithFetch.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getMetalakeDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
     })
     builder.addCase(getMetalakeDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(createCatalog.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(updateCatalog.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchCatalogs.fulfilled, (state, action) => {
       state.catalogs = action.payload.catalogs
@@ -1004,16 +1014,22 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchCatalogs.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getCatalogDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
     })
     builder.addCase(getCatalogDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(deleteCatalog.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchSchemas.fulfilled, (state, action) => {
       state.schemas = action.payload.schemas
@@ -1022,13 +1038,17 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchSchemas.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getSchemaDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
     })
     builder.addCase(getSchemaDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchTables.fulfilled, (state, action) => {
       state.tables = action.payload.tables
@@ -1037,14 +1057,18 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchTables.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getTableDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
       state.tableData = action.payload.columns || []
     })
     builder.addCase(getTableDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchFilesets.fulfilled, (state, action) => {
       state.filesets = action.payload.filesets
@@ -1053,14 +1077,18 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchFilesets.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getFilesetDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
       state.tableData = []
     })
     builder.addCase(getFilesetDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchTopics.fulfilled, (state, action) => {
       state.topics = action.payload.topics
@@ -1069,14 +1097,18 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchTopics.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getTopicDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
       state.tableData = []
     })
     builder.addCase(getTopicDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
   }
 })

web/src/lib/utils/axios/index.ts

@@ -256,7 +256,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           apiUrl: '',
           urlPrefix: '',
           joinTime: true,
-          ignoreCancelToken: true,
+          ignoreCancelToken: false,
           withToken: true,
           retryRequest: {
             isOpenRetry: false,