fixup! refat(api): decouple api logic from pages

.env.development

@@ -4,28 +4,28 @@ OPEN_PATH=/
 REACT_APP_AUTH_TOKEN=csrfspoof
 
 REACT_APP_CREDENTIALS_SERVICE=https://0.0.0.0:9443/api/v1/credentials/
-REACT_APP_FACTS_SERVICE=http://0.0.0.0:9443/api/v1/facts/
+REACT_APP_FACTS_SERVICE=https://0.0.0.0:9443/api/v1/facts/
 
-REACT_APP_REPORTS_SERVICE=http://0.0.0.0:9443/api/v1/reports/
-REACT_APP_REPORTS_SERVICE_DETAILS=http://0.0.0.0:9443/api/v1/reports/{0}/details/
-REACT_APP_REPORTS_SERVICE_DEPLOYMENTS=http://0.0.0.0:9443/api/v1/reports/{0}/deployments/
-REACT_APP_REPORTS_SERVICE_MERGE=http://0.0.0.0:9443/api/v1/reports/merge/
+REACT_APP_REPORTS_SERVICE=https://0.0.0.0:9443/api/v1/reports/
+REACT_APP_REPORTS_SERVICE_DETAILS=https://0.0.0.0:9443/api/v1/reports/{0}/details/
+REACT_APP_REPORTS_SERVICE_DEPLOYMENTS=https://0.0.0.0:9443/api/v1/reports/{0}/deployments/
+REACT_APP_REPORTS_SERVICE_MERGE=https://0.0.0.0:9443/api/v1/reports/merge/
 
 REACT_APP_SCANS_SERVICE=https://0.0.0.0:9443/api/v1/scans/
 
-REACT_APP_SCAN_JOBS_SERVICE_START_GET=http://0.0.0.0:9443/api/v1/scans/{0}/jobs/
-REACT_APP_SCAN_JOBS_SERVICE=http://0.0.0.0:9443/api/v1/jobs/
-REACT_APP_SCAN_JOBS_SERVICE_CONNECTION=http://0.0.0.0:9443/api/v1/jobs/{0}/connection/
-REACT_APP_SCAN_JOBS_SERVICE_INSPECTION=http://0.0.0.0:9443/api/v1/jobs/{0}/inspection/
-REACT_APP_SCAN_JOBS_SERVICE_PAUSE=http://0.0.0.0:9443/api/v1/jobs/{0}/pause/
-REACT_APP_SCAN_JOBS_SERVICE_CANCEL=http://0.0.0.0:9443/api/v1/jobs/{0}/cancel/
-REACT_APP_SCAN_JOBS_SERVICE_RESTART=http://0.0.0.0:9443/api/v1/jobs/{0}/restart/
-REACT_APP_SCAN_JOBS_SERVICE_MERGE=http://0.0.0.0:9443/api/v1/jobs/merge/
+REACT_APP_SCAN_JOBS_SERVICE_START_GET=https://0.0.0.0:9443/api/v1/scans/{0}/jobs/
+REACT_APP_SCAN_JOBS_SERVICE=https://0.0.0.0:9443/api/v1/jobs/
+REACT_APP_SCAN_JOBS_SERVICE_CONNECTION=https://0.0.0.0:9443/api/v1/jobs/{0}/connection/
+REACT_APP_SCAN_JOBS_SERVICE_INSPECTION=https://0.0.0.0:9443/api/v1/jobs/{0}/inspection/
+REACT_APP_SCAN_JOBS_SERVICE_PAUSE=https://0.0.0.0:9443/api/v1/jobs/{0}/pause/
+REACT_APP_SCAN_JOBS_SERVICE_CANCEL=https://0.0.0.0:9443/api/v1/jobs/{0}/cancel/
+REACT_APP_SCAN_JOBS_SERVICE_RESTART=https://0.0.0.0:9443/api/v1/jobs/{0}/restart/
+REACT_APP_SCAN_JOBS_SERVICE_MERGE=https://0.0.0.0:9443/api/v1/jobs/merge/
 
 REACT_APP_SOURCES_SERVICE=https://0.0.0.0:9443/api/v1/sources/
 
