Allow namespace to specified on role creation (#2020)

* Allow users to specify the namespace when creating a custom role.
* Default role namespace remains the "global" namespace allowing for
  cluster role creatoin.

Signed-off-by: Jameel Al-Aziz <me@jalaziz.io>

src/renderer/components/+user-management-roles/add-role-dialog.tsx

@@ -5,9 +5,11 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
+import { SubTitle } from "../layout/sub-title";
 import { Notifications } from "../notifications";
 import { rolesStore } from "./roles.store";
 import { Input } from "../input";
+import { NamespaceSelect } from "../+namespaces/namespace-select";
 import { showDetails } from "../kube-object";
 
 interface Props extends Partial<DialogProps> {
@@ -18,6 +20,7 @@ export class AddRoleDialog extends React.Component<Props> {
   @observable static isOpen = false;
 
   @observable roleName = "";
+  @observable namespace = "";
 
   static open() {
     AddRoleDialog.isOpen = true;
@@ -33,11 +36,12 @@ export class AddRoleDialog extends React.Component<Props> {
 
   reset = () => {
     this.roleName = "";
+    this.namespace = "";
   };
 
   createRole = async () => {
     try {
-      const role = await rolesStore.create({ name: this.roleName });
+      const role = await rolesStore.create({ name: this.roleName, namespace: this.namespace });
 
       showDetails(role.selfLink);
       this.reset();
@@ -64,13 +68,20 @@ export class AddRoleDialog extends React.Component<Props> {
             nextLabel="Create"
             next={this.createRole}
           >
+            <SubTitle title="Role Name" />
             <Input
               required autoFocus
-              placeholder={`Role name`}
+              placeholder={`Name`}
               iconLeft="supervisor_account"
               value={this.roleName}
               onChange={v => this.roleName = v}
             />
+            <SubTitle title="Namespace" />
+            <NamespaceSelect
+              themeName="light"
+              value={this.namespace}
+              onChange={({ value }) => this.namespace = value}
+            />
           </WizardStep>
         </Wizard>
       </Dialog>