From 1433878f3260a51bb1fab140fbeeedbe1512fd17 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:54:25 +0100
Subject: [PATCH] fix: change requests placeholder (#8724)

If project does not have CRs configured, show correct info.
---
 .../ChangeRequestsTabs/ChangeRequestsTabs.tsx |  7 +++++--
 .../ProjectChangeRequests.tsx                 | 20 +++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
index 6236da0f07..92ea21242a 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
@@ -1,3 +1,4 @@
+import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import {
@@ -13,7 +14,6 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC
 import { Box, styled, Tab, Tabs, useMediaQuery } from '@mui/material';
 import { Link, useSearchParams } from 'react-router-dom';
 import { sortTypes } from 'utils/sortTypes';
-import { useEffect, useMemo, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Search } from 'component/common/Search/Search';
 import { featuresPlaceholder } from 'component/feature/FeatureToggleList/FeatureToggleListTable';
@@ -34,6 +34,7 @@ export interface IChangeRequestTableProps {
     changeRequests: any[];
     loading: boolean;
     projectId: string;
+    placeholder?: ReactNode;
 }
 
 const defaultSort: SortingRule<string> & {
@@ -63,6 +64,7 @@ const ConftigurationLinkBox = styled(Box)(({ theme }) => ({
 
 export const ChangeRequestsTabs = ({
     changeRequests = [],
+    placeholder,
     loading,
     projectId,
 }: IChangeRequestTableProps) => {
@@ -368,7 +370,8 @@ export const ChangeRequestsTabs = ({
                         }
                         elseShow={
                             <TablePlaceholder>
-                                None of the changes were submitted yet.
+                                {placeholder ||
+                                    'None of the changes were submitted yet.'}
                             </TablePlaceholder>
                         }
                     />
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ProjectChangeRequests.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ProjectChangeRequests.tsx
index 3c79ed1741..dcfca7a74c 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ProjectChangeRequests.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ProjectChangeRequests.tsx
@@ -6,6 +6,8 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
 import { useProjectOverviewNameOrId } from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { useChangeRequestConfig } from 'hooks/api/getters/useChangeRequestConfig/useChangeRequestConfig';
+import { Link } from 'react-router-dom';
 
 export const ProjectChangeRequests = () => {
     const projectId = useRequiredPathParam('projectId');
@@ -15,6 +17,11 @@ export const ProjectChangeRequests = () => {
     usePageTitle(`Change requests – ${projectName}`);
 
     const { changeRequests, loading } = useProjectChangeRequests(projectId);
+    const { data: configData, loading: configLoading } =
+        useChangeRequestConfig(projectId);
+    const isConfigured = configData.some(
+        (config) => config.changeRequestEnabled,
+    );
 
     if (isOss() || isPro()) {
         return (
@@ -29,6 +36,19 @@ export const ProjectChangeRequests = () => {
             changeRequests={changeRequests}
             projectId={projectId}
             loading={loading}
+            placeholder={
+                !configLoading && !isConfigured ? (
+                    <p>
+                        Change requests are not configured for this project.
+                        <br />
+                        <Link
+                            to={`/projects/${projectId}/settings/change-requests`}
+                        >
+                            Configure change requests
+                        </Link>
+                    </p>
+                ) : undefined
+            }
         />
     );
 };