Configurable Session timeout for Community

package.json

@@ -20,6 +20,7 @@
     "@mui/x-data-grid": "^7.11.0",
     "@mui/x-date-pickers": "^7.11.1",
     "@pdfme/generator": "^1.2.6",
+    "@testing-library/react-hooks": "^8.0.1",
     "bootstrap": "^5.3.3",
     "customize-cra": "^1.0.0",
     "dayjs": "^1.11.12",
@@ -50,7 +51,7 @@
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.3",
-    "react-tooltip": "^5.27.1",
+    "react-tooltip": "^5.28.0",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "sanitize-html": "^2.13.0",

schema.graphql

@@ -161,6 +161,15 @@ input CommentInput {
   text: String!
 }
 
+type Community {
+  _id: ID!
+  logoUrl: String
+  name: String!
+  socialMediaUrls: SocialMediaUrls
+  timeout: Int
+  websiteLink: String
+}
+
 union ConnectionError = InvalidCursor | MaximumValueError
 
 type ConnectionPageInfo {
@@ -769,6 +778,7 @@ type Mutation {
   ): Organization!
   updatePluginStatus(id: ID!, orgId: ID!): Plugin!
   updatePost(data: PostUpdateInput, id: ID!): Post!
+  updateSessionTimeout(timeout: Int!): Boolean!
   updateUserPassword(data: UpdateUserPasswordInput!): UserData!
   updateUserProfile(data: UpdateUserInput, file: String): User!
   updateUserRoleInOrganization(

src/GraphQl/Mutations/mutations.ts

@@ -646,6 +646,12 @@ export const UPDATE_COMMUNITY = gql`
   }
 `;
 
+export const UPDATE_SESSION_TIMEOUT = gql`
+  mutation updateSessionTimeout($timeout: Int!) {
+    updateSessionTimeout(timeout: $timeout)
+  }
+`;
+
 export const RESET_COMMUNITY = gql`
   mutation resetCommunity {
     resetCommunity

src/GraphQl/Queries/Queries.ts

@@ -777,6 +777,14 @@ export const GET_COMMUNITY_DATA = gql`
   }
 `;
 
+export const GET_COMMUNITY_SESSION_TIMEOUT_DATA = gql`
+  query getCommunityData {
+    getCommunityData {
+      timeout
+    }
+  }
+`;
+
 // get the list of Action Item Categories
 export { ACTION_ITEM_CATEGORY_LIST } from './ActionItemCategoryQueries';
 

src/components/ProfileDropdown/ProfileDropdown.test.tsx

@@ -9,6 +9,7 @@ import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import useLocalStorage from 'utils/useLocalstorage';
 import { I18nextProvider } from 'react-i18next';
 import i18nForTest from 'utils/i18nForTest';
+import { GET_COMMUNITY_SESSION_TIMEOUT_DATA } from 'GraphQl/Queries/Queries';
 
 const { setItem } = useLocalStorage();
 const MOCKS = [
@@ -22,6 +23,19 @@ const MOCKS = [
       },
     },
   },
+  {
+    request: {
+      query: GET_COMMUNITY_SESSION_TIMEOUT_DATA,
+    },
+    result: {
+      data: {
+        getCommunityData: {
+          timeout: 30,
+        },
+      },
+    },
+    delay: 1000,
+  },
 ];
 
 jest.mock('react-toastify', () => ({
@@ -104,13 +118,16 @@ describe('ProfileDropdown Component', () => {
         </BrowserRouter>
       </MockedProvider>,
     );
+
     await act(async () => {
       userEvent.click(screen.getByTestId('togDrop'));
     });
 
     userEvent.click(screen.getByTestId('logoutBtn'));
+
     expect(global.window.location.pathname).toBe('/');
   });
+
   describe('Member screen routing testing', () => {
     test('member screen', async () => {
       render(

src/components/ProfileDropdown/ProfileDropdown.tsx

@@ -7,6 +7,7 @@ import styles from './ProfileDropdown.module.css';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
 import { useMutation } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
+import useSession from 'utils/useSession';
 
 /**
  * Renders a profile dropdown menu for the user.
@@ -21,6 +22,7 @@ import { useTranslation } from 'react-i18next';
  * @returns JSX.Element - The profile dropdown menu.
  */
 const profileDropdown = (): JSX.Element => {
+  const { endSession } = useSession();
   const { t: tCommon } = useTranslation('common');
   const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
   const { getItem } = useLocalStorage();
@@ -45,6 +47,7 @@ const profileDropdown = (): JSX.Element => {
       console.error('Error revoking refresh token:', error);
     }
     localStorage.clear();
+    endSession();
     navigate('/');
   };
   const MAX_NAME_LENGTH = 20;

src/components/UpdateSession/UpdateSession.css

@@ -0,0 +1,96 @@
+/* Card styles */
+.update-timeout-card {
+  width: 700px;
+  background: #ffffff;
+  border: none;
+  border-radius: 16px;
+  filter: drop-shadow(0px 4px 15.3px rgba(0, 0, 0, 0.08));
+  padding: 20px;
+}
+
+.update-timeout-card-header {
+  background: none;
+  padding: 16px;
+  border-bottom: none;
+}
+
+.update-timeout-card-title {
+  font-family: 'Lato', sans-serif;
+  font-weight: 600;
+  font-size: 24px;
+  color: #000000;
+}
+
+.update-timeout-card-body {
+  padding: 20px;
+}
+
+.update-timeout-current {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #000000;
+  margin-bottom: 20px; /* Increased margin to create more space */
+}
+
+.update-timeout-label {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #000000;
+  margin-bottom: 10px; /* Keep the same margin to maintain spacing with the slider */
+}
+
+.update-timeout-labels-container {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.update-timeout-value {
+  color: #14ae5c;
+  font-weight: bold;
+}
+
+.update-timeout-slider-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  color: #757575;
+}
+
+.update-timeout-button-container {
+  display: flex;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.update-timeout-button {
+  width: 112px;
+  height: 36px;
+  background: #31bb6b;
+  border-radius: 6px;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  box-shadow: none;
+}
+
+.update-timeout-button:hover {
+  background-color: #28a745;
+  border-color: #28a745;
+  box-shadow: none;
+}
+
+.update-timeout-button:active {
+  transform: scale(0.98);
+}
+
+.update-timeout-slider-container {
+  position: relative;
+}