diff --git a/ui/cypress/fixtures/chronograf.json b/ui/cypress/fixtures/chronograf.json
index e01e7b69b..141a88df1 100644
--- a/ui/cypress/fixtures/chronograf.json
+++ b/ui/cypress/fixtures/chronograf.json
@@ -9,11 +9,21 @@
     "organizations": [
         {
             "name": "SmallOrg",
-            "defaultRole": "reader"
+            "defaultRole": "reader",
+            "mapping": {
+                "scheme": "oauth2",
+                "provider": "oauth-mock",
+                "providerOrg": "default"
+            }
         },
         {
             "name": "BigOrg",
-            "defaultRole": "member"
+            "defaultRole": "member",
+            "mapping": {
+                "scheme": "oauth2",
+                "provider": "oauth-mock-2",
+                "providerOrg": "default-2"
+            }
         }
     ]
 }
\ No newline at end of file
diff --git a/ui/cypress/index.d.ts b/ui/cypress/index.d.ts
index 7dbb2034e..93351a75c 100644
--- a/ui/cypress/index.d.ts
+++ b/ui/cypress/index.d.ts
@@ -29,6 +29,7 @@ import {
   writePoints,
   clickAttached,
   changeUserInfo,
+  deleteMappings,
 } from './support/commands'
 
 declare global {
@@ -62,6 +63,7 @@ declare global {
       writePoints: typeof writePoints
       clickAttached: typeof clickAttached
       changeUserInfo: typeof changeUserInfo
+      deleteMappings: typeof deleteMappings
     }
   }
 }
diff --git a/ui/cypress/integration/admin_chronograf.test.ts b/ui/cypress/integration/admin_chronograf.test.ts
index 2f9b3b4b1..2d69e2a2e 100644
--- a/ui/cypress/integration/admin_chronograf.test.ts
+++ b/ui/cypress/integration/admin_chronograf.test.ts
@@ -238,4 +238,73 @@ describe('Chronograf', () => {
       )
     })
   })
+
+  describe('Org Mapping', () => {
+    beforeEach(() => {
+      cy.visit(url + '/organization-mappings')
+    })
+
+    it('create, edit, and remove organization mapping', () => {
+      cy.getByTestID('providers--row').should('have.length', 1)
+      cy.get('.panel-title').should('have.text', '1 Map')
+      cy.getByTestID('create-mapping--button').click()
+      cy.getByTestID('cancel').click()
+      cy.getByTestID('providers--row').should('have.length', 1)
+      cy.getByTestID('create-mapping--button').click()
+      cy.getByTestID('providers--new-row').within(() => {
+        cy.getByTestID('dropdown-selected--*')
+          .click()
+          .then(() => {
+            cy.getByTestID(
+              `${chronograf.organizations[0].mapping.scheme}-dropdown-item`
+            ).click()
+          })
+        cy.getByTestID(
+          `dropdown-selected--${chronograf.organizations[0].mapping.scheme}`
+        ).should('contain.text', chronograf.organizations[0].mapping.scheme)
+        cy.getByTestID('new-provider-name').click()
+        cy.getByTestID('new-provider--input').type(
+          chronograf.organizations[0].mapping.provider + '{Enter}'
+        )
+        cy.getByTestID('new-provider-name').should(
+          'have.text',
+          chronograf.organizations[0].mapping.provider
+        )
+        cy.getByTestID('new-provider-org-name').click()
+        cy.getByTestID('new-provider-org--input').type(
+          chronograf.organizations[0].mapping.providerOrg + '{Enter}'
+        )
+        cy.getByTestID('new-provider-org-name').should(
+          'have.text',
+          chronograf.organizations[0].mapping.providerOrg
+        )
+        cy.getByTestID('confirm').click()
+      })
+      cy.reload()
+      cy.get('.panel-title').should('have.text', '2 Maps')
+      cy.getByTestID('providers--row')
+        .should('have.length', 2)
+        .eq(0)
+        .within(() => {
+          cy.getByTestID('provider-name').click()
+          cy.getByTestID('provider--input')
+            .clear()
+            .type(chronograf.organizations[1].mapping.provider + '{Enter}')
+          cy.getByTestID('provider-name').should(
+            'have.text',
+            chronograf.organizations[1].mapping.provider
+          )
+          cy.getByTestID('provider-org-name').click()
+          cy.getByTestID('provider-org--input').type(
+            chronograf.organizations[1].mapping.providerOrg + '{Enter}'
+          )
+          cy.getByTestID('provider-org-name').should(
+            'have.text',
+            chronograf.organizations[1].mapping.providerOrg
+          )
+          cy.getByTestID('delete-mapping--confirm-button').click()
+          cy.getByTestID('confirm-btn').click()
+        })
+    })
+  })
 })
diff --git a/ui/cypress/support/commands.ts b/ui/cypress/support/commands.ts
index b9d0f23d7..c5ba9ee4b 100644
--- a/ui/cypress/support/commands.ts
+++ b/ui/cypress/support/commands.ts
@@ -487,6 +487,17 @@ export const deleteInfluxDBs = (sourceId: string) => {
     })
 }
 
