Skip to content

Commit beb83af

Browse files
jankucajankuca
committed
split warehouses and databases
1 parent b9a5ea7 commit beb83af

File tree

5 files changed

+115
-64
lines changed

5 files changed

+115
-64
lines changed

‎src/messageTypes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,8 @@ export type LocalizedMessages = {
185185
integrationsSave: string;
186186
integrationsAddNewIntegration: string;
187187
integrationsDatabase: string;
188+
integrationsDataWarehousesLakes: string;
189+
integrationsDatabases: string;
188190
// Integration type labels
189191
integrationsPostgresTypeLabel: string;
190192
integrationsBigQueryTypeLabel: string;

‎src/notebooks/deepnote/integrations/integrationWebview.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,8 @@ export class IntegrationWebviewProvider implements IIntegrationWebviewProvider {
133133
integrationsConfigureTitle: localize.Integrations.configureTitle,
134134
integrationsAddNewIntegration: localize.Integrations.addNewIntegration,
135135
integrationsDatabase: localize.Integrations.database,
136+
integrationsDataWarehousesLakes: localize.Integrations.dataWarehousesLakes,
137+
integrationsDatabases: localize.Integrations.databases,
136138
integrationsPostgresTypeLabel: localize.Integrations.postgresTypeLabel,
137139
integrationsBigQueryTypeLabel: localize.Integrations.bigQueryTypeLabel,
138140
integrationsSnowflakeTypeLabel: localize.Integrations.snowflakeTypeLabel,

‎src/platform/common/utils/localize.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -836,6 +836,8 @@ export namespace Integrations {
836836
export const save = l10n.t('Save');
837837
export const addNewIntegration = l10n.t('Add New Integration');
838838
export const database = l10n.t('Database');
839+
export const dataWarehousesLakes = l10n.t('Data Warehouses & Lakes');
840+
export const databases = l10n.t('Databases');
839841
export const requiredField = l10n.t('*');
840842
export const optionalField = l10n.t('(optional)');
841843
export const unnamedIntegration = (id: string) => l10n.t('Unnamed Integration ({0})', id);

‎src/webviews/webview-side/integrations/IntegrationTypeSelector.tsx‎

Lines changed: 90 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,57 @@ interface IntegrationTypeInfo {
3434
icon: string;
3535
}
3636

37-
const INTEGRATION_TYPES: IntegrationTypeInfo[] = [
37+
// Data Warehouses & Lakes
38+
const WAREHOUSE_INTEGRATION_TYPES: IntegrationTypeInfo[] = [
39+
{
40+
type: 'clickhouse',
41+
label: integrationTypeLabels['clickhouse'],
42+
icon: clickhouseLogo
43+
},
44+
{
45+
type: 'redshift',
46+
label: integrationTypeLabels['redshift'],
47+
icon: redshiftLogo
48+
},
49+
{
50+
type: 'athena',
51+
label: integrationTypeLabels['athena'],
52+
icon: athenaLogo
53+
},
54+
{
55+
type: 'big-query',
56+
label: integrationTypeLabels['big-query'],
57+
icon: bigqueryLogo
58+
},
59+
{
60+
type: 'snowflake',
61+
label: integrationTypeLabels['snowflake'],
62+
icon: snowflakeLogo
63+
},
64+
{
65+
type: 'databricks',
66+
label: integrationTypeLabels['databricks'],
67+
icon: databricksLogo
68+
},
69+
{
70+
type: 'dremio',
71+
label: integrationTypeLabels['dremio'],
72+
icon: dremioLogo
73+
},
74+
{
75+
type: 'trino',
76+
label: integrationTypeLabels['trino'],
77+
icon: trinoLogo
78+
}
79+
];
80+
81+
// Databases
82+
const DATABASE_INTEGRATION_TYPES: IntegrationTypeInfo[] = [
83+
{
84+
type: 'mongodb',
85+
label: integrationTypeLabels['mongodb'],
86+
icon: mongodbLogo
87+
},
3888
{
3989
type: 'pgsql',
4090
label: integrationTypeLabels['pgsql'],
@@ -50,26 +100,11 @@ const INTEGRATION_TYPES: IntegrationTypeInfo[] = [
50100
label: integrationTypeLabels['mariadb'],
51101
icon: mariadbLogo
52102
},
53-
{
54-
type: 'mongodb',
55-
label: integrationTypeLabels['mongodb'],
56-
icon: mongodbLogo
57-
},
58103
{
59104
type: 'sql-server',
60105
label: integrationTypeLabels['sql-server'],
61106
icon: sqlServerLogo
62107
},
63-
{
64-
type: 'big-query',
65-
label: integrationTypeLabels['big-query'],
66-
icon: bigqueryLogo
67-
},
68-
{
69-
type: 'snowflake',
70-
label: integrationTypeLabels['snowflake'],
71-
icon: snowflakeLogo
72-
},
73108
{
74109
type: 'alloydb',
75110
label: integrationTypeLabels['alloydb'],
@@ -85,64 +120,56 @@ const INTEGRATION_TYPES: IntegrationTypeInfo[] = [
85120
label: integrationTypeLabels['materialize'],
86121
icon: materializeLogo
87122
},
88-
{
89-
type: 'clickhouse',
90-
label: integrationTypeLabels['clickhouse'],
91-
icon: clickhouseLogo
92-
},
93-
{
94-
type: 'athena',
95-
label: integrationTypeLabels['athena'],
96-
icon: athenaLogo
97-
},
98-
{
99-
type: 'redshift',
100-
label: integrationTypeLabels['redshift'],
101-
icon: redshiftLogo
102-
},
103-
{
104-
type: 'databricks',
105-
label: integrationTypeLabels['databricks'],
106-
icon: databricksLogo
107-
},
108-
{
109-
type: 'dremio',
110-
label: integrationTypeLabels['dremio'],
111-
icon: dremioLogo
112-
},
113123
{
114124
type: 'mindsdb',
115125
label: integrationTypeLabels['mindsdb'],
116126
icon: mindsdbLogo
117-
},
118-
{
119-
type: 'trino',
120-
label: integrationTypeLabels['trino'],
121-
icon: trinoLogo
122127
}
123128
];
124129

125130
export const IntegrationTypeSelector: React.FC<IIntegrationTypeSelectorProps> = ({ onSelectType }) => {
126131
return (
127132
<div className="integration-type-selector">
128133
<h2>{getLocString('integrationsAddNewIntegration', 'Add New Integration')}</h2>
129-
<div className="integration-type-grid">
130-
{INTEGRATION_TYPES.map((integrationInfo) => (
131-
<button
132-
key={integrationInfo.type}
133-
type="button"
134-
className="integration-type-card"
135-
onClick={() => onSelectType(integrationInfo.type)}
136-
>
137-
<div className="integration-type-icon">
138-
<img src={integrationInfo.icon} alt={integrationInfo.label} />
139-
</div>
140-
<div className="integration-type-label">{integrationInfo.label}</div>
141-
<div className="integration-type-category">
142-
{getLocString('integrationsDatabase', 'Database')}
143-
</div>
144-
</button>
145-
))}
134+
135+
<div className="integration-type-section">
136+
<h3 className="integration-type-section-title">
137+
{getLocString('integrationsDataWarehousesLakes', 'Data Warehouses & Lakes')}
138+
</h3>
139+
<div className="integration-type-grid">
140+
{WAREHOUSE_INTEGRATION_TYPES.map((integrationInfo) => (
141+
<button
142+
key={integrationInfo.type}
143+
type="button"
144+
className="integration-type-card"
145+
onClick={() => onSelectType(integrationInfo.type)}
146+
>
147+
<div className="integration-type-icon">
148+
<img src={integrationInfo.icon} alt={integrationInfo.label} />
149+
</div>
150+
<div className="integration-type-label">{integrationInfo.label}</div>
151+
</button>
152+
))}
153+
</div>
154+
</div>
155+
156+
<div className="integration-type-section">
157+
<h3 className="integration-type-section-title">{getLocString('integrationsDatabases', 'Databases')}</h3>
158+
<div className="integration-type-grid">
159+
{DATABASE_INTEGRATION_TYPES.map((integrationInfo) => (
160+
<button
161+
key={integrationInfo.type}
162+
type="button"
163+
className="integration-type-card"
164+
onClick={() => onSelectType(integrationInfo.type)}
165+
>
166+
<div className="integration-type-icon">
167+
<img src={integrationInfo.icon} alt={integrationInfo.label} />
168+
</div>
169+
<div className="integration-type-label">{integrationInfo.label}</div>
170+
</button>
171+
))}
172+
</div>
146173
</div>
147174
</div>
148175
);

‎src/webviews/webview-side/integrations/integrations.css‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,11 +291,29 @@ form {
291291

292292
.integration-type-selector h2 {
293293
margin-top: 0;
294-
margin-bottom: 16px;
294+
margin-bottom: 24px;
295295
font-size: 1.2em;
296296
font-weight: 600;
297297
}
298298

299+
.integration-type-section {
300+
margin-bottom: 32px;
301+
}
302+
303+
.integration-type-section:last-child {
304+
margin-bottom: 0;
305+
}
306+
307+
.integration-type-section-title {
308+
margin-top: 0;
309+
margin-bottom: 12px;
310+
font-size: 0.95em;
311+
font-weight: 600;
312+
color: var(--vscode-descriptionForeground);
313+
text-transform: uppercase;
314+
letter-spacing: 0.5px;
315+
}
316+
299317
.integration-type-grid {
300318
display: grid;
301319
grid-template-columns: repeat(3, 1fr);

0 commit comments

Comments
 (0)