-REACT_APP_USER_SERVICE=http://0.0.0.0:9443/api/v1/users/
+REACT_APP_USER_SERVICE=https://0.0.0.0:9443/api/v1/users/
 REACT_APP_USER_SERVICE_CURRENT=https://0.0.0.0:9443/api/v1/users/current/
-REACT_APP_USER_SERVICE_LOGOUT=http://0.0.0.0:9443/api/v1/users/logout/
+REACT_APP_USER_SERVICE_LOGOUT=https://0.0.0.0:9443/api/v1/users/logout/
 
-REACT_APP_STATUS_SERVICE=http://0.0.0.0:9443/api/v1/status/
+REACT_APP_STATUS_SERVICE=https://0.0.0.0:9443/api/v1/status/

src/hooks/api/useCredentialApi.ts

@@ -12,23 +12,23 @@ import { CredentialType } from 'src/types';
 const useCredentialApi = () => {
   const [pendingDeleteCredential, setPendingDeleteCredential] = React.useState<CredentialType>();
 
+  /**
+   * Executes a DELETE request to delete a credential.
+   *
+   * @param {CredentialType} [credential] - (Optional) The credential to be deleted. If not provided, it uses `pendingDeleteCredential`.
+   * @returns {AxiosResponse} - The Axios response object representing the result of the request.
+   */
   const deleteCredential = (credential?: CredentialType) => {
-    /**
-     * Executes a DELETE request to delete a credential.
-     *
-     * @param {CredentialType} [credential] - (Optional) The credential to be deleted. If not provided, it uses `pendingDeleteCredential`.
-     * @returns {AxiosResponse} - The Axios response object representing the result of the request.
-     */
     return axios.delete(
       `${process.env.REACT_APP_CREDENTIALS_SERVICE}${(credential || pendingDeleteCredential)?.id}/`
     );
   };
 
+  /**
+   * Deletes several selected credentials based on user interaction.
+   * Add your logic to handle the deletion of selected items within this function.
+   */
   const onDeleteSelectedCredentials = () => {
-    /**
-     * Deletes several selected credentials based on user interaction.
-     * Add your logic to handle the deletion of selected items within this function.
-     */
     const selectedItems = [];
     console.log('Deleting selected credentials:', selectedItems);
   };

src/hooks/api/useScanApi.ts

@@ -14,33 +14,33 @@ const useScanApi = () => {
   const [pendingDeleteScan, setPendingDeleteScan] = React.useState<ScanType>();
   const [scanSelected, setScanSelected] = React.useState<ScanType>();
 
+  /**
+   * Executes a DELETE request to delete a scan.
+   *
+   * @param {ScanType} [scan] - (Optional) The scan to be deleted. If not provided, it uses `pendingDeleteScan`.
+   * @returns {AxiosResponse} - The Axios response object representing the result of the request.
+   */
   const deleteScan = (scan?: ScanType) => {
-    /**
-     * Executes a DELETE request to delete a scan.
-     *
-     * @param {ScanType} [scan] - (Optional) The scan to be deleted. If not provided, it uses `pendingDeleteScan`.
-     * @returns {AxiosResponse} - The Axios response object representing the result of the request.
-     */
     return axios.delete(
       `${process.env.REACT_APP_SCANS_SERVICE}${(scan || pendingDeleteScan)?.id}/`
     );
   };
 
+  /**
+   * Executes a POST request to initiate a scan using the provided payload.
+   *
+   * @param {ScanType} payload - The payload containing source-related information for the scan.
+   * @returns {AxiosResponse} - The Axios response object representing the result of request.
+   */
   const runScan = (payload: ScanType) => {
-    /**
-     * Executes a POST request to initiate a scan using the provided payload.
-     *
-     * @param {ScanType} payload - The payload containing source-related information for the scan.
-     * @returns {AxiosResponse} - The Axios response object representing the result of request.
-     */
     return axios.post(`${process.env.REACT_APP_SCANS_SERVICE}`, payload);
   };
 
+  /**
+   * Deletes several selected scans based on user interaction.
+   * Add your logic to handle the deletion of selected items within this function.
+   */
   const onDeleteSelectedScans = () => {
-    /**
-     * Deletes several selected scans based on user interaction.
-     * Add your logic to handle the deletion of selected items within this function.
-     */
     const selectedItems = [];
     console.log('Deleting selected scans:', selectedItems);
   };

src/hooks/api/useSourceApi.ts

@@ -24,101 +24,101 @@ const useSourceApi = () => {
   const [connectionsSelected, setConnectionsSelected] = React.useState<SourceType>();
   const emptyConnectionData = { successful: [], failure: [], unreachable: [] };
 
+  /**
+   * Executes a POST request to initiate a scan using the provided payload.
+   *
+   * @param {SourceType} payload - The payload containing source-related information for the scan.
+   * @returns {AxiosResponse} - The Axios response object representing the result of request.
+   */
   const runScan = (payload: SourceType) => {
-    /**
-     * Executes a POST request to initiate a scan using the provided payload.
-     *
-     * @param {SourceType} payload - The payload containing source-related information for the scan.
-     * @returns {AxiosResponse} - The Axios response object representing the result of request.
-     */
     return axios.post(`${process.env.REACT_APP_SCANS_SERVICE}`, payload);
   };
 
+  /**
+   * Executes a POST request to add a source, optionally triggering a scan.
+   *
+   * @param {SourceType} payload - The payload containing information about the source to be added.
+   * @returns {AxiosResponse} - The Axios response object representing the result of the request.
+   */
   const addSource = (payload: SourceType) => {
-    /**
-     * Executes a POST request to add a source, optionally triggering a scan.
-     *
-     * @param {SourceType} payload - The payload containing information about the source to be added.
-     * @returns {AxiosResponse} - The Axios response object representing the result of the request.
-     */
     return axios.post(`${process.env.REACT_APP_SOURCES_SERVICE}?scan=true`, payload);
   };
 
+  /**
+   * Executes a PUT request to submit edits to a source.
+   *
+   * @param {SourceType} payload - The payload containing information about the source to be updated.
+   * @returns {AxiosResponse} - The Axios response object representing the result of the request.
+   */
   const submitEditedSource = (payload: SourceType) => {
-    /**
-     * Executes a PUT request to submit edits to a source.
-     *
-     * @param {SourceType} payload - The payload containing information about the source to be updated.
-     * @returns {AxiosResponse} - The Axios response object representing the result of the request.
-     */
     return axios.put(`${process.env.REACT_APP_SOURCES_SERVICE}${payload.id}/`, payload);
   };
 
+  /**
+   * Executes a DELETE request to delete a source.
+   *
+   * @param {SourceType} [source] - (Optional) The source to be deleted. If not provided, it uses `pendingDeleteSource`.
+   * @returns {AxiosResponse} - The Axios response object representing the result of the request.
+   */
   const deleteSource = (source?: SourceType) => {
-    /**
-     * Executes a DELETE request to delete a source.
-     *
-     * @param {SourceType} [source] - (Optional) The source to be deleted. If not provided, it uses `pendingDeleteSource`.
-     * @returns {AxiosResponse} - The Axios response object representing the result of the request.
-     */
     return axios.delete(
       `${process.env.REACT_APP_SOURCES_SERVICE}${(source || pendingDeleteSource)?.id}/`
     );
   };
 
+  /**
+   * Executes a GET request to retrieve connection information related to a source.
+   *
+   * @param {SourceType} source - The source to which connections are related.
+   * @returns {AxiosResponse} - The Axios response object representing the result of the request.
+   */
   const showConnections = (source: SourceType) => {
-    /**
-     * Executes a GET request to retrieve connection information related to a source.
-     *
-     * @param {SourceType} source - The source to which connections are related.
-     * @returns {AxiosResponse} - The Axios response object representing the result of the request.
-     */
     return axios.get(
       `${process.env.REACT_APP_SCAN_JOBS_SERVICE}${source.connection.id}/connection/?page=1&page_size=1000&ordering=name&source_type=${source.id}`
     );
   };
 
+  /**
+   * Sets the source that is currently being edited.
+   *
+   * @param {SourceType} source - The source to be set as the one being edited.
+   */
   const onEditSource = (source: SourceType) => {
-    /**
-     * Sets the source that is currently being edited.
-     *
-     * @param {SourceType} source - The source to be set as the one being edited.
-     */
     setSourceBeingEdited(source);
   };
 
+  /**
+   * Deletes several selected sources based on user interaction.
+   * Add your logic to handle the deletion of selected items within this function.
+   */
   const onDeleteSelectedSources = () => {
-    /**
-     * Deletes several selected sources based on user interaction.
-     * Add your logic to handle the deletion of selected items within this function.
-     */
     const selectedItems = [];
     console.log('Deleting selected sources:', selectedItems);
   };
 
+  /**
+   * Closes the connections view by resetting selected connections and clearing connection data.
+   */
   const onCloseConnections = () => {
-    /**
-     * Closes the connections view by resetting selected connections and clearing connection data.
-     */
     setConnectionsSelected(undefined);
     setConnectionsData(emptyConnectionData);
   };
 
+  /**
+   * Sets the selected sources for scanning.
+   *
+   * @param {SourceType[]} items - An array of source items to be selected for scanning.
+   */
   const onScanSources = items => {
-    /**
-     * Sets the selected sources for scanning.
-     *
-     * @param {SourceType[]} items - An array of source items to be selected for scanning.
-     */
     setScanSelected(items);
   };
 
+  /**
+   * Sets a single source for scanning as the selected source.
+   *
+   * @param {SourceType} source - The source to be selected for scanning.
+   */
   const onScanSource = (source: SourceType) => {
-    /**
-     * Sets a single source for scanning as the selected source.
-     *
-     * @param {SourceType} source - The source to be selected for scanning.
-     */
     setScanSelected([source]);
   };
 

src/hooks/useAlerts.ts

@@ -11,27 +11,27 @@ import { AlertProps } from '@patternfly/react-core';
 const useAlerts = () => {
   const [alert, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
 
+  /**
+   * Add an Alert
+   *
+   * This function adds an alert to the list of alerts.
+   *
+   * @param {string} title - The title or content of the alert.
+   * @param {AlertProps['variant']} variant - The variant or style of the alert (e.g., 'success', 'danger').
+   * @param {React.Key} key - A unique key to identify the alert.
+   */
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    /**
-     * Add an Alert
-     *
-     * This function adds an alert to the list of alerts.
-     *
-     * @param {string} title - The title or content of the alert.
-     * @param {AlertProps['variant']} variant - The variant or style of the alert (e.g., 'success', 'danger').
-     * @param {React.Key} key - A unique key to identify the alert.
-     */
     setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
   };
 
+  /**
+   * Remove an Alert by Key
+   *
+   * This function removes an alert from the list of alerts based on its unique key.
+   *
+   * @param {React.Key} key - The unique key of the alert to be removed.
+   */
   const removeAlert = (key: React.Key) => {
-    /**
-     * Remove an Alert by Key
-     *
-     * This function removes an alert from the list of alerts based on its unique key.
-     *
-     * @param {React.Key} key - The unique key of the alert to be removed.
-     */
     setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
   };
 

src/pages/credentials/CredentialsListView.tsx

@@ -69,17 +69,17 @@ const CredentialsListView: React.FunctionComponent = () => {
   const { queryClient } = useQueryClientConfig();
   const { alerts, addAlert, removeAlert } = useAlerts();
 
+  /**
+   * Invalidates the query cache for the creds list, triggering a refresh.
+   */
   const onRefresh = () => {
-    /**
-     * Invalidates the query cache for the creds list, triggering a refresh.
-     */
     queryClient.invalidateQueries({ queryKey: [API_CREDS_LIST_QUERY] });
   };
 
+  /**
+   * Deletes the pending credential and handles success, error, and cleanup operations.
+   */
   const onDeleteCredential = () => {
-    /**
-     * Deletes the pending credential and handles success, error, and cleanup operations.
-     */
     deleteCredential()
       .then(() => {
         addAlert(