From e539dba3669bc38d9eb646255e47a2e99d73efe1 Mon Sep 17 00:00:00 2001
From: Jan-Erik S <6697396+Bhavatu@users.noreply.github.com>
Date: Tue, 22 Oct 2024 15:03:54 +0300
Subject: [PATCH] Indicator level hidden in indicator list based on backend
 setting

---
 .../[plan]/(with-layout-elements)/indicators/page.tsx     | 1 +
 common/__generated__/graphql.ts                           | 3 ++-
 components/indicators/IndicatorList.tsx                   | 8 +++++++-
 components/indicators/IndicatorListFiltered.tsx           | 6 ++++--
 queries/get-indicator-list-page.ts                        | 1 +
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/[domain]/[lang]/[plan]/(with-layout-elements)/indicators/page.tsx b/app/[domain]/[lang]/[plan]/(with-layout-elements)/indicators/page.tsx
index 499a5b5b7..82b12cc0d 100644
--- a/app/[domain]/[lang]/[plan]/(with-layout-elements)/indicators/page.tsx
+++ b/app/[domain]/[lang]/[plan]/(with-layout-elements)/indicators/page.tsx
@@ -28,6 +28,7 @@ export default async function ActionsPage({ params }: Props) {
     <IndicatorList
       leadContent={data.planPage.leadContent}
       displayInsights={data.planPage.displayInsights}
+      displayLevel={data.planPage.displayLevel}
     />
   );
 }
diff --git a/common/__generated__/graphql.ts b/common/__generated__/graphql.ts
index b258ed505..497b82f2e 100644
--- a/common/__generated__/graphql.ts
+++ b/common/__generated__/graphql.ts
@@ -2597,6 +2597,7 @@ export type IndicatorListPage = PageInterface & {
   depth?: Maybe<Scalars['Int']>;
   descendants: Array<PageInterface>;
   displayInsights?: Maybe<Scalars['Boolean']>;
+  displayLevel?: Maybe<Scalars['Boolean']>;
   draftTitle: Scalars['String'];
   expireAt?: Maybe<Scalars['DateTime']>;
   expired: Scalars['Boolean'];
@@ -12135,7 +12136,7 @@ export type GetPlanPageIndicatorListQuery = (
     { id?: string | null, slug: string, title: string, lastPublishedAt?: any | null }
     & { __typename: 'AccessibilityStatementPage' | 'ActionListPage' | 'CategoryPage' | 'CategoryTypePage' | 'EmptyPage' | 'ImpactGroupPage' | 'Page' | 'PlanRootPage' | 'PrivacyPolicyPage' | 'StaticPage' }
   ) | (
-    { leadContent?: string | null, displayInsights?: boolean | null, id?: string | null, slug: string, title: string, lastPublishedAt?: any | null }
+    { leadContent?: string | null, displayInsights?: boolean | null, displayLevel?: boolean | null, id?: string | null, slug: string, title: string, lastPublishedAt?: any | null }
     & { __typename: 'IndicatorListPage' }
   ) | null }
   & { __typename?: 'Query' }
diff --git a/components/indicators/IndicatorList.tsx b/components/indicators/IndicatorList.tsx
index d2192f477..17e6529f6 100644
--- a/components/indicators/IndicatorList.tsx
+++ b/components/indicators/IndicatorList.tsx
@@ -205,9 +205,14 @@ const getFirstUsableCategoryType = (categoryTypes, indicators) =>
 interface Props {
   leadContent: IndicatorListPage['leadContent'];
   displayInsights: IndicatorListPage['displayInsights'];
+  displayLevel: IndicatorListPage['displayLevel'];
 }
 
-const IndicatorList = ({ leadContent, displayInsights }: Props) => {
+const IndicatorList = ({
+  leadContent,
+  displayInsights,
+  displayLevel,
+}: Props) => {
   const plan = usePlan();
   const t = useTranslations();
   const searchParams = useSearchParams();
@@ -327,6 +332,7 @@ const IndicatorList = ({ leadContent, displayInsights }: Props) => {
           shouldDisplayCategory={(category: Category) =>
             category.type.id === categoryType?.id
           }
+          displayLevel={displayLevel}
         />
       </Container>
     </>
diff --git a/components/indicators/IndicatorListFiltered.tsx b/components/indicators/IndicatorListFiltered.tsx
index 62c8b56ae..64da464f4 100644
--- a/components/indicators/IndicatorListFiltered.tsx
+++ b/components/indicators/IndicatorListFiltered.tsx
@@ -402,6 +402,7 @@ const IndicatorListFiltered = (props) => {
     hierarchy,
     displayNormalizedValues,
     shouldDisplayCategory,
+    displayLevel,
   } = props;
 
   const locale = useLocale();
@@ -539,7 +540,7 @@ const IndicatorListFiltered = (props) => {
               </IndentableTableHeader>
             );
           }
-          if (!allIndicatorsHaveSameLevel) {
+          if (!allIndicatorsHaveSameLevel && displayLevel) {
             headers.push(
               <IndentableTableHeader key="hr-type">
                 {t('type')}
@@ -674,7 +675,7 @@ const IndicatorListFiltered = (props) => {
                           )}
                         </IndentableTableCell>
                       )}
-                      {!allIndicatorsHaveSameLevel && (
+                      {!allIndicatorsHaveSameLevel && displayLevel && (
                         <IndentableTableCell>
                           <IndicatorType $level={item.level}>
                             {indicatorType || <span>-</span>}
@@ -754,6 +755,7 @@ IndicatorListFiltered.propTypes = {
   categoryColumnLabel: PropTypes.string,
   indicators: PropTypes.arrayOf(PropTypes.object).isRequired,
   shouldDisplayCategory: PropTypes.func,
+  displayLevel: PropTypes.bool,
 };
 
 export default IndicatorListFiltered;
diff --git a/queries/get-indicator-list-page.ts b/queries/get-indicator-list-page.ts
index 4f5baf9e5..145e50b42 100644
--- a/queries/get-indicator-list-page.ts
+++ b/queries/get-indicator-list-page.ts
@@ -15,6 +15,7 @@ const GET_INDICATOR_LIST_PAGE = gql`
       ... on IndicatorListPage {
         leadContent
         displayInsights
+        displayLevel
       }
       lastPublishedAt
     }