feat: support path style of s3 url (#4304)

Signed-off-by: ComixHe <ComixHe1895@outlook.com>

plugin/storage/s3/s3.go

@@ -31,6 +31,7 @@ func NewClient(ctx context.Context, s3Config *storepb.StorageS3Config) (*Client,
 
 	client := s3.NewFromConfig(cfg, func(o *s3.Options) {
 		o.BaseEndpoint = aws.String(s3Config.Endpoint)
+		o.UsePathStyle = s3Config.UsePathStyle
 	})
 	return &Client{
 		Client: client,

proto/api/v1/workspace_setting_service.proto

@@ -89,6 +89,7 @@ message WorkspaceStorageSetting {
     string endpoint = 3;
     string region = 4;
     string bucket = 5;
+    bool use_path_style = 6;
   }
   // The S3 config.
   S3Config s3_config = 4;

proto/gen/apidocs.swagger.yaml

@@ -1864,6 +1864,8 @@ definitions:
         type: string
       bucket:
         type: string
+      usePathStyle:
+        type: boolean
     title: 'Reference: https://developers.cloudflare.com/r2/examples/aws/aws-sdk-go/'
   apiHttpBody:
     type: object

proto/store/workspace_setting.proto

@@ -91,6 +91,7 @@ message StorageS3Config {
   string endpoint = 3;
   string region = 4;
   string bucket = 5;
+  bool use_path_style = 6;
 }
 
 message WorkspaceMemoRelatedSetting {

server/router/api/v1/workspace_setting_service.go

@@ -196,6 +196,7 @@ func convertWorkspaceStorageSettingFromStore(settingpb *storepb.WorkspaceStorage
 			Endpoint:        settingpb.S3Config.Endpoint,
 			Region:          settingpb.S3Config.Region,
 			Bucket:          settingpb.S3Config.Bucket,
+			UsePathStyle:    settingpb.S3Config.UsePathStyle,
 		}
 	}
 	return setting
@@ -217,6 +218,7 @@ func convertWorkspaceStorageSettingToStore(setting *v1pb.WorkspaceStorageSetting
 			Endpoint:        setting.S3Config.Endpoint,
 			Region:          setting.S3Config.Region,
 			Bucket:          setting.S3Config.Bucket,
+			UsePathStyle:    setting.S3Config.UsePathStyle,
 		}
 	}
 	return settingpb

web/src/components/Settings/StorageSection.tsx

-import { Divider, List, ListItem, Radio, RadioGroup, Tooltip } from "@mui/joy";
+import { Divider, List, ListItem, Radio, RadioGroup, Tooltip, Switch } from "@mui/joy";
 import { Button, Input } from "@usememos/mui";
 import { isEqual } from "lodash-es";
 import { HelpCircleIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
 import { workspaceSettingNamePrefix, useWorkspaceSettingStore } from "@/store/v1";
@@ -98,6 +98,12 @@ const StorageSection = () => {
     handlePartialS3ConfigChanged({ bucket: event.target.value });
   };
 
+  const handleS3ConfigUsePathStyleChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    handlePartialS3ConfigChanged({
+      usePathStyle: event.target.checked,
+    });
+  };
+
   const handleStorageTypeChanged = async (storageType: WorkspaceStorageSetting_StorageType) => {
     const update: WorkspaceStorageSetting = {
       ...workspaceStorageSetting,
@@ -174,6 +180,10 @@ const StorageSection = () => {
             <span className="text-gray-700 dark:text-gray-500 mr-1">Bucket</span>
             <Input value={workspaceStorageSetting.s3Config?.bucket} placeholder="" onChange={handleS3ConfigBucketChanged} />
           </div>
+          <div className="w-full flex flex-row justify-between items-center">
+            <span className="text-gray-700 dark:text-gray-500 mr-1">Use Path Style</span>
+            <Switch checked={workspaceStorageSetting.s3Config?.usePathStyle} onChange={handleS3ConfigUsePathStyleChanged} />
+          </div>
         </>
       )}
       <div>