Web: Disabled security settings.

2022-09-16 15:21:17 +03:00 · 2022-09-16 15:21:17 +03:00 · 19113eb32d
commit 19113eb32d
parent e59984bc5c
5 changed files with 72 additions and 16 deletions
--- a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditContent.js
@ -3,6 +3,7 @@ import React from "react";
 import Text from "@docspace/components/text";
 import moment from "moment";
 import styled from "styled-components";
+import { UnavailableStyles } from "../../../../utils/commonSettingsStyles";

 const StyledRowContent = styled(RowContent)`
  .row-main-container-wrapper {
@ -10,9 +11,11 @@ const StyledRowContent = styled(RowContent)`
    justify-content: space-between;
    width: 100%;
  }
+
+  ${(props) => props.isSettingNotPaid && UnavailableStyles}
 `;

-export const AuditContent = ({ sectionWidth, item }) => {
+export const AuditContent = ({ sectionWidth, item, isSettingNotPaid }) => {
  const DATE_FORMAT = "YYYY-MM-DD LT";
  const to = moment(item.date).local();

@ -22,9 +25,15 @@ export const AuditContent = ({ sectionWidth, item }) => {
      sideColor="#A3A9AE"
      nameColor="#D0D5DA"
      sectionWidth={sectionWidth}
+      isSettingNotPaid={isSettingNotPaid}
    >
      <div className="user-container-wrapper">
-        <Text fontWeight={600} fontSize="14px" isTextOverflow={true}>
+        <Text
+          fontWeight={600}
+          fontSize="14px"
+          isTextOverflow={true}
+          className="settings_unavailable"
+        >
          {item.user}
        </Text>
      </div>
@ -34,10 +43,16 @@ export const AuditContent = ({ sectionWidth, item }) => {
        fontSize="12px"
        fontWeight={600}
        truncate={true}
+        className="settings_unavailable"
      >
        {dateStr}
      </Text>
-      <Text fontSize="12px" as="div" fontWeight={600}>
+      <Text
+        fontSize="12px"
+        as="div"
+        fontWeight={600}
+        className="settings_unavailable"
+      >
        {`${item.room} | ${item.action}`}
      </Text>
    </StyledRowContent>
--- a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableContainer.js
@ -6,7 +6,14 @@ import TableHeader from "./TableHeader";
 import TableBody from "@docspace/components/table-container/TableBody";
 import { isMobile } from "react-device-detect";

-const Table = ({ auditTrailUsers, sectionWidth, viewAs, setViewAs, theme }) => {
+const Table = ({
+  auditTrailUsers,
+  sectionWidth,
+  viewAs,
+  setViewAs,
+  theme,
+  isSettingNotPaid,
+}) => {
  const ref = useRef(null);
  useEffect(() => {
    if (!sectionWidth) return;
@ -22,7 +29,12 @@ const Table = ({ auditTrailUsers, sectionWidth, viewAs, setViewAs, theme }) => {
      <TableHeader sectionWidth={sectionWidth} containerRef={ref} />
      <TableBody>
        {auditTrailUsers.map((item) => (
-          <TableRow theme={theme} key={item.id} item={item} />
+          <TableRow
+            theme={theme}
+            key={item.id}
+            item={item}
+            isSettingNotPaid={isSettingNotPaid}
+          />
        ))}
      </TableBody>
    </TableContainer>
--- a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableRow.js
@ -5,6 +5,7 @@ import TableCell from "@docspace/components/table-container/TableCell";
 import Text from "@docspace/components/text";
 import styled from "styled-components";
 import moment from "moment";
+import { UnavailableStyles } from "../../../../utils/commonSettingsStyles";

 const StyledPeopleRow = styled(TableRow)`
  .table-container_cell {
@ -29,10 +30,11 @@ const StyledPeopleRow = styled(TableRow)`
  .table-cell_username {
    margin-right: 12px;
  }
+  ${(props) => props.isSettingNotPaid && UnavailableStyles}
 `;

 const PeopleTableRow = (props) => {
-  const { item, contextOptionsProps } = props;
+  const { item, contextOptionsProps, isSettingNotPaid } = props;
  const { email, position } = item;

  const DATE_FORMAT = "YYYY-MM-DD LT";
@ -41,7 +43,11 @@ const PeopleTableRow = (props) => {
  const dateStr = to.format(DATE_FORMAT);

  return (
-    <StyledPeopleRow key={item.id} {...contextOptionsProps}>
+    <StyledPeopleRow
+      key={item.id}
+      {...contextOptionsProps}
+      isSettingNotPaid={isSettingNotPaid}
+    >
      <TableCell>
        <Text
          type="page"
@ -49,6 +55,7 @@ const PeopleTableRow = (props) => {
          fontSize="12px"
          fontWeight={600}
          truncate
+          className="settings_unavailable"
        >
          {item.user}
        </Text>
@ -60,6 +67,7 @@ const PeopleTableRow = (props) => {
          fontSize="12px"
          fontWeight={600}
          truncate
+          className="settings_unavailable"
        >
          {dateStr}
        </Text>
@ -71,6 +79,7 @@ const PeopleTableRow = (props) => {
          fontSize="12px"
          fontWeight={600}
          isTextOverflow
+          className="settings_unavailable"
        >
          {item.room}
        </Text>
@ -83,6 +92,7 @@ const PeopleTableRow = (props) => {
          fontSize="12px"
          fontWeight={600}
          isTextOverflow
+          className="settings_unavailable"
        >
          {item.action}
        </Text>
--- a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/index.js
@ -19,6 +19,7 @@ const AuditTrail = (props) => {
    getLifetimeAuditSettings,
    getAuditTrailReport,
    securityLifetime,
+    isAuditAvailable,
  } = props;

  useEffect(() => {
@ -40,11 +41,15 @@ const AuditTrail = (props) => {
                  theme={theme}
                  auditTrailUsers={auditTrailUsers}
                  sectionWidth={context.sectionWidth}
+                  isSettingNotPaid={!isAuditAvailable}
                />
              </>
            ) : (
              <>
-                <AuditRowContainer sectionWidth={context.sectionWidth} />
+                <AuditRowContainer
+                  sectionWidth={context.sectionWidth}
+                  isSettingNotPaid={!isAuditAvailable}
+                />
              </>
            )
          }
@ -69,6 +74,7 @@ const AuditTrail = (props) => {
          content={getContent()}
          downloadReport={t("DownloadReportBtn")}
          getReport={getAuditTrailReport}
+          isSettingNotPaid={!isAuditAvailable}
        />
      )}
    </>
@ -85,8 +91,9 @@ export default inject(({ setup, auth }) => {
    getAuditTrailReport,
    securityLifetime,
  } = setup;
-  const { theme } = auth.settingsStore;
-
+  const { settingsStore, currentQuotaStore } = auth;
+  const { theme } = settingsStore;
+  const { isAuditAvailable } = currentQuotaStore;
  return {
    getAuditTrail,
    auditTrailUsers: security.auditTrail.users,
@ -96,5 +103,6 @@ export default inject(({ setup, auth }) => {
    setLifetimeAuditSettings,
    getAuditTrailReport,
    securityLifetime,
+    isAuditAvailable,
  };
 })(withTranslation("Settings")(withRouter(AuditTrail)));
--- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
@ -6,8 +6,9 @@ import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
 import styled from "styled-components";
 import Button from "@docspace/components/button";
 import toastr from "@docspace/components/toast/toastr";
-
+import { UnavailableStyles } from "../../../utils/commonSettingsStyles";
 import { hugeMobile, tablet } from "@docspace/components/utils/device";
+import Badge from "@docspace/components/badge";

 const StyledTextInput = styled(TextInput)`
  margin-top: 4px;
@ -74,6 +75,8 @@ const MainContainer = styled.div`
      width: 100%;
    }
  }
+
+  ${(props) => props.isSettingNotPaid && UnavailableStyles}
 `;

 const HistoryMainContent = (props) => {
@ -92,6 +95,7 @@ const HistoryMainContent = (props) => {
    content,
    downloadReport,
    getReport,
+    isSettingNotPaid,
  } = props;

  const [lifeTime, setLifeTime] = useState(String(lifetime) || "180");
@ -149,14 +153,18 @@ const HistoryMainContent = (props) => {
  }, [lifeTime]);

  return (
-    <MainContainer>
+    <MainContainer isSettingNotPaid={isSettingNotPaid}>
+      {isSettingNotPaid && <Badge backgroundColor="#EDC409" label="Paid" />}
      <div className="main-wrapper">
-        <Text fontSize="13px" color="#657077">
+        <Text fontSize="13px" color="#657077" className="settings_unavailable">
          {subHeader}
        </Text>
-        <Text className="latest-text">{latestText} </Text>
+        <Text className="latest-text settings_unavailable">{latestText} </Text>

-        <label className="storage-label" htmlFor="storage-period">
+        <label
+          className="storage-label settings_unavailable"
+          htmlFor="storage-period"
+        >
          {storagePeriod}
        </label>
        <StyledTextInput
@ -165,6 +173,7 @@ const HistoryMainContent = (props) => {
          size="base"
          id="storage-period"
          type="text"
+          isDisabled={isSettingNotPaid}
        />
        <SaveCancelButtons
          className="save-cancel"
@ -175,8 +184,9 @@ const HistoryMainContent = (props) => {
          showReminder={showReminder}
          displaySettings={true}
          hasScroll={false}
+          isDisabled={isSettingNotPaid}
        />
-        <Text className="latest-text">{downloadText}</Text>
+        <Text className="latest-text settings_unavailable">{downloadText}</Text>
      </div>
      {content}
      <Button
@ -186,6 +196,7 @@ const HistoryMainContent = (props) => {
        size="normal"
        minwidth="auto"
        onClick={() => getReport()}
+        isDisabled={isSettingNotPaid}
      />
    </MainContainer>
  );