From 467b7a40d8044aee5385e2cfee0e1cdfc5931c53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Fri, 8 Mar 2019 10:46:52 +0100
Subject: [PATCH] teams: feature toggle component

---
 .../app/core/components/WithFeatureToggle.tsx |  13 +
 public/app/features/teams/TeamMembers.tsx     |  32 +-
 .../__snapshots__/TeamMembers.test.tsx.snap   | 800 +++++++++---------
 3 files changed, 453 insertions(+), 392 deletions(-)
 create mode 100644 public/app/core/components/WithFeatureToggle.tsx

diff --git a/public/app/core/components/WithFeatureToggle.tsx b/public/app/core/components/WithFeatureToggle.tsx
new file mode 100644
index 00000000000..250697e0029
--- /dev/null
+++ b/public/app/core/components/WithFeatureToggle.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from 'react';
+
+export interface Props {
+  featureToggle: boolean;
+}
+
+export const WithFeatureToggle: FunctionComponent<Props> = ({ featureToggle, children }) => {
+  if (featureToggle === true) {
+    return <>{children}</>;
+  }
+
+  return null;
+};
diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx
index 341d9311b53..3054524023d 100644
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@@ -8,6 +8,8 @@ import { TeamMember, User, teamsPermissionLevels } from 'app/types';
 import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
 import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
+import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
+import { config } from 'app/core/config';
 
 export interface Props {
   members: TeamMember[];
@@ -78,18 +80,20 @@ export class TeamMembers extends PureComponent<Props, State> {
         </td>
         <td>{member.login}</td>
         <td>{member.email}</td>
-        <td>
-          <div className="gf-form">
-            <Select
-              isSearchable={false}
-              options={teamsPermissionLevels}
-              onChange={() => {}}
-              className="gf-form-select-box__control--menu-right"
-              value={currentPermissionLevel}
-              isDisabled={true}
-            />
-          </div>
-        </td>{' '}
+        <WithFeatureToggle featureToggle={config.editorsCanOwn}>
+          <td>
+            <div className="gf-form">
+              <Select
+                isSearchable={false}
+                options={teamsPermissionLevels}
+                onChange={() => {}}
+                className="gf-form-select-box__control--menu-right"
+                value={currentPermissionLevel}
+                isDisabled={true}
+              />
+            </div>
+          </td>
+        </WithFeatureToggle>
         {syncEnabled && this.renderLabels(member.labels)}
         <td className="text-right">
           <DeleteButton onConfirm={() => this.onRemoveMember(member)} />
@@ -145,7 +149,9 @@ export class TeamMembers extends PureComponent<Props, State> {
                 <th />
                 <th>Name</th>
                 <th>Email</th>
-                <th>Permission</th>
+                <WithFeatureToggle featureToggle={config.editorsCanOwn}>
+                  <th>Permission</th>
+                </WithFeatureToggle>
                 {syncEnabled && <th />}
                 <th style={{ width: '1%' }} />
               </tr>
diff --git a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
index ba20817b836..fc168457334 100644
--- a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
@@ -69,9 +69,13 @@ exports[`Render should render component 1`] = `
           <th>
             Email
           </th>
-          <th>
-            Permission
-          </th>
+          <Component
+            featureToggle={false}
+          >
+            <th>
+              Permission
+            </th>
+          </Component>
           <th
             style={
               Object {
@@ -156,9 +160,13 @@ exports[`Render should render team members 1`] = `
           <th>
             Email
           </th>
-          <th>
-            Permission
-          </th>
+          <Component
+            featureToggle={false}
+          >
+            <th>
+              Permission
+            </th>
+          </Component>
           <th
             style={
               Object {
@@ -186,48 +194,51 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td
             className="text-right"
           >
@@ -253,48 +264,51 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td
             className="text-right"
           >
@@ -320,48 +334,51 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td
             className="text-right"
           >
@@ -387,48 +404,51 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td
             className="text-right"
           >
@@ -454,48 +474,51 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td
             className="text-right"
           >
@@ -579,9 +602,13 @@ exports[`Render should render team members when sync enabled 1`] = `
           <th>
             Email
           </th>
-          <th>
-            Permission
-          </th>
+          <Component
+            featureToggle={false}
+          >
+            <th>
+              Permission
+            </th>
+          </Component>
           <th />
           <th
             style={
@@ -610,48 +637,51 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td>
             <TagBadge
               count={0}
@@ -693,48 +723,51 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td>
             <TagBadge
               count={0}
@@ -776,48 +809,51 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td>
             <TagBadge
               count={0}
@@ -859,48 +895,51 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td>
             <TagBadge
               count={0}
@@ -942,48 +981,51 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
-          <td>
-            <div
-              className="gf-form"
-            >
-              <Select
-                autoFocus={false}
-                backspaceRemovesValue={true}
-                className="gf-form-select-box__control--menu-right"
-                isClearable={false}
-                isDisabled={true}
-                isLoading={false}
-                isMulti={false}
-                isSearchable={false}
-                maxMenuHeight={300}
-                onChange={[Function]}
-                openMenuOnFocus={false}
-                options={
-                  Array [
+          <Component
+            featureToggle={false}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={true}
+                  isLoading={false}
+                  isMulti={false}
+                  isSearchable={false}
+                  maxMenuHeight={300}
+                  onChange={[Function]}
+                  openMenuOnFocus={false}
+                  options={
+                    Array [
+                      Object {
+                        "description": "Is team member",
+                        "label": "Member",
+                        "value": 0,
+                      },
+                      Object {
+                        "description": "Can add/remove permissions and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
                     Object {
                       "description": "Is team member",
                       "label": "Member",
                       "value": 0,
-                    },
-                    Object {
-                      "description": "Can add/remove permissions and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    },
-                  ]
-                }
-                value={
-                  Object {
-                    "description": "Is team member",
-                    "label": "Member",
-                    "value": 0,
+                    }
                   }
-                }
-                width={null}
-              />
-            </div>
-          </td>
-           
+                  width={null}
+                />
+              </div>
+            </td>
+          </Component>
           <td>
             <TagBadge
               count={0}