Repository: inovex/scrumlr.io
Pull request #1664 (2022-05-12 14:54:16)

New columns should be added as hidden
## Changelog

- New columns are hidden by default
- If visibility of hidden columns is turned OFF, it is set to ON upon adding a column (when this happens, a toast is shown notifying the user that the visibility of the hidden columns has changed)
- Off-topic: Hidden columns now have a different header color to distinguish them more easily from visible columns (see below)

![image](https://user-images.githubusercontent.com/32651718/168102739-711afb03-5b96-4df9-aa8a-626a3349e9c1.png)

## Checklist

- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] The light- and dark-theme are both supported and tested
- [x] The design was implemented and is responsive for all devices and screen sizes
- [x] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)



Patch:
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 8e803444..126f30cc 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -189,7 +189,8 @@
     "moderationEnded": "Die Moderation wurde beendet!",
     "timerStarted": "Ein Alarm wurde gesetzt!",
     "timerEnded": "Der Alarm ist beendet!",
-    "timerCancelled": "Der Alarm wurde abgebrochen!"
+    "timerCancelled": "Der Alarm wurde abgebrochen!",
+    "hiddenColumnsVisible": "Ausgeblendete Spalten werden dir nun angezeigt!"
   },
   "Language": {
     "german": "Deutsch",
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 52cb6680..c02f6b72 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -188,7 +188,8 @@
     "moderationEnded": "Moderation phase ended!",
     "timerStarted": "Timer started!",
     "timerEnded": "Timer ended!",
-    "timerCancelled": "Timer cancelled!"
+    "timerCancelled": "Timer cancelled!",
+    "hiddenColumnsVisible": "Hidden columns are now visible to you!"
   },
   "Language": {
     "german": "German",
diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
index f6417753..31969104 100644
--- a/src/components/Column/Column.scss
+++ b/src/components/Column/Column.scss
@@ -47,13 +47,21 @@
 
 .column__header-text {
   font-size: calc(18px + 0.4vw);
-  color: $color-black;
   border-bottom: solid 3px var(--accent-color);
   margin: 20px 10px 20px $margin--default;
   font-weight: bold;
   letter-spacing: $letter-spacing--large;
   line-height: $line-height--large;
 }
+
+.column__header-text--visible {
+  color: $color-black;
+}
+
+.column__header-text--hidden {
+  color: $color-middle-gray;
+}
+
 .column__header-input {
   display: inline-block;
   border: none;
@@ -150,7 +158,7 @@
 }
 
 [theme="dark"] {
-  .column__header-text {
+  .column__header-text--visible {
     color: $color-white;
   }
   .column__header-toggle-button-icon {
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index a071bcd8..3a404989 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -69,11 +69,9 @@ export const Column = ({id, name, color, visible, index, tabIndex}: ColumnProps)
     }
   }
 
-  // const Icon = visible ? visibleIcon : hiddenIcon;
-
   const renderColumnName = () =>
     columnNameMode === "VIEW" ? (
-      <h2 className="column__header-text">{name}</h2>
+      <h2 className={classNames("column__header-text", visible ? "column__header-text--visible" : "column__header-text--hidden")}>{name}</h2>
     ) : (
       <input
         tabIndex={tabIndex}
diff --git a/src/components/Column/ColumnSettings.tsx b/src/components/Column/ColumnSettings.tsx
index 7ec90556..db82684f 100644
--- a/src/components/Column/ColumnSettings.tsx
+++ b/src/components/Column/ColumnSettings.tsx
@@ -10,6 +10,9 @@ import {Color, getColorClassName} from "constants/colors";
 import {useTranslation} from "react-i18next";
 import {useDispatch} from "react-redux";
 import "./ColumnSettings.scss";
+import i18n from "i18next";
+import {useAppSelector} from "store";
+import {Toast} from "utils/Toast";
 
 type ColumnSettingsProps = {
   tabIndex: number;
@@ -24,6 +27,7 @@ type ColumnSettingsProps = {
 
 export const ColumnSettings: VFC<ColumnSettingsProps> = ({tabIndex, id, name, color, visible, index, onClose, onNameEdit}) => {
   const {t} = useTranslation();
+  const showHiddenColumns = useAppSelector((state) => state.participants?.self.showHiddenColumns);
   const dispatch = useDispatch();
   const columnSettingsRef = useRef<HTMLDivElement>(null);
 
@@ -37,6 +41,19 @@ export const ColumnSettings: VFC<ColumnSettingsProps> = ({tabIndex, id, name, co
     return () => document.removeEventListener("click", handleClickOutside);
   }, [columnSettingsRef, onClose]);
 
+  const addColumn = (columnIndex: number) => {
+    if (!showHiddenColumns) {
+      dispatch(Actions.setShowHiddenColumns(true));
+      Toast.success(
+        <div>
+          <div>{i18n.t("Toast.hiddenColumnsVisible")}</div>
+        </div>,
+        3000
+      );
+    }
+    dispatch(Actions.createColumn({name: "New column", color: "backlog-blue", visible: false, index: columnIndex}));
+  };
+
   return (
     <div className="column__header-menu-dropdown" ref={columnSettingsRef}>
       <ul>
@@ -70,7 +87,7 @@ export const ColumnSettings: VFC<ColumnSettingsProps> = ({tabIndex, id, name, co
             tabIndex={tabIndex + 2}
             onClick={() => {
               onClose?.();
-              dispatch(Actions.createColumn({name: "New column", color: "backlog-blue", visible: true, index}));
+              addColumn(index);
             }}
           >
             <PreviousIcon />
@@ -82,7 +99,7 @@ export const ColumnSettings: VFC<ColumnSettingsProps> = ({tabIndex, id, name, co
             tabIndex={tabIndex + 3}
             onClick={() => {
               onClose?.();
-              dispatch(Actions.createColumn({name: "New column", color: "backlog-blue", visible: true, index: index + 1}));
+              addColumn(index + 1);
             }}
           >
             <NextIcon />


Test patch:
diff --git a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
index 7bb54495..ce34c545 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Column should have correct style show column with correct style 1`] = `
         class="column__header-title"
       >
         <h2
-          class="column__header-text"
+          class="column__header-text column__header-text--hidden"
         >
           Testheader
         </h2>