feat(env): handle environment name conflicts during import with replace or copy

packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/EnvironmentGroup/index.js

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { IconChevronDown, IconChevronRight } from '@tabler/icons';
+import CountBadge from 'ui/CountBadge';
+import MenuDropdown from 'ui/MenuDropdown';
+import { DropdownTrigger } from '../StyledWrapper';
+import EnvironmentRow from '../EnvironmentRow';
+
+const EnvironmentGroup = ({
+  title,
+  environments,
+  countTestId,
+  hasBorderBottom,
+  parsedData,
+  selectedIndices,
+  toggleItemSelection,
+  resolutions,
+  setItemResolution,
+  showResolutions,
+  setGroupResolution,
+  searchText,
+  dataTestId
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  if (environments.length === 0) return null;
+
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const getDropdownValue = () => {
+    if (environments.length === 0) return 'Custom';
+    const allCopy = environments.every((env) => resolutions.get(env) === 'copy');
+    if (allCopy) return 'copy';
+    const allReplace = environments.every((env) => resolutions.get(env) === 'replace');
+    if (allReplace) return 'replace';
+    return 'Custom';
+  };
+
+  return (
+    <div className={`group-container ${hasBorderBottom ? 'has-border-bottom' : ''}`} data-testid={dataTestId}>
+      <div className="group-header">
+        <div className="group-title-wrapper" onClick={toggleExpanded}>
+          {isExpanded ? <IconChevronDown size={16} className="chevron-icon" /> : <IconChevronRight size={16} className="chevron-icon" />}
+          <span className="group-title">{title}</span>
+          <CountBadge variant="warning" className="ml-2" data-testid={countTestId}>{environments.length}</CountBadge>
+        </div>
+        {showResolutions && (
+          <MenuDropdown
+            items={[
+              { id: 'copy', label: 'Import as copy', onClick: () => setGroupResolution('copy') },
+              { id: 'replace', label: 'Replace existing', onClick: () => setGroupResolution('replace') }
+            ]}
+            selectedItemId={getDropdownValue() !== 'Custom' ? getDropdownValue() : null}
+          >
+            <DropdownTrigger data-testid="env-import-group-dropdown">
+              <span>
+                {getDropdownValue() === 'Custom' ? 'Custom' : getDropdownValue() === 'copy' ? 'Import as copy' : 'Replace existing'}
+              </span>
+              <IconChevronDown size={14} className="icon-chevron" />
+            </DropdownTrigger>
+          </MenuDropdown>
+        )}
+      </div>
+      {isExpanded && (
+        <div className="group-list">
+          {environments.map((env, idx) => {
+            const globalIdx = [...parsedData.new, ...parsedData.duplicates].indexOf(env);
+            const isSelected = selectedIndices.has(globalIdx);
+            const resolution = resolutions ? resolutions.get(env) : null;
+            return (
+              <EnvironmentRow
+                key={idx}
+                env={env}
+                isSelected={isSelected}
+                resolution={resolution}
+                toggleItemSelection={toggleItemSelection}
+                setItemResolution={setItemResolution}
+                showResolutions={showResolutions}
+              />
+            );
+          })}
+          {environments.length === 0 && searchText && (
+            <div className="empty-state">No matching {title.toLowerCase()}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EnvironmentGroup;

packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/EnvironmentRow/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { IconCopy, IconArrowsExchange } from '@tabler/icons';
+import { ResolutionButton } from '../StyledWrapper';
+
+const EnvironmentRow = ({ env, isSelected, resolution, toggleItemSelection, setItemResolution, showResolutions }) => {
+  return (
+    <div className="env-item" data-testid="env-import-item">
+      <label className="env-item-label">
+        <input
+          type="checkbox"
+          className="env-item-checkbox"
+          checked={isSelected}
+          onChange={() => toggleItemSelection(env)}
+          data-testid="env-import-item-checkbox"
+        />
+        <div className="env-item-content">
+          <div className="env-name">{env.name}</div>
+          {(env.filePath || env.fileName) && (
+            <div className="env-filepath" title={env.filePath || env.fileName}>
+              {env.filePath || env.fileName}
+            </div>
+          )}
+        </div>
+      </label>
+      {showResolutions && (
+        <div className="env-actions">
+          <ResolutionButton
+            $selected={resolution === 'copy'}
+            aria-pressed={resolution === 'copy'}
+            onClick={() => setItemResolution(env, 'copy')}
+            title="Import as copy"
+            data-testid="env-import-copy-btn"
+          >
+            <IconCopy size={16} />
+          </ResolutionButton>
+          <ResolutionButton
+            $selected={resolution === 'replace'}
+            aria-pressed={resolution === 'replace'}
+            onClick={() => setItemResolution(env, 'replace')}
+            title="Replace existing"
+            data-testid="env-import-replace-btn"
+          >
+            <IconArrowsExchange size={16} />
+          </ResolutionButton>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EnvironmentRow;

packages/bruno-app/src/components/Environments/Common/ImportEnvironmentModal/ReviewStep/index.js

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { useTheme } from 'styled-components';
+import Portal from 'components/Portal';
+import Modal from 'components/Modal';
+import SearchInput from 'components/SearchInput';
+import IconAlertTriangleFilled from 'components/Icons/IconAlertTriangleFilled';
+import CountBadge from 'ui/CountBadge';
+import { StyledWrapper } from '../StyledWrapper';
+import { pluralizeWord } from 'utils/common/index';
+import EnvironmentGroup from '../EnvironmentGroup';
+
+const ReviewStep = ({
+  modalTitle,
+  modalTestId,
+  onClose,
+  handleConfirmImport,
+  parsedData,
+  selectedIndices,
+  setSelectedIndices,
+  resolutions,
+  setResolutions
+}) => {
+  const theme = useTheme();
+  const [searchText, setSearchText] = useState('');
+
+  const totalEnvironments = parsedData.new.length + parsedData.duplicates.length;
+  const isAllSelected = selectedIndices.size === totalEnvironments && totalEnvironments > 0;
+
+  const toggleSelectAll = (checked) => {
+    if (checked) {
+      const allSelected = new Set();
+      for (let i = 0; i < totalEnvironments; i++) {
+        allSelected.add(i);
+      }
+      setSelectedIndices(allSelected);
+    } else {
+      setSelectedIndices(new Set());
+    }
+  };
+
+  const toggleItemSelection = (env) => {
+    const validEnvironments = [...parsedData.new, ...parsedData.duplicates];
+    const idx = validEnvironments.indexOf(env);
+    if (idx !== -1) {
+      const newSelected = new Set(selectedIndices);
+      if (newSelected.has(idx)) newSelected.delete(idx);
+      else newSelected.add(idx);
+      setSelectedIndices(newSelected);
+    }
+  };
+
+  const setGroupResolution = (res) => {
+    const newResolutions = new Map(resolutions);
+    parsedData.duplicates.forEach((env) => {
+      newResolutions.set(env, res);
+    });
+    setResolutions(newResolutions);
+  };
+
+  const setItemResolution = (env, res) => {
+    setResolutions(new Map(resolutions).set(env, res));
+  };
+
+  const filteredNew = parsedData.new.filter((env) => env.name.toLowerCase().includes(searchText.toLowerCase()));
+  const filteredDuplicates = parsedData.duplicates.filter((env) => env.name.toLowerCase().includes(searchText.toLowerCase()));
+
+  return (
+    <Portal>
+      <Modal
+        size="md"
+        title={modalTitle}
+        confirmText="Import"
+        cancelText="Cancel"
+        handleConfirm={handleConfirmImport}
+        handleCancel={onClose}
+        dataTestId={modalTestId}
+        disableCloseOnOutsideClick
+        footerLeft={(
+          <div className="footer-left-content" data-testid="env-import-selected-count">
+            <span style={{ color: theme.brand }}>{selectedIndices.size}</span> of {totalEnvironments} selected
+          </div>
+        )}
+      >
+        <StyledWrapper>
+          <div className="modal-content">
+            <div className="modal-header">
+              Environments <CountBadge size="md" className="ml-2" data-testid="env-import-total-count">{totalEnvironments}</CountBadge>
+            </div>
+
+            <div className="scroll-area">
+              <div className="environments-list-container">
+                {parsedData.duplicates.length > 0 && (
+                  <div className="warning-block" data-testid="import-duplicates-warning">
+                    <div className="warning-header">
+                      <IconAlertTriangleFilled size={16} className="mr-2 warning-icon" />
+                      <span className="warning-title">{parsedData.duplicates.length} {pluralizeWord('environment', parsedData.duplicates.length)}&nbsp;</span> already {parsedData.duplicates.length > 1 ? 'exist' : 'exists'} with the same name
+                    </div>
+                  </div>
+                )}
+
+                <div className="search-block">
+                  <div className="search-input-wrapper">
+                    <SearchInput
+                      searchText={searchText}
+                      setSearchText={setSearchText}
+                      placeholder="Search environments"
+                      className="w-full h-[30px] !px-0"
+                      leftIconClassName="!pl-2"
+                      data-testid="env-search-input"
+                      autoFocus={false}
+                      inputClassName="h-[30px] text-xs"
+                      iconSize={13}
+                    />
+                  </div>
+                  <label className="select-all-wrapper">
+                    <input
+                      type="checkbox"
+                      className="select-all-checkbox"
+                      checked={isAllSelected}
+                      onChange={(e) => toggleSelectAll(e.target.checked)}
+                      data-testid="env-import-select-all"
+                    />
+                    <span className="select-all-text">Select all</span>
+                  </label>
+                </div>
+
+                <EnvironmentGroup
+                  title="Duplicates"
+                  environments={filteredDuplicates}
+                  countTestId="env-import-duplicates-count"
+                  hasBorderBottom={parsedData.new.length > 0}
+                  parsedData={parsedData}
+                  selectedIndices={selectedIndices}
+                  toggleItemSelection={toggleItemSelection}
+                  resolutions={resolutions}
+                  setItemResolution={setItemResolution}
+                  showResolutions={true}
+                  setGroupResolution={setGroupResolution}
+                  searchText={searchText}
+                  dataTestId="env-import-duplicates-group"
+                />
+
+                <EnvironmentGroup
+                  title="New"
+                  environments={filteredNew}
+                  countTestId="env-import-new-count"
+                  hasBorderBottom={false}
+                  parsedData={parsedData}
+                  selectedIndices={selectedIndices}
+                  toggleItemSelection={toggleItemSelection}
+                  showResolutions={false}
+                  searchText={searchText}
+                  dataTestId="env-import-new-group"
+                />
+              </div>
+            </div>
+          </div>
+        </StyledWrapper>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default ReviewStep;