Disable Bucket replication tab when site replication is enabled in Bucket Summary page (#1858)

portal-ui/src/ProtectedRoutes.tsx

@@ -21,11 +21,17 @@ import { AppState } from "./store";
 import {
   consoleOperatorMode,
   setDistributedMode,
+  setErrorSnackMessage,
+  setSiteReplicationInfo,
   userLoggedIn,
 } from "./actions";
 import api from "./common/api";
 import { saveSessionResponse } from "./screens/Console/actions";
 import { ISessionResponse } from "./screens/Console/types";
+import useApi from "./screens/Console/Common/Hooks/useApi";
+import { ErrorResponseHandler } from "./common/types";
+import { ReplicationSite } from "./screens/Console/Configurations/SiteReplication/SiteReplication";
+import { SRInfoStateType } from "./types";
 
 interface ProtectedRouteProps {
   loggedIn: boolean;
@@ -34,6 +40,7 @@ interface ProtectedRouteProps {
   consoleOperatorMode: typeof consoleOperatorMode;
   saveSessionResponse: typeof saveSessionResponse;
   setDistributedMode: typeof setDistributedMode;
+  setSiteReplicationInfo: typeof setSiteReplicationInfo;
 }
 
 const ProtectedRoute = ({
@@ -43,8 +50,10 @@ const ProtectedRoute = ({
   consoleOperatorMode,
   saveSessionResponse,
   setDistributedMode,
+  setSiteReplicationInfo,
 }: ProtectedRouteProps) => {
   const [sessionLoading, setSessionLoading] = useState<boolean>(true);
+
   useEffect(() => {
     api
       .invoke("GET", `/api/v1/session`)
@@ -67,6 +76,38 @@ const ProtectedRoute = ({
     setDistributedMode,
   ]);
 
+  const [, invokeSRInfoApi] = useApi(
+    (res: any) => {
+      const {
+        sites: siteList = [],
+        name: curSiteName,
+        enabled = false,
+      } = res || {};
+      const isSiteNameInList = siteList.find((si: ReplicationSite) => {
+        return si.name === curSiteName;
+      });
+
+      const isCurSite = enabled && isSiteNameInList;
+      const siteReplicationDetail: SRInfoStateType = {
+        enabled: enabled,
+        curSite: isCurSite,
+        siteName: isCurSite ? curSiteName : "",
+      };
+
+      setSiteReplicationInfo(siteReplicationDetail);
+    },
+    (err: ErrorResponseHandler) => {
+      setErrorSnackMessage(err);
+    }
+  );
+
+  useEffect(() => {
+    if (loggedIn && !sessionLoading) {
+      invokeSRInfoApi("GET", `api/v1/admin/site-replication`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loggedIn, sessionLoading]);
+
   // if we still trying to retrieve user session render nothing
   if (sessionLoading) {
     return null;
@@ -84,6 +125,7 @@ const connector = connect(mapState, {
   consoleOperatorMode,
   saveSessionResponse,
   setDistributedMode,
+  setSiteReplicationInfo,
 });
 
 export default connector(ProtectedRoute);

portal-ui/src/actions.ts

@@ -28,6 +28,8 @@ import {
   SET_SNACK_MODAL_MESSAGE,
   SET_MODAL_ERROR_MESSAGE,
   GLOBAL_SET_DISTRIBUTED_SETUP,
+  SET_SITE_REPLICATION_INFO,
+  SRInfoStateType,
 } from "./types";
 
 export function userLoggedIn(loggedIn: boolean) {
@@ -113,3 +115,12 @@ export const setDistributedMode = (distributedSetup: boolean) => {
     distributedSetup,
   };
 };
+
+export const setSiteReplicationInfo = (
+  siteReplicationInfo: SRInfoStateType
+) => {
+  return {
+    type: SET_SITE_REPLICATION_INFO,
+    siteReplicationInfo,
+  };
+};

portal-ui/src/reducer.ts

@@ -15,20 +15,21 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import {
+  GLOBAL_SET_DISTRIBUTED_SETUP,
   MENU_OPEN,
   OPERATOR_MODE,
   SERVER_IS_LOADING,
   SERVER_NEEDS_RESTART,
+  SET_ERROR_SNACK_MESSAGE,
+  SET_LOADING_PROGRESS,
+  SET_MODAL_ERROR_MESSAGE,
+  SET_SERVER_DIAG_STAT,
+  SET_SITE_REPLICATION_INFO,
+  SET_SNACK_BAR_MESSAGE,
+  SET_SNACK_MODAL_MESSAGE,
   SystemActionTypes,
   SystemState,
   USER_LOGGED,
-  SET_LOADING_PROGRESS,
-  SET_SNACK_BAR_MESSAGE,
-  SET_ERROR_SNACK_MESSAGE,
-  SET_SERVER_DIAG_STAT,
-  SET_SNACK_MODAL_MESSAGE,
-  SET_MODAL_ERROR_MESSAGE,
-  GLOBAL_SET_DISTRIBUTED_SETUP,
 } from "./types";
 
 // determine whether we have the sidebar state stored on localstorage
@@ -42,6 +43,7 @@ const initialState: SystemState = {
   session: "",
   userName: "",
   sidebarOpen: initSideBarOpen,
+  siteReplicationInfo: { siteName: "", curSite: false, enabled: false },
   serverNeedsRestart: false,
   serverIsLoading: false,
   loadingProgress: 100,
@@ -146,6 +148,11 @@ export function systemReducer(
         ...state,
         distributedSetup: action.distributedSetup,
       };
+    case SET_SITE_REPLICATION_INFO:
+      return {
+        ...state,
+        siteReplicationInfo: action.siteReplicationInfo,
+      };
     default:
       return state;
   }

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx

@@ -52,6 +52,7 @@ import {
 import withSuspense from "../../Common/Components/withSuspense";
 import RBIconButton from "./SummaryItems/RBIconButton";
 import { TrashIcon } from "../../../../icons";
+import { SRInfoStateType } from "../../../../types";
 
 const BucketsIcon = React.lazy(() => import("../../../../icons/BucketsIcon"));
 const FolderIcon = React.lazy(() => import("../../../../icons/FolderIcon"));
@@ -116,6 +117,7 @@ interface IBucketDetailsProps {
   loadingBucket: boolean;
   setBucketInfo: typeof setBucketInfo;
   bucketInfo: BucketInfo | null;
+  siteReplicationInfo: SRInfoStateType;
 }
 
 const BucketDetails = ({
@@ -128,6 +130,7 @@ const BucketDetails = ({
   loadingBucket,
   setBucketInfo,
   bucketInfo,
+  siteReplicationInfo,
 }: IBucketDetailsProps) => {
   const [iniLoad, setIniLoad] = useState<boolean>(false);
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
@@ -371,6 +374,8 @@ const BucketDetails = ({
                 component: Link,
                 disabled:
                   !distributedSetup ||
+                  (siteReplicationInfo.enabled &&
+                    siteReplicationInfo.curSite) ||
                   !hasPermission(bucketName, [
                     IAM_SCOPES.S3_GET_REPLICATION_CONFIGURATION,
                     IAM_SCOPES.S3_PUT_REPLICATION_CONFIGURATION,
@@ -429,6 +434,7 @@ const mapState = (state: AppState) => ({
   distributedSetup: state.system.distributedSetup,
   loadingBucket: state.buckets.bucketDetails.loadingBucket,
   bucketInfo: state.buckets.bucketDetails.bucketInfo,
+  siteReplicationInfo: state.system.siteReplicationInfo,
 });
 
 const connector = connect(mapState, {

portal-ui/src/types.ts

@@ -22,6 +22,11 @@ export interface snackBarMessage {
   type: "message" | "error";
 }
 
+export interface SRInfoStateType {
+  enabled: boolean;
+  curSite: boolean;
+  siteName: string;
+}
 export interface SystemState {
   loggedIn: boolean;
   operatorMode: boolean;
@@ -35,6 +40,7 @@ export interface SystemState {
   modalSnackBar: snackBarMessage;
   serverDiagnosticStatus: string;
   distributedSetup: boolean;
+  siteReplicationInfo: SRInfoStateType;
 }
 
 export const USER_LOGGED = "USER_LOGGED";
@@ -49,6 +55,7 @@ export const SET_ERROR_SNACK_MESSAGE = "SET_ERROR_SNACK_MESSAGE";
 export const SET_SNACK_MODAL_MESSAGE = "SET_SNACK_MODAL_MESSAGE";
 export const SET_MODAL_ERROR_MESSAGE = "SET_MODAL_ERROR_MESSAGE";
 export const GLOBAL_SET_DISTRIBUTED_SETUP = "GLOBAL/SET_DISTRIBUTED_SETUP";
+export const SET_SITE_REPLICATION_INFO = "SET_SITE_REPLICATION_INFO";
 
 interface UserLoggedAction {
   type: typeof USER_LOGGED;
@@ -109,6 +116,11 @@ interface SetDistributedSetup {
   distributedSetup: boolean;
 }
 
+interface SetSiteReplicationInfo {
+  type: typeof SET_SITE_REPLICATION_INFO;
+  siteReplicationInfo: SRInfoStateType;
+}
+
 export type SystemActionTypes =
   | UserLoggedAction
   | OperatorModeAction
@@ -121,4 +133,5 @@ export type SystemActionTypes =
   | SetErrorSnackMessage
   | SetModalSnackMessage
   | SetModalErrorMessage
-  | SetDistributedSetup;
+  | SetDistributedSetup
+  | SetSiteReplicationInfo;