refactor(Managers): replace modal implementation with FormModal for community editing in ASNs, Domains, and IPRanges managers to enhance code maintainability and user experience

frontend/src/IPRangesManager.jsx

@@ -43,6 +43,7 @@ import Tooltip from './components/Tooltip.jsx';
 import Pagination from './components/Pagination.jsx';
 import AddItemModal from './components/AddItemModal.jsx';
 import LastSaved from './components/LastSaved.jsx';
+import FormModal from './components/FormModal.jsx';
 
 const API_URL = '/api';
 
@@ -1084,57 +1085,41 @@ function IPRangesManager() {
         placeholder={'192.168.1.0/24 65000:100'}
       />
       {/* Модальное окно редактирования community */}
-      {editModalOpen && itemBeingEdited && (
-        <div className="modal modal-blur fade show" style={{ display: 'block' }} tabIndex="-1">
-          <div className="modal-dialog modal-dialog-centered" role="document">
-            <div className="modal-content">
-              <button
-                type="button"
-                className="btn-close"
-                onClick={handleCancelEdit}
-                aria-label="Закрыть"
-              ></button>
-              <div className="modal-header">
-                <h3 className="modal-title">Редактировать community</h3>
-              </div>
-              <div className="modal-body">
-                <p className="text-muted mb-2">
-                  IP-диапазон: <span className="font-monospace">{itemBeingEdited.ipRange}</span>
-                </p>
-                <div className="mb-3">
-                  <label className="form-label">Community</label>
-                  <CommunityAutocompleteInput
-                    value={editingValue}
-                    onChange={setEditingValue}
-                    communities={communities}
-                    onKeyDown={handleEditKeyDown}
-                    className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                    useShortValue={true}
-                  />
-                  {!isValidCommunity(editingValue) && (
-                    <div className="invalid-feedback d-block">
-                      Введите корректное значение community (число или N:N).
-                    </div>
-                  )}
+      <FormModal
+        show={editModalOpen && !!itemBeingEdited}
+        onClose={handleCancelEdit}
+        onSubmit={handleSaveEdit}
+        title="Редактировать community"
+        submitLabel="Сохранить"
+        submitIcon={IconCheck}
+        size="md"
+        centered
+        disabled={!isValidCommunity(editingValue)}
+      >
+        {itemBeingEdited && (
+          <>
+            <p className="text-muted mb-2">
+              IP-диапазон: <span className="font-monospace">{itemBeingEdited.ipRange}</span>
+            </p>
+            <div className="mb-3">
+              <label className="form-label">Community</label>
+              <CommunityAutocompleteInput
+                value={editingValue}
+                onChange={setEditingValue}
+                communities={communities}
+                onKeyDown={handleEditKeyDown}
+                className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                useShortValue={true}
+              />
+              {!isValidCommunity(editingValue) && (
+                <div className="invalid-feedback d-block">
+                  Введите корректное значение community (число или N:N).
                 </div>
-              </div>
-              <div className="modal-footer">
-                <button className="btn" onClick={handleCancelEdit}>
-                  Отмена
-                </button>
-                <button
-                  className="btn btn-primary"
-                  onClick={handleSaveEdit}
-                  disabled={!isValidCommunity(editingValue)}
-                >
-                  <IconCheck className="icon me-1" size={18} />
-                  Сохранить
-                </button>
-              </div>
+              )}
             </div>
-          </div>
-        </div>
-      )}
+          </>
+        )}
+      </FormModal>
       <HistoryModal
         resource="ip-ranges"
         show={historyOpen}