fix: sidebar height, authorization (#3626)

web/components/gantt-chart/blocks/blocks-list.tsx

@@ -20,6 +20,7 @@ export type GanttChartBlocksProps = {
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
   enableBlockMove: boolean;
+  enableAddBlock: boolean;
   showAllBlocks: boolean;
 };
 
@@ -32,6 +33,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
     enableBlockLeftResize,
     enableBlockRightResize,
     enableBlockMove,
+    enableAddBlock,
     showAllBlocks,
   } = props;
   // store hooks
@@ -120,7 +122,7 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = observer((props)
                   enableBlockMove={enableBlockMove}
                 />
               ) : (
-                <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
+                enableAddBlock && <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />
               )}
             </div>
           </div>

web/components/gantt-chart/chart/main-content.tsx

@@ -27,6 +27,7 @@ type Props = {
   enableBlockMove: boolean;
   enableBlockRightResize: boolean;
   enableReorder: boolean;
+  enableAddBlock: boolean;
   itemsContainerWidth: number;
   showAllBlocks: boolean;
   sidebarToRender: (props: any) => React.ReactNode;
@@ -45,6 +46,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
     enableBlockMove,
     enableBlockRightResize,
     enableReorder,
+    enableAddBlock,
     itemsContainerWidth,
     showAllBlocks,
     sidebarToRender,
@@ -111,6 +113,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
             enableBlockLeftResize={enableBlockLeftResize}
             enableBlockRightResize={enableBlockRightResize}
             enableBlockMove={enableBlockMove}
+            enableAddBlock={enableAddBlock}
             showAllBlocks={showAllBlocks}
           />
         )}

web/components/gantt-chart/chart/root.tsx

@@ -28,6 +28,7 @@ type ChartViewRootProps = {
   enableBlockRightResize: boolean;
   enableBlockMove: boolean;
   enableReorder: boolean;
+  enableAddBlock: boolean;
   bottomSpacing: boolean;
   showAllBlocks: boolean;
 };
@@ -45,6 +46,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
     enableBlockRightResize,
     enableBlockMove,
     enableReorder,
+    enableAddBlock,
     bottomSpacing,
     showAllBlocks,
   } = props;
@@ -192,6 +194,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
         enableBlockMove={enableBlockMove}
         enableBlockRightResize={enableBlockRightResize}
         enableReorder={enableReorder}
+        enableAddBlock={enableAddBlock}
         itemsContainerWidth={itemsContainerWidth}
         showAllBlocks={showAllBlocks}
         sidebarToRender={sidebarToRender}

web/components/gantt-chart/chart/views/month.tsx

