refactor: simplify OpenAPISyncTab and related components by removing unused state and styles (#7378)

- Removed the `viewMode` state and associated logic from OpenAPISyncTab and useSyncFlow, streamlining the component's functionality.
- Eliminated the `review-active` class from StyledWrapper, cleaning up the styling.
- Updated Redux state management by removing `viewMode` from the tab UI state structure, reducing complexity.
This commit is contained in:
Abhishek S Lal
2026-03-05 21:48:31 +05:30
committed by GitHub
parent b2f8b3bb5b
commit 1748741d7f
4 changed files with 7 additions and 31 deletions

View File

@@ -2166,10 +2166,6 @@ const StyledWrapper = styled.div`
}
}
&.review-active {
padding-bottom: 0;
}
/* URL/File mode toggle in setup form and settings modal */
.setup-mode-toggle {
display: inline-flex;

View File

@@ -1,7 +1,7 @@
import { useState, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import toast from 'react-hot-toast';
import { clearCollectionUpdate, setTabUiState, selectTabUiState } from 'providers/ReduxStore/slices/openapi-sync';
import { clearCollectionUpdate } from 'providers/ReduxStore/slices/openapi-sync';
import { formatIpcError } from 'utils/common/error';
const useSyncFlow = ({
@@ -9,9 +9,6 @@ const useSyncFlow = ({
sourceUrl, setError, checkForUpdates
}) => {
const dispatch = useDispatch();
const tabUiState = useSelector(selectTabUiState(collection.uid));
const viewMode = tabUiState.viewMode || 'tabs';
const setViewMode = (mode) => dispatch(setTabUiState({ collectionUid: collection.uid, viewMode: mode }));
const [pendingSyncMode, setPendingSyncMode] = useState(null);
const [showConfirmModal, setShowConfirmModal] = useState(false);
@@ -80,7 +77,6 @@ const useSyncFlow = ({
endpointDecisions: decisions
});
setViewMode('tabs');
setPendingSyncMode(null);
dispatch(clearCollectionUpdate({ collectionUid: collection.uid }));
@@ -100,17 +96,6 @@ const useSyncFlow = ({
}
};
// View/modal transition handlers
const enterReviewMode = () => {
setPendingSyncMode('sync');
setViewMode('review');
};
const handleGoBackFromReview = () => {
setViewMode('tabs');
setPendingSyncMode(null);
};
const handleSyncNow = () => {
if (!remoteDrift) return;
setPendingSyncMode('sync');
@@ -119,7 +104,6 @@ const useSyncFlow = ({
const handleApplySync = (selections) => {
const mode = pendingSyncMode || 'sync';
setViewMode('tabs');
setPendingSyncMode(null);
performSync(selections, mode);
};
@@ -154,8 +138,8 @@ const useSyncFlow = ({
}, [remoteDrift]);
return {
viewMode, isSyncing, showConfirmModal, confirmGroups,
enterReviewMode, handleSyncNow, handleGoBackFromReview,
isSyncing, showConfirmModal, confirmGroups,
handleSyncNow,
handleApplySync, cancelConfirmModal, handleConfirmModalSync
};
};

View File

@@ -1,9 +1,8 @@
import { useState, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { v4 as uuid } from 'uuid';
import { addTab } from 'providers/ReduxStore/slices/tabs';
import { IconLoader2, IconClock } from '@tabler/icons';
import { selectTabUiState } from 'providers/ReduxStore/slices/openapi-sync';
import ResponsiveTabs from 'ui/ResponsiveTabs';
import StyledWrapper from './StyledWrapper';
import OpenAPISyncHeader from './OpenAPISyncHeader';
@@ -38,9 +37,6 @@ const OpenAPISyncTab = ({ collection }) => {
const openApiSyncConfig = collection?.brunoConfig?.openapi?.[0];
const isConfigured = !!openApiSyncConfig?.sourceUrl;
const tabUiState = useSelector(selectTabUiState(collection.uid));
const viewMode = tabUiState.viewMode || 'tabs';
const handleViewSpec = () => {
dispatch(addTab({
uid: uuid(),
@@ -84,7 +80,7 @@ const OpenAPISyncTab = ({ collection }) => {
], [collectionChangesCount, specUpdatesCount]);
return (
<StyledWrapper className={`flex flex-col h-full relative px-4 pt-4 overflow-auto ${viewMode === 'review' ? ' review-active' : ''}`}>
<StyledWrapper className="flex flex-col h-full relative px-4 pt-4 overflow-auto">
<div className="sync-page max-w-screen-xl">
{/* Setup form when not configured */}

View File

@@ -8,7 +8,7 @@ const initialState = {
pollingEnabled: true,
// Last poll timestamp
lastPollTime: null,
// Map of collectionUid -> { activeTab, viewMode, expandedSections, expandedRows }
// Map of collectionUid -> { activeTab, expandedSections, expandedRows }
tabUiState: {}
};