feat(storage): support a object storage custom path prefix

web/components/admin/config/server/EditStorage.tsx

@@ -28,7 +28,8 @@ const { Panel } = Collapse;
 // we could probably add more detailed checks here
 // `currentValues` is what's currently in the global store and in the db
 function checkSaveable(formValues: any, currentValues: any) {
-  const { endpoint, accessKey, secret, bucket, region, enabled, acl, forcePathStyle } = formValues;
+  const { endpoint, accessKey, secret, bucket, region, enabled, acl, forcePathStyle, pathPrefix } =
+    formValues;
   // if fields are filled out and different from what's in store, then return true
   if (enabled) {
     if (!!endpoint && isValidUrl(endpoint) && !!accessKey && !!secret && !!bucket && !!region) {
@@ -39,6 +40,7 @@ function checkSaveable(formValues: any, currentValues: any) {
         secret !== currentValues.secret ||
         bucket !== currentValues.bucket ||
         region !== currentValues.region ||
+        pathPrefix !== currentValues.pathPrefix ||
         (!currentValues.acl && acl !== '') ||
         (!!currentValues.acl && acl !== currentValues.acl) ||
         forcePathStyle !== currentValues.forcePathStyle
@@ -72,6 +74,7 @@ export default function EditStorage() {
     endpoint = '',
     region = '',
     secret = '',
+    pathPrefix = '',
     forcePathStyle = false,
   } = s3;
 
@@ -84,6 +87,7 @@ export default function EditStorage() {
       endpoint,
       region,
       secret,
+      pathPrefix,
       forcePathStyle,
     });
     setShouldDisplayForm(enabled);
@@ -219,6 +223,14 @@ export default function EditStorage() {
               />
             </div>
 
+            <div className="field-container">
+              <TextField
+                {...S3_TEXT_FIELDS_INFO.pathPrefix}
+                value={formDataValues.pathPrefix}
+                onChange={handleFieldChange}
+              />
+            </div>
+
             <div className="enable-switch">
               <ToggleSwitch
                 {...S3_TEXT_FIELDS_INFO.forcePathStyle}

web/types/config-section.ts

@@ -81,6 +81,7 @@ export interface S3Field {
   endpoint: string;
   region: string;
   secret: string;
+  pathPrefix: string;
   forcePathStyle: boolean;
 }
 

web/utils/config-constants.tsx

@@ -535,6 +535,13 @@ export const S3_TEXT_FIELDS_INFO = {
     placeholder: 'your secret key',
     tip: '',
   },
+  pathPrefix: {
+    fieldName: 'pathPrefix',
+    label: 'Path prefix',
+    maxLength: 255,
+    placeholder: '/my/custom/path',
+    tip: 'Optionally prepend a custom path for the final URL',
+  },
   forcePathStyle: {
     fieldName: 'forcePathStyle',
     label: 'Force path-style',

web/utils/server-status-context.tsx

@@ -39,6 +39,7 @@ const initialServerConfigState: ConfigDetails = {
     endpoint: '',
     region: '',
     secret: '',
+    pathPrefix: '',
     forcePathStyle: false,
   },
   yp: {