@@ -14,63 +14,61 @@ export const MonthChartView: FC<any> = () => {
   const monthBlocks: IMonthBlock[] = renderView;
 
   return (
-    <>
+    <div className="absolute top-0 left-0 h-full w-max flex divide-x divide-custom-border-100/50">
-      <div className="absolute top-0 left-0 h-full w-max flex divide-x divide-custom-border-100/50">
+      {monthBlocks?.map((block, rootIndex) => (
-        {monthBlocks?.map((block, rootIndex) => (
+        <div key={`month-${block?.month}-${block?.year}`} className="relative">
-          <div key={`month-${block?.month}-${block?.year}`} className="relative">
+          <div
-            <div
+            className="w-full sticky top-0 z-[5] bg-custom-background-100"
-              className="w-full sticky top-0 z-[5] bg-custom-background-100"
+            style={{
-              style={{
+              height: `${HEADER_HEIGHT}px`,
-                height: `${HEADER_HEIGHT}px`,
+            }}
-              }}
+          >
-            >
+            <div className="h-1/2">
-              <div className="h-1/2">
+              <div
-                <div
+                className="sticky inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize"
-                  className="sticky inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize"
+                style={{
-                  style={{
+                  left: `${SIDEBAR_WIDTH}px`,
-                    left: `${SIDEBAR_WIDTH}px`,
+                }}
-                  }}
+              >
-                >
+                {block?.title}
-                  {block?.title}
-                </div>
-              </div>
-              <div className="h-1/2 w-full flex">
-                {block?.children?.map((monthDay, index) => (
-                  <div
-                    key={`sub-title-${rootIndex}-${index}`}
-                    className="flex-shrink-0 border-b-[0.5px] border-custom-border-200 py-1 text-center capitalize"
-                    style={{ width: `${currentViewData?.data.width}px` }}
-                  >
-                    <div className="space-x-1 text-xs">
-                      <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
-                      <span
-                        className={cn({
-                          "rounded-full bg-custom-primary-100 px-1 text-white": monthDay.today,
-                        })}
-                      >
-                        {monthDay.day}
-                      </span>
-                    </div>
-                  </div>
-                ))}
               </div>
             </div>
-            <div className="h-full w-full flex divide-x divide-custom-border-100/50">
+            <div className="h-1/2 w-full flex">
               {block?.children?.map((monthDay, index) => (
                 <div
-                  key={`column-${rootIndex}-${index}`}
+                  key={`sub-title-${rootIndex}-${index}`}
-                  className="h-full overflow-hidden"
+                  className="flex-shrink-0 border-b-[0.5px] border-custom-border-200 py-1 text-center capitalize"
                   style={{ width: `${currentViewData?.data.width}px` }}
                 >
-                  {["sat", "sun"].includes(monthDay?.dayData?.shortTitle) && (
+                  <div className="space-x-1 text-xs">
-                    <div className="h-full bg-custom-background-90" />
+                    <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
-                  )}
+                    <span
+                      className={cn({
+                        "rounded-full bg-custom-primary-100 px-1 text-white": monthDay.today,
+                      })}
+                    >
+                      {monthDay.day}
+                    </span>
+                  </div>
                 </div>
               ))}
             </div>
           </div>
-        ))}
+          <div className="h-full w-full flex divide-x divide-custom-border-100/50">
-      </div>
+            {block?.children?.map((monthDay, index) => (
-    </>
+              <div
+                key={`column-${rootIndex}-${index}`}
+                className="h-full overflow-hidden"
+                style={{ width: `${currentViewData?.data.width}px` }}
+              >
+                {["sat", "sun"].includes(monthDay?.dayData?.shortTitle) && (
+                  <div className="h-full bg-custom-background-90" />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
   );
 };

web/components/gantt-chart/root.tsx

@@ -16,6 +16,7 @@ type GanttChartRootProps = {
   enableBlockRightResize?: boolean;
   enableBlockMove?: boolean;
   enableReorder?: boolean;
+  enableAddBlock?: boolean;
   bottomSpacing?: boolean;
   showAllBlocks?: boolean;
 };
@@ -29,10 +30,11 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
     blockUpdateHandler,
     sidebarToRender,
     blockToRender,
-    enableBlockLeftResize = true,
+    enableBlockLeftResize = false,
-    enableBlockRightResize = true,
+    enableBlockRightResize = false,
-    enableBlockMove = true,
+    enableBlockMove = false,
-    enableReorder = true,
+    enableReorder = false,
+    enableAddBlock = false,
     bottomSpacing = false,
     showAllBlocks = false,
   } = props;
@@ -51,6 +53,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
         enableBlockRightResize={enableBlockRightResize}
         enableBlockMove={enableBlockMove}
         enableReorder={enableReorder}
+        enableAddBlock={enableAddBlock}
         bottomSpacing={bottomSpacing}
         showAllBlocks={showAllBlocks}
       />

web/components/gantt-chart/sidebar/root.tsx

@@ -18,7 +18,7 @@ export const GanttChartSidebar: React.FC<Props> = (props) => {
     <div
       // DO NOT REMOVE THE ID
       id="gantt-sidebar"
-      className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200"
+      className="sticky top-0 left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200 bg-custom-background-100"
       style={{
         width: `${SIDEBAR_WIDTH}px`,
       }}

web/components/issues/issue-layouts/gantt/base-gantt-root.tsx

@@ -84,6 +84,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
           enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
+          enableAddBlock={isAllowed}
           showAllBlocks
         />
       </div>

web/components/modules/gantt-chart/modules-list-layout.tsx

@@ -52,6 +52,7 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}
         enableReorder={isAllowed}
+        enableAddBlock={isAllowed}
         showAllBlocks
       />
     </div>