Group SSO - Adding disable button functionality (#15052)

GitOrigin-RevId: 50024c6a8c6ce3fc64262f813bb31f3639746aae

services/web/app/src/Features/Email/EmailBuilder.js

@@ -445,6 +445,44 @@ templates.inviteNewUserToJoinManagedUsers = ctaTemplate({
   },
 })
 
+templates.managedUsersDisabledSSO = ctaTemplate({
+  subject(opts) {
+    return `Action required: Set your Overleaf password`
+  },
+  title(opts) {
+    return `Single sign-on disabled`
+  },
+  message(opts) {
+    return [
+      `Hi,
+      <div>
+        Your group administrator has disabled single sign-on for your group.
+      </div>
+      </br>
+      <div>
+        <strong>What does this mean for you?</strong>
+      </div> 
+      </br>
+      <div>
+        You now need an email address and password to sign in to your Overleaf account.
+      </div>
+      `,
+    ]
+  },
+  secondaryMessage(opts) {
+    return [``]
+  },
+  ctaURL(opts) {
+    return opts.setNewPasswordUrl
+  },
+  ctaText(opts) {
+    return 'Set your new password'
+  },
+  greeting() {
+    return ''
+  },
+})
+
 templates.surrenderAccountForManagedUsers = ctaTemplate({
   subject(opts) {
     const admin = _.escape(_formatUserNameAndEmail(opts.admin, 'an admin'))

services/web/frontend/stories/subscription/sso/disable-modal.stories.tsx

@@ -0,0 +1,37 @@
+import SSODisableModal, {
+  type SSODisableModalProps,
+} from '../../../../modules/managed-users/frontend/js/components/modals/sso-disable-modal'
+import useFetchMock from '../../hooks/use-fetch-mock'
+import { useMeta } from '../../hooks/use-meta'
+
+export const DisableSSOModalDefault = (args: SSODisableModalProps) => {
+  useMeta({ 'ol-groupId': '123' })
+  useFetchMock(fetchMock => {
+    fetchMock.post('express:/manage/groups/:id/settings/disableSSO', 200, {
+      delay: 500,
+    })
+  })
+  return <SSODisableModal {...args} />
+}
+
+export const DisableSSOModalError = (args: SSODisableModalProps) => {
+  useMeta({ 'ol-groupId': '123' })
+  useFetchMock(fetchMock => {
+    fetchMock.post('express:/manage/groups/:id/settings/enableSSO', 500, {
+      delay: 500,
+    })
+  })
+  return <SSODisableModal {...args} />
+}
+
+export default {
+  title: 'Subscription / SSO / Disable Modal',
+  component: SSODisableModal,
+  args: {
+    show: true,
+  },
+  argTypes: {
+    handleHide: { action: 'close modal' },
+    onDisableSSO: { action: 'callback' },
+  },
+}

services/web/test/frontend/features/group-management/components/sso/group-settings-sso.spec.tsx

@@ -135,5 +135,74 @@ describe('GroupSettingsSSO', function () {
         })
       })
     })
+    describe('SSO disable modal', function () {
+      beforeEach(function () {
+        cy.intercept('GET', `/manage/groups/${GROUP_ID}/settings/sso`, {
+          statusCode: 200,
+          body: {
+            entryPoint: 'entrypoint',
+            certificate: 'cert',
+            signatureAlgorithm: 'sha1',
+            userIdAttribute: 'email',
+            enabled: true,
+          },
+        }).as('sso')
+
+        cy.mount(<GroupSettingsSSOComponent />)
+
+        cy.wait('@sso')
+
+        cy.get('.group-settings-sso-enable').within(() => {
+          cy.get('.switch-input').within(() => {
+            cy.get('.invisible-input').click({ force: true })
+          })
+        })
+      })
+
+      it('render disable modal correctly', function () {
+        // disable modal
+        cy.get('.modal-dialog').within(() => {
+          cy.contains('Disable single sign-on')
+          cy.contains(
+            'You’re about to disable single sign-on for all group members.'
+          )
+        })
+      })
+
+      it('close disable modal if Cancel button is clicked', function () {
+        cy.get('.modal-dialog').within(() => {
+          cy.findByRole('button', { name: 'Cancel' }).click()
+        })
+
+        cy.get('.modal-dialog').should('not.exist')
+      })
+
+      it('disables SSO if Disable SSO button is clicked', function () {
+        cy.intercept('POST', `/manage/groups/${GROUP_ID}/settings/disableSSO`, {
+          statusCode: 200,
+        }).as('disableSSO')
+
+        cy.intercept('GET', `/manage/groups/${GROUP_ID}/settings/sso`, {
+          statusCode: 200,
+          body: {
+            entryPoint: 'entrypoint',
+            certificate: 'cert',
+            signatureAlgorithm: 'sha1',
+            userIdAttribute: 'email',
+            enabled: false,
+          },
+        }).as('sso')
+
+        cy.get('.modal-dialog').within(() => {
+          cy.findByRole('button', { name: 'Disable SSO' }).click()
+        })
+        cy.get('.modal-dialog').should('not.exist')
+        cy.get('.group-settings-sso-enable').within(() => {
+          cy.get('.switch-input').within(() => {
+            cy.get('.invisible-input').should('not.be.checked')
+          })
+        })
+      })
+    })
   })
 })