+export const deleteMappings = () => {
+  return cy.request('GET', `${apiUrl}/mappings`).then(({body: responseBody}) => {
+    console.log(responseBody)
+    cy.wrap(responseBody.mappings).each((map: any) => {
+      if(map.id !== 'default') {
+        cy.request('DELETE', `${apiUrl}/mappings/${map.id}`)
+      }
+    })
+  })
+}
+
 function wrapConnections() {
   return cy
     .request({
@@ -557,6 +568,7 @@ export function toInitialState() {
             })
           })
 
+          cy.deleteMappings()
           cy.deleteDashboards()
           cy.deleteChronografUsers()
           cy.deleteOrgs()
@@ -605,3 +617,4 @@ Cypress.Commands.add('toInitialState', toInitialState)
 Cypress.Commands.add('writePoints', writePoints)
 Cypress.Commands.add('clickAttached', {prevSubject: 'element'}, clickAttached)
 Cypress.Commands.add('changeUserInfo', changeUserInfo)
+Cypress.Commands.add('deleteMappings', deleteMappings)
\ No newline at end of file
diff --git a/ui/src/admin/components/chronograf/ProvidersTable.js b/ui/src/admin/components/chronograf/ProvidersTable.js
index 772585d1a..00aa0fc27 100644
--- a/ui/src/admin/components/chronograf/ProvidersTable.js
+++ b/ui/src/admin/components/chronograf/ProvidersTable.js
@@ -61,6 +61,7 @@ class ProvidersTable extends Component {
             className="btn btn-sm btn-primary"
             onClick={this.handleClickCreateMap}
             disabled={isCreatingMap}
+            data-test="create-mapping--button"
           >
             <span className="icon plus" /> Create Mapping
           </button>
@@ -112,6 +113,7 @@ class ProvidersTable extends Component {
                 className="btn btn-sm btn-primary"
                 onClick={this.handleClickCreateMap}
                 disabled={isCreatingMap}
+                data-test="create-mapping--button"
               >
                 <span className="icon plus" /> Create Mapping
               </button>
diff --git a/ui/src/admin/components/chronograf/ProvidersTableRow.js b/ui/src/admin/components/chronograf/ProvidersTableRow.js
index 9637e2413..024d12443 100644
--- a/ui/src/admin/components/chronograf/ProvidersTableRow.js
+++ b/ui/src/admin/components/chronograf/ProvidersTableRow.js
@@ -61,7 +61,7 @@ class ProvidersTableRow extends Component {
 
     const isDefaultMapping = DEFAULT_MAPPING_ID === mapping.id
     return (
-      <div className="fancytable--row">
+      <div className="fancytable--row" data-test="providers--row">
         <div className="fancytable--td provider--scheme">
           <Dropdown
             items={schemes}
@@ -77,6 +77,7 @@ class ProvidersTableRow extends Component {
           onBlur={this.handleChangeProvider}
           disabled={isDefaultMapping}
           tabIndex={rowIndex}
+          testId="provider"
         />
         <InputClickToEdit
           value={providerOrganization}
@@ -84,6 +85,7 @@ class ProvidersTableRow extends Component {
           onBlur={this.handleChangeProviderOrg}
           disabled={isDefaultMapping}
           tabIndex={rowIndex}
+          testId="provider-org"
         />
         <div className="fancytable--td provider--arrow">
           <span />
@@ -103,6 +105,7 @@ class ProvidersTableRow extends Component {
           confirmAction={this.handleDeleteMap}
           confirmText="Delete this Mapping?"
           disabled={isDefaultMapping}
+          testId="delete-mapping--confirm-button"
         />
       </div>
     )
diff --git a/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx b/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
index 7f08d6747..4e7f7dd91 100644
--- a/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
+++ b/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
@@ -63,7 +63,7 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
     const preventCreate = !provider || !providerOrganization
 
     return (
-      <div className="fancytable--row">
+      <div className="fancytable--row" data-test="providers--new-row">
         <div className="fancytable--td provider--scheme">
           <Dropdown
             items={schemes}
@@ -79,6 +79,7 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
           onBlur={this.handleChangeProvider}
           tabIndex={rowIndex}
           placeholder="google"
+          testId="new-provider"
         />
         <InputClickToEdit
           value={providerOrganization}
@@ -87,6 +88,7 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
           onBlur={this.handleChangeProviderOrg}
           tabIndex={rowIndex}
           placeholder="*"
+          testId="new-provider-org"
         />
         <div className="fancytable--td provider--arrow">
           <span />
diff --git a/ui/src/shared/components/InputClickToEdit.tsx b/ui/src/shared/components/InputClickToEdit.tsx
index 8efd0f031..a75c0b5b1 100644
--- a/ui/src/shared/components/InputClickToEdit.tsx
+++ b/ui/src/shared/components/InputClickToEdit.tsx
@@ -104,7 +104,7 @@ class InputClickToEdit extends PureComponent<Props, State> {
       placeholder,
       value,
       appearAsNormalInput,
-      testId,
+      testId = 'icte',
     } = this.props
 
     const wrapperClass = `${wrapper}${