Merge pull request #686 from etn-ccis/dev

Publish v6.0.0
etn-ccis · Dec 23, 2024 · 52c91c1 · 52c91c1
2 parents 348bb21 + fef9bf6
commit 52c91c1
Show file tree

Hide file tree

Showing 42 changed files with 9,629 additions and 9,200 deletions.
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -2,16 +2,24 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy to Firebase Hosting on merge
-'on':
-    push:
-        branches:
-            - master
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  pull-requests: write
+  contents: read
+  checks: write
+
 jobs:
     build_and_deploy:
         runs-on: ubuntu-latest
+        env:
+          OKTA_APP_ISSUER: ${{secrets.OKTA_APP_ISSUER}}
         steps:
-            - uses: actions/checkout@v2
-            - run: cd login-workflow && yarn install:dependencies && yarn link:workflow && cd example && yarn && yarn build
+            - uses: actions/checkout@v4
+            - run: cd login-workflow && yarn install:dependencies && yarn link:workflow && cd example && yarn && echo "${{ secrets.OKTA_APP_ISSUER }}" > .env.local && yarn build
             - uses: FirebaseExtended/action-hosting-deploy@v0
               with:
                   entryPoint: './login-workflow'

diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -2,14 +2,23 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy to Firebase Hosting on PR
-'on': pull_request
+
+on: pull_request
+
+permissions:
+  pull-requests: write
+  contents: read
+  checks: write
+
 jobs:
     build_and_preview:
         if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
         runs-on: ubuntu-latest
+        env:
+          OKTA_APP_ISSUER: ${{secrets.OKTA_APP_ISSUER}}
         steps:
-            - uses: actions/checkout@v2
-            - run: cd login-workflow && yarn install:dependencies && yarn link:workflow && cd example && yarn && yarn build
+            - uses: actions/checkout@v4
+            - run: cd login-workflow && yarn install:dependencies && yarn link:workflow && cd example && yarn && echo "${{ secrets.OKTA_APP_ISSUER }}" > .env.local && yarn build
             - uses: FirebaseExtended/action-hosting-deploy@v0
               with:
                   entryPoint: './login-workflow'

