Add featureflags components and toggle method on api

2020-09-11 09:59:53 +02:00
parent cd66f03f9d
commit 12e2d169f8
3 changed files with 112 additions and 0 deletions
@@ -80,6 +80,13 @@ export class UserFlags extends Map<FeatureFlagName, FeatureFlagState> {
    return output;
  }

+  toggle(name: FeatureFlagName): FeatureFlagState {
+    Boolean(super.get(name))
+      ? super.set(name, FeatureFlagState.Off)
+      : super.set(name, FeatureFlagState.On);
+    return super.get(name) || FeatureFlagState.Off;
+  }
+
  delete(name: FeatureFlagName): boolean {
    const output = super.delete(name);
    this.save();
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { FeatureFlagName, FeatureFlagsApi } from '@backstage/core-api';
+import {
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+  Tooltip,
+} from '@material-ui/core';
+import CheckIcon from '@material-ui/icons/CheckCircle';
+import { ToggleButton } from '@material-ui/lab';
+
+type Props = {
+  featureFlag: { name: FeatureFlagName; pluginId: string };
+  api: FeatureFlagsApi;
+};
+
+export const FlagItem = ({ featureFlag, api }: Props) => {
+  const [enabled, setEnabled] = React.useState(
+    Boolean(api.getFlags().get(featureFlag.name)),
+  );
+
+  const toggleFlag = () => {
+    const newState = api.getFlags().toggle(featureFlag.name);
+    setEnabled(Boolean(newState));
+  };
+
+  return (
+    <ListItem>
+      <ListItemText
+        primary={featureFlag.name}
+        secondary={`Registered in ${featureFlag.pluginId} plugin`}
+      />
+      <ListItemSecondaryAction>
+        <ToggleButton
+          size="small"
+          value="flag"
+          selected={enabled}
+          onChange={toggleFlag}
+        >
+          <Tooltip
+            placement="top"
+            arrow
+            title={Boolean(enabled) ? 'Disable' : 'Enable'}
+          >
+            <CheckIcon />
+          </Tooltip>
+        </ToggleButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import { useApi, featureFlagsApiRef } from '@backstage/core-api';
+import { FlagItem } from './FeatureFlagsItem';
+
+export const FeatureFlagsList = () => {
+  const featureFlagsApi = useApi(featureFlagsApiRef);
+  const featureFlags = featureFlagsApi.getRegisteredFlags();
+
+  return (
+    <List dense subheader={<ListSubheader>Feature Flags</ListSubheader>}>
+      {featureFlags.map(featureFlag => (
+        <FlagItem
+          key={featureFlag.name}
+          featureFlag={featureFlag}
+          api={featureFlagsApi}
+        />
+      ))}
+    </List>
+  );
+};