Implement feature flag

- get feature flag from AppConfig
- add Feature component and useFeature hook
- this change replace the environement variable based feature flag (#6367)

graylog2-web-interface/src/components/features/Feature.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import useFeature from 'hooks/useFeature';
+
+type Props = {
+  name: string;
+  fallback?: React.ReactNode,
+  children: React.ReactNode,
+}
+
+const Feature = ({ name, fallback, children }: Props) => {
+  const hasFeature = useFeature(name);
+
+  if (hasFeature) {
+    return children;
+  }
+
+  return fallback;
+};
+
+Feature.propTypes = {
+  name: PropTypes.string.isRequired,
+  fallback: PropTypes.node,
+  children: PropTypes.node.isRequired,
+};
+
+Feature.defaultProps = {
+  fallback: null,
+};
+
+export default Feature;

graylog2-web-interface/src/hooks/useFeature.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import PropTypes from 'prop-types';
+
+import AppConfig from 'util/AppConfig';
+
+const useFeature = (name: string) => {
+  return AppConfig.isFeatureEnabled(name);
+};
+
+useFeature.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default useFeature;

graylog2-web-interface/src/util/AppConfig.js

@@ -14,6 +14,8 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
+import Immutable from 'immutable';
+
 const AppConfig = {
   gl2ServerUrl() {
     if (typeof (GRAYLOG_API_URL) !== 'undefined') {
@@ -36,8 +38,9 @@ const AppConfig = {
   },
 
   isFeatureEnabled(feature) {
-    // eslint-disable-next-line no-undef
-    return typeof (FEATURES) !== 'undefined' && FEATURES.split(',')
+    return Immutable.Map(this.appConfig().featureFlags)
+      .filter((value) => value.trim().toLowerCase() === 'on')
+      .keySeq().toList()
       .filter((s) => typeof s === 'string')
       .map((s) => s.trim().toLowerCase())
       .includes(feature.toLowerCase());