Allow Bucket and Region to be set to environment variables

Resolves #42
craftcms · Feb 22, 2019 · 69a14bd · 69a14bd
1 parent f6c4f3c
commit 69a14bd
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Added
 - Added the CloudFront Path Prefix setting. ([#46](https://github.com/craftcms/aws-s3/pull/46))
+- The Bucket and Region settings can now be set to environment variables. ([#42](https://github.com/craftcms/aws-s3/issues/42))
 
 ## 1.1.3 - 2019-02-06
 

diff --git a/README.md b/README.md
@@ -35,34 +35,7 @@ composer require craftcms/aws-s3
 
 To create a new asset volume for your Amazon S3 bucket, go to Settings → Assets, create a new volume, and set the Volume Type setting to “Amazon S3”.
 
-> **Tip:** The Base URL, Access Key ID, Secret Access Key, Subfolder, CloudFront Distribution ID, and CloudFront Path Prefix settings can be set to environment variables. See [Environmental Configuration](https://docs.craftcms.com/v3/config/environments.html) in the Craft docs to learn more about that.
-
-### Overriding the Bucket and Region
-
-Once you’ve created your Amazon S3 volume, you can override its bucket and/or region for an environment by adding two new environment variables:
-
-```bash
-# The name of the S3 bucket
-S3_BUCKET=""
-
-# The region the S3 bucket is in
-S3_REGION=""
-```
-
-Then create a `config/volumes.php` file that overrides your volume’s `bucket` and `region` settings to the values provided by these environment variables:
-
-```php
-<?php
-
-return [
-    'myVolumeHandle' => array_filter([
-        'bucket' => getenv('S3_BUCKET'),
-        'region' => getenv('S3_REGION'),
-    ]),
-];
-```
-
-Now any environments that have `S3_BUCKET` and/or `S3_REGION` environment variables defined will override the volume’s `bucket` and `region` settings.
+> **Tip:** The Base URL, Access Key ID, Secret Access Key, Bucket, Region, Subfolder, CloudFront Distribution ID, and CloudFront Path Prefix settings can be set to environment variables. See [Environmental Configuration](https://docs.craftcms.com/v3/config/environments.html) in the Craft docs to learn more about that.
 
 ### Using the automatic focal point detection
 

diff --git a/src/Volume.php b/src/Volume.php
@@ -17,6 +17,7 @@
 use Aws\Sts\StsClient;
 use Craft;
 use craft\base\FlysystemVolume;
+use craft\helpers\ArrayHelper;
 use craft\helpers\Assets;
 use craft\helpers\DateTimeHelper;
 use craft\helpers\StringHelper;
@@ -84,6 +85,11 @@ public static function displayName(): string
      */
     public $secret = '';
 
+    /**
+     * @var string Bucket selection mode ('choose' or 'manual')
+     */
+    public $bucketSelectionMode = 'choose';
+
     /**
      * @var string Bucket to use
      */
@@ -123,6 +129,23 @@ public static function displayName(): string
     // Public Methods
     // =========================================================================
 
+    /**
+     * @inheritdoc
+     */
+    public function __construct(array $config = [])
+    {
+        if (isset($config['manualBucket'])) {
+            if (isset($config['bucketSelectionMode']) && $config['bucketSelectionMode'] === 'manual') {
+                $config['bucket'] = ArrayHelper::remove($config, 'manualBucket');
+                $config['region'] = ArrayHelper::remove($config, 'manualRegion');
+            } else {
+                unset($config['manualBucket'], $config['manualRegion']);
+            }
+        }
+
+        parent::__construct($config);
+    }
+
     /**
      * @inheritdoc
      */
@@ -210,7 +233,7 @@ protected function createAdapter()
 
         $client = static::client($config);
 
-        return new AwsS3Adapter($client, $this->bucket, $this->_subfolder());
+        return new AwsS3Adapter($client, Craft::parseEnv($this->bucket), $this->_subfolder());
     }
 
     /**
@@ -293,7 +316,7 @@ public function detectFocalPoint(string $filePath): array
             'Image' => [
                 'S3Object' => [
                     'Name' => $filePath,
-                    'Bucket' => $this->bucket,
+                    'Bucket' => Craft::parseEnv($this->bucket),
                 ],
             ],
         ];
@@ -362,7 +385,7 @@ private function _getConfigArray()
     {
         $keyId = Craft::parseEnv($this->keyId);
         $secret = Craft::parseEnv($this->secret);
-        $region = $this->region;
+        $region = Craft::parseEnv($this->region);
 
         return self::_buildConfigArray($keyId, $secret, $region);
     }

diff --git a/src/templates/volumeSettings.html b/src/templates/volumeSettings.html
@@ -23,17 +23,55 @@
 }) }}
 
 {% set bucketInput %}
-    <div class="flex">
+    <div class="flex fullwidth">
         {{ forms.select({
-            id: 'bucket',
-            name: 'bucket',
-            options: { (volume.bucket): volume.bucket },
-            value: volume.bucket,
-            readonly: true,
-            class: 's3-bucket-select'
+            name: 'bucketSelectionMode',
+            options: [
+                { label: 'Choose…'|t('aws-s3'), value: 'choose' },
+                { label: 'Manual…'|t('aws-s3'), value: 'manual' }
+            ],
+            value: volume.bucketSelectionMode,
+            toggle: true,
+            targetPrefix: '.bsm-'
         }) }}
-        <div class="btn s3-refresh-buckets">{{ "Refresh"|t('aws-s3') }}</div>
-        <div class="spinner hidden"></div>
+
+        <div class="bsm-choose{% if volume.bucketSelectionMode == 'manual' %} hidden{% endif %}">
+            {{ forms.select({
+                id: 'bucket',
+                name: 'bucket',
+                options: { (volume.bucket): volume.bucket },
+                value: volume.bucketSelectionMode == 'manual' ? volume.bucket,
+                readonly: true,
+                class: 's3-bucket-select'
+            }) }}
+        </div>
+        <div class="bsm-choose{% if volume.bucketSelectionMode == 'manual' %} hidden{% endif %}">
+            <div class="btn s3-refresh-buckets">{{ "Refresh"|t('aws-s3') }}</div>
+        </div>
+        <div class="bsm-choose{% if volume.bucketSelectionMode == 'manual' %} hidden{% endif %}">
+            <div class="spinner hidden"></div>
+        </div>
+
+        <div class="bsm-manual{% if volume.bucketSelectionMode == 'choose' %} hidden{% endif %} flex-grow">
+            {{ forms.autosuggest({
+                label: "Bucket"|t('aws-s3'),
+                class: 'ltr',
+                name: 'manualBucket',
+                suggestEnvVars: true,
+                value: volume.bucket,
+                placeholder: 'Bucket'|t('aws-s3')
+            }) }}
+        </div>
+        <div class="bsm-manual{% if volume.bucketSelectionMode == 'choose' %} hidden{% endif %} flex-grow">
+            {{ forms.autosuggest({
+                label: "Region"|t('aws-s3'),
+                class: 'ltr',
+                name: 'manualRegion',
+                suggestEnvVars: true,
+                value: volume.region,
+                placeholder: 'Region'|t('aws-s3')
+            }) }}
+        </div>
     </div>
 
     <input type="hidden" name="region" class="s3-region" value="{{ volume.region }}" />