IO-2311 fixed tile height

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -7,7 +7,12 @@ import { selectSelectedConversation } from "../../redux/messaging/messaging.sele
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import { List as VirtualizedList, AutoSizer } from "react-virtualized";
+import {
+  List as VirtualizedList,
+  AutoSizer,
+  CellMeasurerCache,
+  CellMeasurer,
+} from "react-virtualized";
 
 import "./chat-conversation-list.styles.scss";
 
@@ -33,48 +38,64 @@ function ChatConversationListComponent({
     []
   );
 
-  const rowRenderer = ({ index, key, style }) => {
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 60,
+  });
+
+  const rowRenderer = ({ index, key, style, parent }) => {
     const item = conversationList[index];
 
     return (
-      <List.Item
+      <CellMeasurer
         key={key}
-        onClick={() => setSelectedConversation(item.id)}
-        className={`chat-list-item ${
-          item.id === selectedConversation
-            ? "chat-list-selected-conversation"
-            : null
-        }`}
-        style={style}
+        cache={cache}
+        parent={parent}
+        columnIndex={0}
+        rowIndex={index}
       >
-        <div sryle={{ display: "inline-block" }}>
-          {item.label && <div className="chat-name">{item.label}</div>}
-          {item.job_conversations.length > 0 ? (
-            <div className="chat-name">
-              {item.job_conversations.map((j, idx) => (
-                <div key={idx}>
-                  <OwnerNameDisplay ownerObject={j.job} />
-                </div>
-              ))}
-            </div>
-          ) : (
-            <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-          )}
-        </div>
-        <div sryle={{ display: "inline-block" }}>
-          <div>
-            {item.job_conversations.length > 0
-              ? item.job_conversations.map((j, idx) => (
-                  <Tag key={idx} className="ro-number-tag">
-                    {j.job.ro_number}
-                  </Tag>
-                ))
-              : null}
+        <List.Item
+          onClick={() => setSelectedConversation(item.id)}
+          className={`chat-list-item ${
+            item.id === selectedConversation
+              ? "chat-list-selected-conversation"
+              : null
+          }`}
+          style={style}
+        >
+          <div
+            style={{
+              display: "inline-block",
+            }}
+          >
+            {item.label && <div className="chat-name">{item.label}</div>}
+            {item.job_conversations.length > 0 ? (
+              <div className="chat-name">
+                {item.job_conversations.map((j, idx) => (
+                  <div key={idx}>
+                    <OwnerNameDisplay ownerObject={j.job} />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+            )}
           </div>
-          <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
-        </div>
-        <Badge count={item.messages_aggregate.aggregate.count || 0} />
-      </List.Item>
+          <div style={{ display: "inline-block" }}>
+            <div>
+              {item.job_conversations.length > 0
+                ? item.job_conversations.map((j, idx) => (
+                    <Tag key={idx} className="ro-number-tag">
+                      {j.job.ro_number}
+                    </Tag>
+                  ))
+                : null}
+            </div>
+            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
+          </div>
+          <Badge count={item.messages_aggregate.aggregate.count || 0} />
+        </List.Item>
+      </CellMeasurer>
     );
   };
 
@@ -86,7 +107,7 @@ function ChatConversationListComponent({
             height={height}
             width={width}
             rowCount={conversationList.length}
-            rowHeight={60}
+            rowHeight={cache.rowHeight}
             rowRenderer={rowRenderer}
             onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
               if (scrollTop + clientHeight === scrollHeight) {

client/src/components/update-alert/update-alert.component.jsx

@@ -1,72 +0,0 @@
-import { Alert, Button, Space } from "antd";
-import i18n from "i18next";
-import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectUpdateAvailable } from "../../redux/application/application.selectors";
-import { AlertOutlined } from "@ant-design/icons";
-import { useTranslation } from "react-i18next";
-import { setUpdateAvailable } from "../../redux/application/application.actions";
-import { store } from "../../redux/store";
-import * as serviceWorkerRegistration from "../../serviceWorkerRegistration";
-
-let globalRegistration;
-
-const mapStateToProps = createStructuredSelector({
-  updateAvailable: selectUpdateAvailable,
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-export default connect(mapStateToProps, mapDispatchToProps)(UpdateAlert);
-
-export function UpdateAlert({ updateAvailable }) {
-  const { t } = useTranslation();
-  if (!updateAvailable) return null;
-  return (
-    <Alert
-      message={t("general.messages.newversiontitle")}
-      showIcon
-      icon={<AlertOutlined />}
-      description={t("general.messages.newversionmessage")}
-      closable={false}
-      type="warning"
-      action={
-        <Space flex>
-          <Button
-            onClick={async () => {
-              window.open("https://imex-online.noticeable.news/", "_blank");
-            }}
-          >
-            {i18n.t("general.actions.viewreleasenotes")}
-          </Button>
-          <Button
-            type="primary"
-            onClick={async () => {
-              if (globalRegistration && globalRegistration.waiting) {
-                await globalRegistration.unregister();
-                // Makes Workbox call skipWaiting()
-                globalRegistration.waiting.postMessage({
-                  type: "SKIP_WAITING",
-                });
-                // Once the service worker is unregistered, we can reload the page to let
-                // the browser download a fresh copy of our app (invalidating the cache)
-                window.location.reload();
-              }
-            }}
-          >
-            {i18n.t("general.actions.refresh")}
-          </Button>
-        </Space>
-      }
-    />
-  );
-}
-
-const onServiceWorkerUpdate = (registration) => {
-  console.log("onServiceWorkerUpdate", registration);
-  globalRegistration = registration;
-  store.dispatch(setUpdateAvailable(true));
-};
-
-serviceWorkerRegistration.register({ onUpdate: onServiceWorkerUpdate });

client/src/pages/manage/manage.page.component.jsx

@@ -25,7 +25,6 @@ import {
 import * as Sentry from "@sentry/react";
 
 import "./manage.page.styles.scss";
-import UpdateAlert from "../../components/update-alert/update-alert.component";
 
 const ManageRootPage = lazy(() =>
   import("../manage-root/manage-root.page.container")
@@ -395,7 +394,6 @@ export function Manage({ match, conflict, bodyshop }) {
     <>
       <ChatAffixContainer />
       <Layout className="layout-container">
-        <UpdateAlert />
         <HeaderContainer />
 
         <Content className="content-container">

client/src/pages/manage/manage.page.container.jsx

@@ -6,7 +6,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { setBodyshop } from "../../redux/user/user.actions";
-//import "../../utils/RegisterSw";
+import "../../utils/RegisterSw";
 import ManagePage from "./manage.page.component";
 
 const mapDispatchToProps = (dispatch) => ({

client/src/pages/tech/tech.page.component.jsx

@@ -12,7 +12,6 @@ import TechSider from "../../components/tech-sider/tech-sider.component";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import "./tech.page.styles.scss";
-import UpdateAlert from "../../components/update-alert/update-alert.component";
 const TimeTicketModalContainer = lazy(() =>
   import("../../components/time-ticket-modal/time-ticket-modal.container")
 );
@@ -57,9 +56,7 @@ export function TechPage({ technician, match }) {
       <TechSider />
       <Layout>
         {technician ? null : <Redirect to={`${match.path}/login`} />}
-        <UpdateAlert />
         <TechHeader />
-
         <Content className="tech-content-container">
           <ErrorBoundary>
             <Suspense

client/src/pages/tech/tech.page.container.jsx

@@ -9,7 +9,7 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
 import { useTranslation } from "react-i18next";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { createStructuredSelector } from "reselect";
-//import "../../utils/RegisterSw";
+import "../../utils/RegisterSw";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,

client/src/redux/application/application.actions.js

@@ -62,8 +62,3 @@ export const setProblemJobs = (problemJobs) => ({
   type: ApplicationActionTypes.SET_PROBLEM_JOBS,
   payload: problemJobs,
 });
-
-export const setUpdateAvailable = (isUpdateAvailable) => ({
-  type: ApplicationActionTypes.SET_UPDATE_AVAILABLE,
-  payload: isUpdateAvailable,
-});

client/src/redux/application/application.reducer.js

@@ -3,7 +3,6 @@ import ApplicationActionTypes from "./application.types";
 const INITIAL_STATE = {
   loading: false,
   online: true,
-  updateAvailable: false,
   breadcrumbs: [],
   recentItems: [],
   selectedHeader: "home",
@@ -19,11 +18,6 @@ const INITIAL_STATE = {
 
 const applicationReducer = (state = INITIAL_STATE, action) => {
   switch (action.type) {
-    case ApplicationActionTypes.SET_UPDATE_AVAILABLE:
-      return {
-        ...state,
-        updateAvailable: action.payload,
-      };
     case ApplicationActionTypes.SET_SELECTED_HEADER:
       return {
         ...state,

client/src/redux/application/application.selectors.js

@@ -48,7 +48,3 @@ export const selectProblemJobs = createSelector(
   [selectApplication],
   (application) => application.problemJobs
 );
-export const selectUpdateAvailable = createSelector(
-  [selectApplication],
-  (application) => application.updateAvailable
-);

client/src/redux/application/application.types.js

@@ -12,6 +12,5 @@ const ApplicationActionTypes = {
   SET_ONLINE_STATUS: "SET_ONLINE_STATUS",
   INSERT_AUDIT_TRAIL: "INSERT_AUDIT_TRAIL",
   SET_PROBLEM_JOBS: "SET_PROBLEM_JOBS",
-  SET_UPDATE_AVAILABLE: "SET_UPDATE_AVAILABLE"
 };
 export default ApplicationActionTypes;

client/src/translations/en_us/common.json

@@ -1118,7 +1118,7 @@
 			},
 			"messages": {
 				"exception": "$t(titles.app) has encountered an error. Please try again. If the problem persists, please submit a support ticket or contact us.",
-				"newversionmessage": "Click refresh to update to the latest available version of ImEX Online.  Please make sure all other tabs and windows are closed.",
+				"newversionmessage": "Click refresh below to update to the latest available version of ImEX Online.  Please make sure all other tabs and windows are closed.",
 				"newversiontitle": "New version of ImEX Online Available",
 				"noacctfilepath": "There is no accounting file path set. You will not be able to export any items.",
 				"nofeatureaccess": "You do not have access to this feature of ImEX Online.  Please contact support to request a license for this feature.",

client/src/utils/RegisterSw.js

@@ -3,7 +3,6 @@ import { Button, notification, Space } from "antd";
 import i18n from "i18next";
 import React from "react";
 import * as serviceWorkerRegistration from "../serviceWorkerRegistration";
-import { store } from "../redux/store";
 
 const onServiceWorkerUpdate = (registration) => {
   console.log("onServiceWorkerUpdate", registration);
@@ -34,9 +33,6 @@ const onServiceWorkerUpdate = (registration) => {
       </Button>
     </Space>
   );
-
-  store.dispatch()
-
   notification.open({
     icon: <AlertOutlined />,
     message: i18n.t("general.messages.newversiontitle"),