diff --git a/login-workflow/CHANGELOG.md b/login-workflow/CHANGELOG.md
@@ -5,24 +5,42 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v6.0.0 (December 23, 2024)
+
+### Changed
+
+-   Updated styles to use the new MUI v6 and requires [brightlayer-ui react-components 7.0.0](https://www.npmjs.com/package/@brightlayer-ui/react-components/v/7.0.0) and [brightlayer-ui react-theme 8.0.0](https://www.npmjs.com/package/@brightlayer-ui/react-themes/v/8.0.0)
+
+### Fixed
+
+-   Update the doc for Okta login authentication ([#658](https://github.com/etn-ccis/blui-react-workflows/issues/658))
+-   Update unstable_composeClasses imports ([#677](https://github.com/etn-ccis/blui-react-workflows/issues/677))
+-   WorkflowCard components warnings ([#684](https://github.com/etn-ccis/blui-react-workflows/issues/684))
+
+## v5.0.1 (November 26, 2024)
+
+### Fixed
+
+-   Issue with ChangePasswordDialog `errorDisplayConfig` ([#656](https://github.com/etn-ccis/blui-react-workflows/issues/656)).
+-   Issue with `errorDisplayConfig` in screens unable to display the custom error ([#664](https://github.com/etn-ccis/blui-react-workflows/issues/664)).
+
 ## v5.0.0 (September 11, 2024)
 
 ### Added
 
--   Okta redirect-compatible login screen. 
--   Error Manager for ChangePasswordDialog ([#612](https://github.com/etn-ccis/blui-react-workflows/issues/612)). 
+-   Okta redirect-compatible login screen.
+-   Error Manager for ChangePasswordDialog ([#612](https://github.com/etn-ccis/blui-react-workflows/issues/612)).
 -   BLUI class names for ChangePasswordDialog ([#600](https://github.com/etn-ccis/blui-react-workflows/issues/600)).
--  SX style overrides on full screens ([#599](https://github.com/etn-ccis/blui-react-workflows/issues/599)).
+-   SX style overrides on full screens ([#599](https://github.com/etn-ccis/blui-react-workflows/issues/599)).
 
-### Fixed 
+### Fixed
 
--  Reload EULA should not be tied to checkbox status ([#549](https://github.com/etn-ccis/blui-react-workflows/issues/549)).
--  Updated password validation callback function ([#560]https://github.com/etn-ccis/blui-react-workflows/issues/560).
+-   Reload EULA should not be tied to checkbox status ([#549](https://github.com/etn-ccis/blui-react-workflows/issues/549)).
+-   Updated password validation callback function ([#560](https://github.com/etn-ccis/blui-react-workflows/issues/560)).
 
 ### Changed
 
--  Eliminate `WorkflowCardFinishState` and introduce `EmptyStateProps` in the success screen([#552](https://github.com/etn-ccis/blui-react-workflows/issues/552)).
-
+-   Eliminate `WorkflowCardFinishState` and introduce `EmptyStateProps` in the success screen([#552](https://github.com/etn-ccis/blui-react-workflows/issues/552)).
 
 ## v4.0.3 (May 9, 2024)
 

diff --git a/login-workflow/README.md b/login-workflow/README.md
@@ -66,6 +66,24 @@ In short, you will need to:
 -   [Components & APIs](https://github.com/etn-ccis/blui-react-workflows/tree/master/login-workflow/docs/components/README.md)
 -   [Screens](https://github.com/etn-ccis/blui-react-workflows/tree/master/login-workflow/docs/screens/README.md)
 
+# Migrating from v5 => v6
+
+The migration to v6 from v5 should be very straightforward — all usage remains the same if you are using the custom login flow. However, version 6 has introduced new MUI v6. And two new peer dependencies that you will need to install:
+
+```
+"@mui/icons-material": "^6.1.4",
+"@mui/material": "^6.1.4",
+```
+
+# Migrating from v4 => v5
+
+The migration to v5 from v4 should be very straightforward — all usage remains the same if you are using the custom login flow. However, version 5 has two new peer dependencies that you will need to install:
+
+```
+"@okta/okta-auth-js": "^7.7.0",
+"@okta/okta-react": "^6.9.0",
+```
+
 # Migrating from v3 => v4
 
 We have listened to your feedback and version 4 of this library is a significant rewrite that aims to address many requests for greater flexibility and customization of the workflows.

diff --git a/login-workflow/docs/authentication-workflow.md b/login-workflow/docs/authentication-workflow.md
@@ -25,20 +25,37 @@ Here is an example of how you would set up the Okta Redirect Login workflow usin
 
 Each feature/screen from the Okta Auth Workflow that you wish to use should be rendered on a separate route.
 
+We have to wrap all of the application routes inside the `Security` component from `@okta/okta-react` to make the Okta authentication workflow.
+
 ```tsx
-<Routes>
-    <Route
-        element={
-            <OktaAuthContextProvider
-                language={'en'}
-                navigate={navigate}
-                routeConfig={{}}
-            >
-                <OktaRedirectLogin />
-            </OktaAuthContextProvider>
-        }
-    />
-</Routes>
+import { Security } from '@okta/okta-react';
+import OktaAuth, { OktaAuthOptions } from '@okta/okta-auth-js';
+
+const oktaAuth = new OktaAuth(oktaConfig as OktaAuthOptions);
+
+const RouteExample = () => {
+    const restoreOriginalUri = (): void => {};
+
+    return (
+        <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
+            <Routes>
+                <Route
+                    element={
+                        <OktaAuthContextProvider
+                            language={'en'}
+                            navigate={navigate}
+                            routeConfig={{}}
+                        >
+                            <OktaRedirectLogin />
+                        </OktaAuthContextProvider>
+                    }
+                />
+
+            </Routes>
+        </Security>
+    );
+};
+
 ```
 
 For a detailed explanation of setting up routes, see the [Routing](./routing.md) guide.

diff --git a/login-workflow/example-vite/package.json b/login-workflow/example-vite/package.json
@@ -17,12 +17,12 @@
         "@brightlayer-ui/colors": "^3.0.1",
         "@brightlayer-ui/icons-mui": "^3.3.0",
         "@brightlayer-ui/react-auth-workflow": "^4.0.2",
-        "@brightlayer-ui/react-components": "^6.1.2",
-        "@brightlayer-ui/react-themes": "^7.1.0",
+        "@brightlayer-ui/react-components": "7.0.0",
+        "@brightlayer-ui/react-themes": "^8.0.0",
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.10.8",
-        "@mui/icons-material": "^5.11.11",
-        "@mui/material": "^5.10.15",
+        "@mui/icons-material": "^6.1.4",
+        "@mui/material": "^6.1.4",
         "date-fns": "^3.0.6",
         "i18next": "^23.7.13",
         "i18next-browser-languagedetector": "^7.2.0",

diff --git a/login-workflow/example-vite/src/main.tsx b/login-workflow/example-vite/src/main.tsx
@@ -1,15 +1,16 @@
-import { ThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import React from 'react';
 import { App } from './App';
 import CssBaseline from '@mui/material/CssBaseline';
-import * as BLUIThemes from '@brightlayer-ui/react-themes';
+import { blueThemes } from '@brightlayer-ui/react-themes';
 import { createRoot } from 'react-dom/client';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 createRoot(document.getElementById('root')!).render(
     // Enable Strict Mode for more error checking
     <React.StrictMode>
         <StyledEngineProvider injectFirst>
-            <ThemeProvider theme={createTheme(BLUIThemes.blue)}>
+            <ThemeProvider theme={blueThemes}>
                 <CssBaseline />
                 <App />
             </ThemeProvider>