Merge pull request #296 from dbeaver/feat/ssh-icon

feat(core-connections): CB-732 add ssh icon to connection details

webapp/packages/core-connections/public/icons/template_connection.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
-    <path fill="#338ECC" fill-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm-4-9h10V12l-4-4h-6v15zM10 9h1v15h10v1H10V9zm4 4h6v1h-6v-1zm6 2h-6v1h6v-1zm-6 2h4v1h-4v-1z" clip-rule="evenodd"/>
+    <path fill="#69AAD7" fill-rule="evenodd" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm-4-9h10V12l-4-4h-6v15zM10 9h1v15h10v1H10V9zm4 4h6v1h-6v-1zm6 2h-6v1h6v-1zm-6 2h4v1h-4v-1z" clip-rule="evenodd"/>
 </svg>

webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts

@@ -18,6 +18,7 @@ import { DatabaseConnection, ConnectionsResource } from '../ConnectionsResource'
 import { ConnectionsAdministration } from './ConnectionsAdministration';
 import { ConnectionsDrawerItem } from './ConnectionsDrawerItem';
 import { Origin } from './ConnectionsTable/ConnectionDetailsInfo/Origin';
+import { SSH } from './ConnectionsTable/ConnectionDetailsInfo/SSH';
 import { Template } from './ConnectionsTable/ConnectionDetailsInfo/Template';
 import { CreateConnectionService } from './CreateConnectionService';
 
@@ -65,6 +66,7 @@ export class ConnectionsAdministrationService extends Bootstrap {
     });
     this.connectionDetailsPlaceholder.add(Origin, 0);
     this.connectionDetailsPlaceholder.add(Template, 1);
+    this.connectionDetailsPlaceholder.add(SSH, 2);
   }
 
   load(): void | Promise<void> { }

webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx

@@ -0,0 +1,35 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import styled from 'reshadow';
+
+import { StaticImage, useMapResource } from '@cloudbeaver/core-blocks';
+import { useTranslate } from '@cloudbeaver/core-localization';
+
+import { NetworkHandlerResource, SSH_TUNNEL_ID } from '../../../../NetworkHandlerResource';
+import type { DatabaseConnection } from '../../../ConnectionsResource';
+import { CONNECTION_DETAILS_STYLES } from './ConnectionDetailsStyles';
+
+interface Props {
+  context: DatabaseConnection;
+}
+
+export const SSH: React.FC<Props> = observer(function SSH({ context }) {
+  const translate = useTranslate();
+  const handler = useMapResource(NetworkHandlerResource, SSH_TUNNEL_ID);
+  const sshConfig = context.networkHandlersConfig.find(state => state.id === SSH_TUNNEL_ID);
+
+  if (!sshConfig || !sshConfig.enabled) {
+    return null;
+  }
+
+  return styled(CONNECTION_DETAILS_STYLES)(
+    <StaticImage icon='/icons/ssh_tunnel.png' title={translate(handler.data?.label || 'connections_network_handler_ssh_tunnel_title')} />
+  );
+});