Merge pull request #25 from gary-kim/enh/2/enable-labs

Allow enabling labs

.editorconfig

@@ -3,3 +3,7 @@
 [*.xml]
 indent_size = 4
 indent_style = space
+
+[*.js]
+indent_size = 4
+indent_style = space

.nextcloudignore

@@ -22,4 +22,4 @@
 /scripts/
 /.git/
 /krankerl.toml
-
+/.editorconfig

Makefile

@@ -13,8 +13,8 @@ all: dev-setup build
 dev-setup: 3rdparty/riot
 	npm i
 
-3rdparty/riot:
-	(cd 3rdparty/riot-web && npm i && npm run build && cp config.sample.json webapp/ && mv webapp ../riot)
+3rdparty/riot: 3rdparty/riot-web
+	(cd 3rdparty/riot-web && npm i && npm run build && cp config.sample.json webapp/ && cp riot.im/develop/config.json webapp/develop.config.json && mv webapp ../riot)
 
 .PHONY: build
 build:
@@ -43,4 +43,4 @@ source:
 
 .PHONY: appstore
 appstore:
-	
+

lib/AppInfo/Application.php

@@ -41,4 +41,10 @@ class Application extends App {
 	public function __construct(array $urlParams = []) {
 		parent::__construct(self::APP_ID, $urlParams);
 	}
+
+	public static function AvailableLabs() {
+		$developConfig = json_decode(file_get_contents(__DIR__ . '/../../3rdparty/riot/develop.config.json'), true);
+		$labs = $developConfig['features'];
+		return array_keys($labs);
+	}
 }

lib/Controller/ConfigController.php

@@ -84,13 +84,17 @@ public function config() {
 			'branding' => [
 				'authHeaderLogoUrl' => $this->defaults->getLogo(),
 			],
+			'features' => [],
 		];
 		$jitsi_domain = $this->config->getAppValue(Application::APP_ID, 'jitsi_preferred_domain', Application::AvailableSettings['jitsi_preferred_domain']);
 		if ($jitsi_domain !== "") {
 			$config['jitsi'] = [
 				'preferredDomain' => $jitsi_domain,
 			];
 		}
+		foreach (Application::AvailableLabs() as $lab) {
+			$config['features'][$lab] = $this->config->getAppValue(Application::APP_ID, 'lab_' . $lab, 'disable');
+		}
 
 		return new JSONResponse($config);
 	}

lib/Controller/SettingsController.php

@@ -49,7 +49,11 @@ public function __construct($appName, IRequest $request, IConfig $config) {
 	 * @return JSONResponse
 	 */
 	public function setSetting(string $key, string $value): JSONResponse {
-		if (!array_key_exists($key, Application::AvailableSettings)) {
+		$labSettingNames = [];
+		foreach (Application::AvailableLabs() as $k) {
+			$labSettingNames[] = "lab_" . $k;
+		}
+		if (!array_key_exists($key, Application::AvailableSettings) && !in_array($key, $labSettingNames)) {
 			return new JSONResponse([
 				'message' => 'parameter does not exist',
 			], Http::STATUS_UNPROCESSABLE_ENTITY);

lib/Settings/Admin.php

@@ -62,6 +62,12 @@ public function getForm() {
 			$this->initialStateService->provideInitialState(Application::APP_ID, $key, $data);
 		}
 
+		$labstr = [];
+		foreach (Application::AvailableLabs() as $k) {
+			$labstr['lab_' . $k] = $this->config->getAppValue(Application::APP_ID, 'lab_' . $k, 'disable');
+		}
+		$this->initialStateService->provideInitialState(Application::APP_ID, 'labs', json_encode($labstr));
+
 		return new TemplateResponse(Application::APP_ID, 'settings/admin');
 	}
 

src/.eslintrc.json

@@ -11,7 +11,8 @@
     ],
     "globals": {
         "t": true,
-        "n": true
+        "n": true,
+		"RIOT_WEB_HASH": true
     },
     "parserOptions": {
         "parser": "babel-eslint",

src/components/AdminSettings.vue

@@ -87,6 +87,32 @@
                 @change="updateSetting('jitsi_preferred_domain')"
             >
         </SettingsSection>
+        <SettingsSection
+            :title="t('riotchat', 'Features')"
+            :description="t('riotchat', 'Configure experimental features in Riot.im')"
+        >
+            <p v-html="featureDocumentation" />
+            <p>{{ t('riotchat', '"enabled" enables the feature for all users. "disable" disables the feature for all users. "labs" adds the feature to the user\'s settings.') }}</p>
+            <br>
+            <div
+                v-for="(setting, key) in labs"
+                :key="key"
+            >
+                <select
+                    :id="key"
+                    v-model="labs[key]"
+                    @change="updateLabSetting(key)"
+                >
+                    <option>enable</option>
+                    <option>labs</option>
+                    <option>disable</option>
+                </select>
+                <label
+                    :ref="key"
+                    :for="key"
+                >{{ key.substring(4) }}</label>
+            </div>
+        </SettingsSection>
     </div>
 </template>
 
@@ -108,13 +134,29 @@ export default {
             "server_name": loadState('riotchat', 'server_name'),
             "disable_custom_urls": loadState('riotchat', 'disable_custom_urls') === 'true',
             "disable_login_language_selector": loadState('riotchat', 'disable_login_language_selector') === 'true',
-            "jitsi_preferred_domain": loadState('riotchat', 'jitsi_preferrred_domain'),
+            "jitsi_preferred_domain": loadState('riotchat', 'jitsi_preferred_domain'),
+            "labs": JSON.parse(loadState('riotchat', 'labs')),
         };
     },
+    computed: {
+        featureDocumentation () {
+            return t('riotchat', 'These are experimental features in Riot.im that you can enable. For information on what each feature is, check out the documentation for it {linkstart}here{linkend}')
+                .replace('{linkstart}', `<a href="https://github.com/vector-im/riot-web/blob/${RIOT_WEB_HASH}/docs/feature-flags.md" target="_blank" rel="noopener noreferrer">`)
+                .replace('{linkend}', `</a>`);
+        },
+
+    },
     methods: {
         updateSetting (setting) {
             const value = this[setting].toString();
             const settingName = this.$refs[setting].innerText.split("(")[0].split(":")[0].trim();
+            this.sendUpdate(setting, settingName, value);
+        },
+        updateLabSetting (setting) {
+            const value = this.labs[setting].toString();
+            this.sendUpdate(setting, t('riotchat', 'Experimental feature {feature}', { feature: setting }), value);
+        },
+        sendUpdate (setting, settingName, value) {
             Axios.put(generateUrl(`apps/riotchat/settings/${setting}`), {
                 value,
             }).then(() => {

webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
+const { execSync } = require('child_process');
 const { VueLoaderPlugin } = require('vue-loader');
+const webpack = require('webpack');
 
 module.exports = {
     entry: {
@@ -35,6 +37,9 @@ module.exports = {
     },
     plugins: [
         new VueLoaderPlugin(),
+		new webpack.DefinePlugin({
+			RIOT_WEB_HASH: JSON.stringify(execSync('git rev-parse HEAD', { cwd: path.resolve(__dirname, './3rdparty/riot-web') }).toString()),
+		}),
     ],
     resolve: {
         extensions: ['.js', '.vue'],