Feat/text placeholder limits

src/app/components/Dialogs/CookieDialog/common/message.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import Box from "@material-ui/core/Box";
 import styled from "styled-components/macro";
 import Typography from "@material-ui/core/Typography";
-import ContainedButton from "app/components/Buttons/ContainedButton";
 
 const MessageContainer = styled((props) => <Box {...props} />)`
   align-items: center;
@@ -61,8 +59,23 @@ export const Message = (props: MessageProps) => {
           }
         `}
       >
-        The website makes use of <Link to={`#`}>cookies</Link>. Review{" "}
-        <Link to={"#"}>data privacy</Link> for more details.
+        The website makes use of{" "}
+        <a
+          href={`https://drive.google.com/file/d/1andhlQEoaEq5qDxMbtnApXiZborsg-bG/view?usp=drive_link`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          cookies
+        </a>
+        . Review{" "}
+        <a
+          href={`https://drive.google.com/file/d/1andhlQEoaEq5qDxMbtnApXiZborsg-bG/view?usp=drive_link`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          data privacy
+        </a>{" "}
+        for more details.
       </Typo>
       <Button data-cy="cookie-btn" type="button" onClick={props.onClose}>
         {" "}

src/app/modules/chart-module/index.tsx

@@ -50,6 +50,7 @@ export default function ChartModule() {
   );
   const [rawViz, setRawViz] = React.useState<any>(null);
   const [chartName, setChartName] = React.useState("My First Chart");
+  const [isPreviewView, setIsPreviewView] = React.useState(false);
 
   const chartType = useStoreState((state) => state.charts.chartType.value);
   const mapping = useStoreState((state) => state.charts.mapping.value);
@@ -331,6 +332,7 @@ export default function ChartModule() {
         framesArray={[]}
         headerDetails={{} as IHeaderDetails}
         reportName=""
+        isPreviewView={isPreviewView}
       />
       <ChartModuleToolBox
         rawViz={rawViz}
@@ -454,6 +456,7 @@ export default function ChartModule() {
                 renderedChartSsr={renderedChartSsr}
                 renderedChartMappedData={renderedChartMappedData}
                 editable={isEditMode || (page === "new" && !view)}
+                setIsPreviewView={setIsPreviewView}
               />
             </Route>
             <Route path="/chart/:page">
@@ -465,6 +468,7 @@ export default function ChartModule() {
                 renderedChartSsr={renderedChartSsr}
                 renderedChartMappedData={renderedChartMappedData}
                 editable={isEditMode || (page === "new" && !view)}
+                setIsPreviewView={setIsPreviewView}
               />
             </Route>
             <Route path="*">

src/app/modules/chart-module/routes/preview-theme/data.ts

@@ -6,6 +6,7 @@ export interface ChartBuilderPreviewThemeProps {
   renderedChartSsr: boolean;
   renderedChartMappedData: any;
   setVisualOptions: (value: any) => void;
+  setIsPreviewView: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export interface ChartBuilderPreviewThemePageProps {
@@ -18,4 +19,5 @@ export interface ChartBuilderPreviewThemePageProps {
   renderedChartsSsr: boolean[][];
   addVizToLocalStates: () => void;
   setVisualOptions: (value: any) => void;
+  setIsPreviewView: React.Dispatch<React.SetStateAction<boolean>>;
 }

src/app/modules/chart-module/routes/preview-theme/index.tsx

@@ -50,6 +50,7 @@ export function ChartBuilderPreviewThemePage(
           renderedChart={props.renderedCharts[0][vizIndex]}
           renderedChartSsr={props.renderedChartsSsr[0][vizIndex]}
           renderedChartMappedData={props.renderedChartsMappedData[0][vizIndex]}
+          setIsPreviewView={props.setIsPreviewView}
         />
       ))}
     </React.Fragment>
@@ -168,6 +169,12 @@ export function ChartBuilderPreviewTheme(props: ChartBuilderPreviewThemeProps) {
       history.push(`/chart/${page}/customize`);
     }
   };
+  React.useEffect(() => {
+    props.setIsPreviewView(true);
+    return () => {
+      props.setIsPreviewView(false);
+    };
+  }, []);
 
   return (
     <div css={commonStyles.container}>

src/app/modules/chart-module/routes/text/RichEditor/index.tsx

@@ -109,7 +109,7 @@ export const RichEditor = (props: {
         ${!props.fullWidth && "max-width: 800px !important;"}
 
         h1,
-      h2 {
+        h2 {
           font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
           * {
             font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;

src/app/modules/common/subheader-toolbar/data.ts

@@ -15,4 +15,5 @@ export interface SubheaderToolbarProps {
   framesArray: IFramesArray[];
   setStopInitializeFramesWidth?: (value: boolean) => void;
   handlePersistReportState?: () => void;
+  isPreviewView: boolean;
 }

src/app/modules/common/subheader-toolbar/index.tsx

@@ -32,6 +32,7 @@ import {
   persistedReportStateAtom,
   createChartFromReportAtom,
   unSavedReportPreviewModeAtom,
+  reportRightPanelViewAtom,
 } from "app/state/recoil/atoms";
 
 const InfoSnackbar = styled((props) => <Snackbar {...props} />)`
@@ -94,6 +95,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) {
   const [createChartFromReport, setCreateChartFromReport] = useRecoilState(
     createChartFromReportAtom
   );
+  const setRightPanelView = useRecoilState(reportRightPanelViewAtom)[1];
 
   const [__, setReportPreviewMode] = useRecoilState(
     unSavedReportPreviewModeAtom
@@ -234,6 +236,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) {
         ...createChartFromReport,
         state: false,
       });
+      setRightPanelView("charts");
       if (createChartFromReport.view === undefined) {
         history.push(`/report/${createChartFromReport.page}/edit`);
       } else {
@@ -458,7 +461,7 @@ export function SubheaderToolbar(props: SubheaderToolbarProps) {
                 e.currentTarget.value = "";
               }
             }}
-            disabled={location.pathname.includes("preview")}
+            disabled={props.isPreviewView}
             style={
               page !== "new" && !view
                 ? {

src/app/modules/home-module/components/Reports/reportsGrid.tsx

@@ -138,7 +138,9 @@ export default function ReportsGrid(props: Props) {
     }
     //update the loaded reports
     setLoadedReports((prevReports) => {
-      const f = reports.filter((report, i) => prevReports[i]?.id !== report.id);
+      const f = reports?.filter(
+        (report, i) => prevReports[i]?.id !== report.id
+      );
       return [...prevReports, ...f];
     });
   }, [reportsLoadSuccess]);

src/app/modules/home-module/index.tsx

@@ -40,7 +40,7 @@ import { Tab } from "app/components/Styled/tabs";
 export default function HomeModule() {
   useTitle("DX DataXplorer");
 
-  // clear persisted state
+  // clear persisted states
   const clearPersistedReportState = useResetRecoilState(
     persistedReportStateAtom
   );

src/app/modules/report-module/index.tsx

@@ -73,6 +73,7 @@ export default function ReportModule() {
   const [persistedReportState, setPersistedReportState] = useRecoilState(
     persistedReportStateAtom
   );
+  const [isPreviewView, setIsPreviewView] = React.useState(false);
 
   const localReportState = JSON.parse(persistedReportState.framesArray);
 
@@ -501,6 +502,7 @@ export default function ReportModule() {
           headerDetails={headerDetails}
           setStopInitializeFramesWidth={setStopInitializeFramesWidth}
           handlePersistReportState={handlePersistReportState}
+          isPreviewView={isPreviewView}
         />
       )}
       {view &&
@@ -577,10 +579,10 @@ export default function ReportModule() {
           />
         </Route>
         <Route path="/report/:page/preview">
-          <ReportPreviewView />
+          <ReportPreviewView setIsPreviewView={setIsPreviewView} />
         </Route>
         <Route path="/report/:page">
-          <ReportPreviewView />
+          <ReportPreviewView setIsPreviewView={setIsPreviewView} />
         </Route>
         <Route path="/report/new">
           <Redirect to="/report/new/initial" />

src/app/modules/report-module/sub-module/rowStructure/index.tsx

@@ -578,6 +578,8 @@ const Box = (props: {
           onResizeStop={onResizeStop}
           size={{ width: width, height: `${props.height}px` }}
           maxWidth={!viewOnlyMode ? containerWidth : undefined}
+          minWidth={78}
+          minHeight={textResizableRef.current?.clientHeight}
           enable={{
             right: !viewOnlyMode,
             bottom: !viewOnlyMode,
@@ -626,6 +628,7 @@ const Box = (props: {
                 <DeleteIcon />
               </IconButton>
             )}
+
             <RichEditor
               fullWidth
               editMode={!viewOnlyMode}

src/app/modules/report-module/views/preview/index.tsx

@@ -16,7 +16,9 @@ import {
   unSavedReportPreviewModeAtom,
 } from "app/state/recoil/atoms";
 
-export function ReportPreviewView() {
+export function ReportPreviewView(props: {
+  setIsPreviewView: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   const { page } = useParams<{ page: string }>();
 
   const { ref, width } = useResizeObserver<HTMLDivElement>();
@@ -67,10 +69,12 @@ export function ReportPreviewView() {
   }, [reportData]);
 
   React.useEffect(() => {
+    props.setIsPreviewView(true);
     return () => {
       reportGetClear();
       reportEditClear();
       reportCreateClear();
+      props.setIsPreviewView(false);
     };
   }, []);