From 26e82e514d3c552b2b1149299f2616dddc74e231 Mon Sep 17 00:00:00 2001
From: Luciano Gorza <lucianogorza@gmail.com>
Date: Tue, 2 Jan 2024 11:39:18 -0300
Subject: [PATCH 1/4] Fix Server APIs table updates status column

---
 .../components/settings/api/api-table.js      | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/plugins/main/public/components/settings/api/api-table.js b/plugins/main/public/components/settings/api/api-table.js
index 53e6056e33..d048a93d57 100644
--- a/plugins/main/public/components/settings/api/api-table.js
+++ b/plugins/main/public/components/settings/api/api-table.js
@@ -211,6 +211,10 @@ export const ApiTable = compose(
           text: 'Error checking updates',
           color: 'danger',
         },
+        undefined: {
+          text: 'Never checked',
+          color: 'subdued',
+        },
       };
 
       const isLoading = this.state.refreshingEntries || this.state.refreshingAvailableUpdates;
@@ -336,22 +340,32 @@ export const ApiTable = compose(
           name: 'Updates status',
           sortable: true,
           render: (item, api) => {
-            const getColor = () => {
-              return API_UPDATES_STATUS_COLUMN[item]?.color;
-            };
+            const color = API_UPDATES_STATUS_COLUMN[item]?.color;
 
-            const getContent = () => {
-              return API_UPDATES_STATUS_COLUMN[item]?.text;
-            };
+            const content = API_UPDATES_STATUS_COLUMN[item]?.text;
 
             if (!this.state.refreshingAvailableUpdates) {
               return (
                 <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
                   <EuiFlexItem grow={false}>
-                    <EuiHealth color={getColor()} style={{ wordBreak: 'normal' }}>
-                      {getContent()}
+                    <EuiHealth color={color} style={{ wordBreak: 'normal' }}>
+                      {content}
                     </EuiHealth>
                   </EuiFlexItem>
+                  {!item ? (
+                    <EuiFlexItem grow={false}>
+                      <EuiToolTip
+                        position="top"
+                        content={
+                          <p>
+                            Click <b>Check updates</b> button to get information
+                          </p>
+                        }
+                      >
+                        <EuiButtonIcon aria-label={content} iconType="questionInCircle" />
+                      </EuiToolTip>
+                    </EuiFlexItem>
+                  ) : null}
                   {item === 'availableUpdates' ? (
                     <EuiFlexItem grow={false}>
                       <EuiToolTip position="top" content={<p>View available updates</p>}>

From 9daa785f31fb4186658a4325d4e35be64c2ee792 Mon Sep 17 00:00:00 2001
From: Luciano Gorza <lucianogorza@gmail.com>
Date: Tue, 2 Jan 2024 11:44:43 -0300
Subject: [PATCH 2/4] Update CHANGELOG

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3f7820f76..367f842c40 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Added
 
 - Support for Wazuh 4.8.0
-- Added the ability to check if there are available updates from the UI. [#6093](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6093)
+- Added the ability to check if there are available updates from the UI. [#6093](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6093) [#6256](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6256)
 - Added remember server address check [#5791](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5791)
 - Added the ssl_agent_ca configuration to the SSL Settings form [#6083](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6083)
 - Added global vulnerabilities dashboards [#5896](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5896) [#6179](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6179) [#6173](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6173) [#6147](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6147)

From 55303f7991b0a835d939e748280fcdec895a908e Mon Sep 17 00:00:00 2001
From: Luciano Gorza <lucianogorza@gmail.com>
Date: Tue, 2 Jan 2024 12:46:32 -0300
Subject: [PATCH 3/4] Improve color and content definition

---
 plugins/main/public/components/settings/api/api-table.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/plugins/main/public/components/settings/api/api-table.js b/plugins/main/public/components/settings/api/api-table.js
index d048a93d57..2833942ebc 100644
--- a/plugins/main/public/components/settings/api/api-table.js
+++ b/plugins/main/public/components/settings/api/api-table.js
@@ -211,10 +211,6 @@ export const ApiTable = compose(
           text: 'Error checking updates',
           color: 'danger',
         },
-        undefined: {
-          text: 'Never checked',
-          color: 'subdued',
-        },
       };
 
       const isLoading = this.state.refreshingEntries || this.state.refreshingAvailableUpdates;
@@ -340,9 +336,9 @@ export const ApiTable = compose(
           name: 'Updates status',
           sortable: true,
           render: (item, api) => {
-            const color = API_UPDATES_STATUS_COLUMN[item]?.color;
+            const color = API_UPDATES_STATUS_COLUMN[item]?.color ?? 'subdued';
 
-            const content = API_UPDATES_STATUS_COLUMN[item]?.text;
+            const content = API_UPDATES_STATUS_COLUMN[item]?.text ?? 'Never checked';
 
             if (!this.state.refreshingAvailableUpdates) {
               return (

From 8051e703cd4554970b8f9c54c306bf6713825285 Mon Sep 17 00:00:00 2001
From: Luciano Gorza <lucianogorza@gmail.com>
Date: Tue, 2 Jan 2024 13:04:15 -0300
Subject: [PATCH 4/4] Format file

---
 .../components/settings/api/api-table.js      | 198 +++++++++++-------
 1 file changed, 127 insertions(+), 71 deletions(-)

diff --git a/plugins/main/public/components/settings/api/api-table.js b/plugins/main/public/components/settings/api/api-table.js
index 2833942ebc..89bed290c1 100644
--- a/plugins/main/public/components/settings/api/api-table.js
+++ b/plugins/main/public/components/settings/api/api-table.js
@@ -41,7 +41,7 @@ import { formatUIDate } from '../../../react-services/time-service';
 
 export const ApiTable = compose(
   withErrorBoundary,
-  withReduxProvider
+  withReduxProvider,
 )(
   class ApiTable extends Component {
     constructor(props) {
@@ -62,7 +62,9 @@ export const ApiTable = compose(
     async getApisAvailableUpdates(forceUpdate = false) {
       try {
         this.setState({ refreshingAvailableUpdates: true });
-        const availableUpdates = await this.state.getAvailableUpdates(forceUpdate);
+        const availableUpdates = await this.state.getAvailableUpdates(
+          forceUpdate,
+        );
         this.setState({ availableUpdates });
       } catch (error) {
         const options = {
@@ -73,7 +75,9 @@ export const ApiTable = compose(
           error: {
             error: error,
             message: error.message || error,
-            title: `Error checking available updates: ${error.message || error}`,
+            title: `Error checking available updates: ${
+              error.message || error
+            }`,
           },
         };
 
@@ -141,7 +145,12 @@ export const ApiTable = compose(
           refreshingEntries: false,
         });
       } catch (error) {
-        if (error && error.data && error.data.message && error.data.code === 2001) {
+        if (
+          error &&
+          error.data &&
+          error.data.message &&
+          error.data.code === 2001
+        ) {
           this.props.showAddApiWithInitialError(error);
         }
       }
@@ -154,7 +163,7 @@ export const ApiTable = compose(
     async checkApi(api) {
       try {
         const entries = this.state.apiEntries;
-        const idx = entries.map((e) => e.id).indexOf(api.id);
+        const idx = entries.map(e => e.id).indexOf(api.id);
         try {
           await this.props.checkManager(api);
           entries[idx].status = 'online';
@@ -183,7 +192,9 @@ export const ApiTable = compose(
           error: {
             error: error,
             message: error.message || error,
-            title: `Error checking manager connection: ${error.message || error}`,
+            title: `Error checking manager connection: ${
+              error.message || error
+            }`,
           },
         };
 
@@ -213,13 +224,14 @@ export const ApiTable = compose(
         },
       };
 
-      const isLoading = this.state.refreshingEntries || this.state.refreshingAvailableUpdates;
+      const isLoading =
+        this.state.refreshingEntries || this.state.refreshingAvailableUpdates;
 
       const items = [
-        ...this.state.apiEntries?.map((apiEntry) => {
+        ...this.state.apiEntries?.map(apiEntry => {
           const versionData =
             this.state.availableUpdates?.apis_available_updates?.find(
-              (apiAvailableUpdates) => apiAvailableUpdates.api_id === apiEntry.id
+              apiAvailableUpdates => apiAvailableUpdates.api_id === apiEntry.id,
             ) || {};
 
           return {
@@ -272,44 +284,56 @@ export const ApiTable = compose(
           name: 'Status',
           align: 'left',
           sortable: true,
-          render: (item) => {
+          render: item => {
             if (item) {
               return item === 'online' ? (
-                <EuiHealth color="success" style={{ wordBreak: 'normal' }}>
+                <EuiHealth color='success' style={{ wordBreak: 'normal' }}>
                   Online
                 </EuiHealth>
               ) : item.status === 'down' ? (
-                <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+                <EuiFlexGroup
+                  alignItems='center'
+                  gutterSize='xs'
+                  responsive={false}
+                >
                   <EuiFlexItem grow={false}>
-                    <EuiHealth color="warning" style={{ wordBreak: 'normal' }}>
+                    <EuiHealth color='warning' style={{ wordBreak: 'normal' }}>
                       Warning
                     </EuiHealth>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiToolTip position="top" content={item.downReason}>
+                    <EuiToolTip position='top' content={item.downReason}>
                       <EuiButtonIcon
-                        color="primary"
-                        iconType="questionInCircle"
-                        aria-label="Info about the error"
-                        onClick={() => this.props.copyToClipBoard(item.downReason)}
+                        color='primary'
+                        iconType='questionInCircle'
+                        aria-label='Info about the error'
+                        onClick={() =>
+                          this.props.copyToClipBoard(item.downReason)
+                        }
                       />
                     </EuiToolTip>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               ) : (
-                <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+                <EuiFlexGroup
+                  alignItems='center'
+                  gutterSize='xs'
+                  responsive={false}
+                >
                   <EuiFlexItem grow={false}>
-                    <EuiHealth color="danger" style={{ wordBreak: 'normal' }}>
+                    <EuiHealth color='danger' style={{ wordBreak: 'normal' }}>
                       Offline
                     </EuiHealth>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiToolTip position="top" content={item.downReason}>
+                    <EuiToolTip position='top' content={item.downReason}>
                       <EuiButtonIcon
-                        color="primary"
-                        iconType="questionInCircle"
-                        aria-label="Info about the error"
-                        onClick={() => this.props.copyToClipBoard(item.downReason)}
+                        color='primary'
+                        iconType='questionInCircle'
+                        aria-label='Info about the error'
+                        onClick={() =>
+                          this.props.copyToClipBoard(item.downReason)
+                        }
                       />
                     </EuiToolTip>
                   </EuiFlexItem>
@@ -318,7 +342,7 @@ export const ApiTable = compose(
             } else {
               return (
                 <span>
-                  <EuiLoadingSpinner size="s" />
+                  <EuiLoadingSpinner size='s' />
                   <span>&nbsp;&nbsp;Checking</span>
                 </span>
               );
@@ -338,11 +362,16 @@ export const ApiTable = compose(
           render: (item, api) => {
             const color = API_UPDATES_STATUS_COLUMN[item]?.color ?? 'subdued';
 
-            const content = API_UPDATES_STATUS_COLUMN[item]?.text ?? 'Never checked';
+            const content =
+              API_UPDATES_STATUS_COLUMN[item]?.text ?? 'Never checked';
 
             if (!this.state.refreshingAvailableUpdates) {
               return (
-                <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+                <EuiFlexGroup
+                  alignItems='center'
+                  gutterSize='xs'
+                  responsive={false}
+                >
                   <EuiFlexItem grow={false}>
                     <EuiHealth color={color} style={{ wordBreak: 'normal' }}>
                       {content}
@@ -351,36 +380,50 @@ export const ApiTable = compose(
                   {!item ? (
                     <EuiFlexItem grow={false}>
                       <EuiToolTip
-                        position="top"
+                        position='top'
                         content={
                           <p>
                             Click <b>Check updates</b> button to get information
                           </p>
                         }
                       >
-                        <EuiButtonIcon aria-label={content} iconType="questionInCircle" />
+                        <EuiButtonIcon
+                          aria-label={content}
+                          iconType='questionInCircle'
+                        />
                       </EuiToolTip>
                     </EuiFlexItem>
                   ) : null}
                   {item === 'availableUpdates' ? (
                     <EuiFlexItem grow={false}>
-                      <EuiToolTip position="top" content={<p>View available updates</p>}>
+                      <EuiToolTip
+                        position='top'
+                        content={<p>View available updates</p>}
+                      >
                         <EuiButtonIcon
-                          aria-label="Availabe updates"
-                          iconType="eye"
-                          onClick={() => this.setState({ apiAvailableUpdateDetails: api })}
+                          aria-label='Availabe updates'
+                          iconType='eye'
+                          onClick={() =>
+                            this.setState({ apiAvailableUpdateDetails: api })
+                          }
                         />
                       </EuiToolTip>
                     </EuiFlexItem>
                   ) : null}
                   {item === 'error' && api.error?.detail ? (
                     <EuiFlexItem grow={false}>
-                      <EuiToolTip position="top" title={api.error.title} content={api.error.detail}>
+                      <EuiToolTip
+                        position='top'
+                        title={api.error.title}
+                        content={api.error.detail}
+                      >
                         <EuiButtonIcon
-                          color="primary"
-                          iconType="questionInCircle"
-                          aria-label="Info about the error"
-                          onClick={() => this.props.copyToClipBoard(api.error.detail)}
+                          color='primary'
+                          iconType='questionInCircle'
+                          aria-label='Info about the error'
+                          onClick={() =>
+                            this.props.copyToClipBoard(api.error.detail)
+                          }
                         />
                       </EuiToolTip>
                     </EuiFlexItem>
@@ -390,7 +433,7 @@ export const ApiTable = compose(
             } else {
               return (
                 <span>
-                  <EuiLoadingSpinner size="s" />
+                  <EuiLoadingSpinner size='s' />
                   <span>&nbsp;&nbsp;Checking</span>
                 </span>
               );
@@ -403,20 +446,20 @@ export const ApiTable = compose(
           align: 'center',
           sortable: true,
           width: '80px',
-          render: (value) => {
+          render: value => {
             return value === API_USER_STATUS_RUN_AS.ENABLED ? (
               <EuiToolTip
-                position="top"
-                content="The configured API user uses the authentication context."
+                position='top'
+                content='The configured API user uses the authentication context.'
               >
-                <EuiIcon type="check" />
+                <EuiIcon type='check' />
               </EuiToolTip>
             ) : value === API_USER_STATUS_RUN_AS.USER_NOT_ALLOWED ? (
               <EuiToolTip
-                position="top"
-                content="The configured API user is not allowed to use run_as. Give it permissions or set run_as with false value in the host configuration."
+                position='top'
+                content='The configured API user is not allowed to use run_as. Give it permissions or set run_as with false value in the host configuration.'
               >
-                <EuiIcon color="danger" type="alert" />
+                <EuiIcon color='danger' type='alert' />
               </EuiToolTip>
             ) : (
               ''
@@ -425,15 +468,19 @@ export const ApiTable = compose(
         },
         {
           name: 'Actions',
-          render: (item) => (
+          render: item => (
             <EuiFlexGroup>
               <EuiFlexItem grow={false}>
                 <WzButtonPermissions
-                  buttonType="icon"
+                  buttonType='icon'
                   roles={[]}
                   tooltip={{ position: 'top', content: <p>Set as default</p> }}
-                  iconType={item.id === this.props.currentDefault ? 'starFilled' : 'starEmpty'}
-                  aria-label="Set as default"
+                  iconType={
+                    item.id === this.props.currentDefault
+                      ? 'starFilled'
+                      : 'starEmpty'
+                  }
+                  aria-label='Set as default'
                   onClick={async () => {
                     const currentDefault = await this.props.setDefault(item);
                     this.setState({
@@ -443,12 +490,12 @@ export const ApiTable = compose(
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiToolTip position="top" content={<p>Check connection</p>}>
+                <EuiToolTip position='top' content={<p>Check connection</p>}>
                   <EuiButtonIcon
-                    aria-label="Check connection"
-                    iconType="refresh"
+                    aria-label='Check connection'
+                    iconType='refresh'
                     onClick={async () => await this.checkApi(item)}
-                    color="success"
+                    color='success'
                   />
                 </EuiToolTip>
               </EuiFlexItem>
@@ -466,8 +513,8 @@ export const ApiTable = compose(
 
       return (
         <EuiPage>
-          <EuiPanel paddingSize="l">
-            <EuiFlexGroup alignItems="center">
+          <EuiPanel paddingSize='l'>
+            <EuiFlexGroup alignItems='center'>
               <EuiFlexItem>
                 <EuiFlexGroup>
                   <EuiFlexItem>
@@ -479,8 +526,8 @@ export const ApiTable = compose(
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <WzButtonPermissions
-                  buttonType="empty"
-                  iconType="plusInCircle"
+                  buttonType='empty'
+                  iconType='plusInCircle'
                   roles={[]}
                   onClick={() => this.props.showAddApi()}
                 >
@@ -488,26 +535,33 @@ export const ApiTable = compose(
                 </WzButtonPermissions>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty iconType="refresh" onClick={async () => await this.refresh()}>
+                <EuiButtonEmpty
+                  iconType='refresh'
+                  onClick={async () => await this.refresh()}
+                >
                   Refresh
                 </EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiButtonEmpty
-                  iconType="refresh"
+                  iconType='refresh'
                   onClick={async () => await this.getApisAvailableUpdates(true)}
                 >
                   <span>
                     Check updates{' '}
                     <EuiToolTip
-                      title="Last check"
+                      title='Last check'
                       content={
                         this.state.availableUpdates?.last_check_date
-                          ? formatUIDate(new Date(this.state.availableUpdates.last_check_date))
+                          ? formatUIDate(
+                              new Date(
+                                this.state.availableUpdates.last_check_date,
+                              ),
+                            )
                           : '-'
                       }
                     >
-                      <EuiIcon type="iInCircle" color="primary" />
+                      <EuiIcon type='iInCircle' color='primary' />
                     </EuiToolTip>
                   </span>
                 </EuiButtonEmpty>
@@ -518,32 +572,34 @@ export const ApiTable = compose(
             </EuiFlexGroup>
             <EuiFlexGroup>
               <EuiFlexItem>
-                <EuiText color="subdued" style={{ paddingBottom: '15px' }}>
-                  From here you can manage and configure the API entries. You can also check their
-                  connection and status.
+                <EuiText color='subdued' style={{ paddingBottom: '15px' }}>
+                  From here you can manage and configure the API entries. You
+                  can also check their connection and status.
                 </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiInMemoryTable
-              itemId="id"
+              itemId='id'
               items={items}
               search={search}
               columns={columns}
               pagination={true}
               sorting={true}
               loading={isLoading}
-              tableLayout="auto"
+              tableLayout='auto'
             />
           </EuiPanel>
           <AvailableUpdatesFlyout
             api={this.state.apiAvailableUpdateDetails}
             isVisible={!!this.state.apiAvailableUpdateDetails}
-            onClose={() => this.setState({ apiAvailableUpdateDetails: undefined })}
+            onClose={() =>
+              this.setState({ apiAvailableUpdateDetails: undefined })
+            }
           />
         </EuiPage>
       );
     }
-  }
+  },
 );
 
 ApiTable.propTypes = {