Skip to content

Commit

Permalink
move header to separate file
Browse files Browse the repository at this point in the history
  • Loading branch information
@eschutho
eschutho committed Jun 9, 2021
1 parent eb53d28 commit 08571d4
Show file tree
Hide file tree
Showing 2 changed files with 203 additions and 128 deletions.
108 changes: 108 additions & 0 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';
import {
EditHeaderTitle,
EditHeaderSubtitle,
CreateHeaderTitle,
CreateHeaderSubtitle,
StyledFormHeader,
} from './styles';
import { DatabaseForm, DatabaseObject } from '../types';

export const DOCUMENTATION_LINK =
'https://superset.apache.org/docs/databases/installing-database-drivers';

const ModalHeader = ({
isLoading,
isEditMode,
useSqlAlchemyForm,
hasConnectedDb,
db,
dbName,
dbModel,
}: {
isLoading: boolean;
isEditMode: boolean;
useSqlAlchemyForm: boolean;
hasConnectedDb: boolean;
db: Partial<DatabaseObject> | null;
dbName: string;
dbModel: DatabaseForm;
}) => {
const isEditHeader = (
<>
<EditHeaderTitle>{db?.backend}</EditHeaderTitle>
<EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
</>
);
const useSqlAlchemyFormHeader = (
<>
<p className="helper"> Step 2 of 2 </p>
<CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
<CreateHeaderSubtitle>
Need help? Learn how to connect your database{' '}
<a href={DOCUMENTATION_LINK} target="_blank" rel="noopener noreferrer">
here
</a>
.
</CreateHeaderSubtitle>
</>
);
const hasConnectedDbHeader = (
<StyledFormHeader>
<p className="helper"> Step 3 of 3 </p>
</StyledFormHeader>
);
const hasDbHeader = (
<StyledFormHeader>
<p className="helper"> Step 2 of 3 </p>
<h4>Enter the required {dbModel.name} credentials</h4>
<p className="helper">
Need help? Learn more about connecting to {dbModel.name}.
</p>
</StyledFormHeader>
);
const noDbHeader = (
<StyledFormHeader>
<div className="select-db">
<p className="helper"> Step 1 of 3 </p>
<h4>Select a database to connect</h4>
</div>
</StyledFormHeader>
);

if (isLoading) return <></>;
if (isEditMode) {
return isEditHeader;
}
if (useSqlAlchemyForm) {
return useSqlAlchemyFormHeader;
}
if (hasConnectedDb) {
return hasConnectedDbHeader;
}
if (db) {
return hasDbHeader;
}
return noDbHeader;
};

export default ModalHeader;
223 changes: 95 additions & 128 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,19 +58,12 @@ import {
antDTabsStyles,
buttonLinkStyles,
TabHeader,
CreateHeaderSubtitle,
CreateHeaderTitle,
EditHeaderSubtitle,
EditHeaderTitle,
formHelperStyles,
formStyles,
StyledBasicTab,
SelectDatabaseStyles,
StyledFormHeader,
} from './styles';

const DOCUMENTATION_LINK =
'https://superset.apache.org/docs/databases/installing-database-drivers';
import ModalHeader, { DOCUMENTATION_LINK } from './ModalHeader';

interface DatabaseModalProps {
addDangerToast: (msg: string) => void;
Expand Down Expand Up @@ -375,65 +368,6 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
</div>
);

const renderModalHeader = () => {
if (isEditMode) {
return (
<>
<EditHeaderTitle>{db?.backend}</EditHeaderTitle>
<EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
</>
);
}
if (useSqlAlchemyForm) {
return (
<>
<p className="helper"> Step 2 of 2 </p>
<CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
<CreateHeaderSubtitle>
Need help? Learn how to connect your database{' '}
<a
href={DOCUMENTATION_LINK}
target="_blank"
rel="noopener noreferrer"
>
here
</a>
.
</CreateHeaderSubtitle>
</>
);
}
if (!isLoading && !db) {
return (
<StyledFormHeader>
<div className="select-db">
<p className="helper"> Step 1 of 3 </p>
<h4>Select a database to connect</h4>
</div>
</StyledFormHeader>
);
}
if (!isEditMode && db && !isLoading && !hasConnectedDb) {
return (
<StyledFormHeader>
<p className="helper"> Step 2 of 3 </p>
<h4>Enter the required {dbModel.name} credentials</h4>
<p className="helper">
Need help? Learn more about connecting to {dbModel.name}.
</p>
</StyledFormHeader>
);
}
if (hasConnectedDb) {
return (
<StyledFormHeader>
<p className="helper"> Step 3 of 3 </p>
</StyledFormHeader>
);
}
return <></>;
};

const renderModalFooter = () =>
db // if db show back + connect
? [
Expand Down Expand Up @@ -509,7 +443,17 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
}
footer={renderModalFooter()}
>
<TabHeader>{renderModalHeader()}</TabHeader>
<TabHeader>
<ModalHeader
isLoading={isLoading}
isEditMode={isEditMode}
useSqlAlchemyForm={useSqlAlchemyForm}
hasConnectedDb={hasConnectedDb}
db={db}
dbName={dbName}
dbModel={dbModel}
/>
</TabHeader>
<hr />
<Tabs
defaultActiveKey={DEFAULT_TAB_KEY}
Expand Down Expand Up @@ -628,7 +572,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
>
{hasConnectedDb ? (
<>
{renderModalHeader()}
<ModalHeader
isLoading={isLoading}
isEditMode={isEditMode}
useSqlAlchemyForm={useSqlAlchemyForm}
hasConnectedDb={hasConnectedDb}
db={db}
dbName={dbName}
dbModel={dbModel}
/>

<ExtraOptions
db={db as DatabaseObject}
onInputChange={({ target }: { target: HTMLInputElement }) =>
Expand All @@ -653,66 +606,80 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
) : (
<>
{/* Step 1 */}
{!isLoading && !db && (
<SelectDatabaseStyles>
{renderModalHeader()}
{renderPreferredSelector()}
{renderAvailableSelector()}
</SelectDatabaseStyles>
)}
{/* Step 1 */}
{!isLoading &&
(!db ? (
<SelectDatabaseStyles>
<ModalHeader
isLoading={isLoading}
isEditMode={isEditMode}
useSqlAlchemyForm={useSqlAlchemyForm}
hasConnectedDb={hasConnectedDb}
db={db}
dbName={dbName}
dbModel={dbModel}
/>
{renderPreferredSelector()}
{renderAvailableSelector()}
</SelectDatabaseStyles>
) : (
<>
<ModalHeader
isLoading={isLoading}
isEditMode={isEditMode}
useSqlAlchemyForm={useSqlAlchemyForm}
hasConnectedDb={hasConnectedDb}
db={db}
dbName={dbName}
dbModel={dbModel}
/>
<DatabaseConnectionForm
db={db}
sslForced={sslForced}
dbModel={dbModel}
onParametersChange={({
target,
}: {
target: HTMLInputElement;
}) =>
onChange(ActionType.parametersChange, {
type: target.type,
name: target.name,
checked: target.checked,
value: target.value,
})
}
onChange={({ target }: { target: HTMLInputElement }) =>
onChange(ActionType.textChange, {
name: target.name,
value: target.value,
})
}
getValidation={() => getValidation(db)}
validationErrors={validationErrors}
uploadOption={uploadOption}
setUploadOption={setUploadOption}
fileToUpload={fileToUpload}
setFileToUpload={setFileToUpload}
/>

{/* Step 2 */}
{!isLoading && db && (
<>
{renderModalHeader()}
<DatabaseConnectionForm
db={db}
sslForced={sslForced}
dbModel={dbModel}
onParametersChange={({
target,
}: {
target: HTMLInputElement;
}) =>
onChange(ActionType.parametersChange, {
type: target.type,
name: target.name,
checked: target.checked,
value: target.value,
})
}
onChange={({ target }: { target: HTMLInputElement }) =>
onChange(ActionType.textChange, {
name: target.name,
value: target.value,
})
}
getValidation={() => getValidation(db)}
validationErrors={validationErrors}
uploadOption={uploadOption}
setUploadOption={setUploadOption}
fileToUpload={fileToUpload}
setFileToUpload={setFileToUpload}
/>

<Button
buttonStyle="link"
onClick={() =>
setDB({
type: ActionType.configMethodChange,
payload: {
configuration_method: CONFIGURATION_METHOD.SQLALCHEMY_URI,
},
})
}
css={buttonLinkStyles}
>
Connect this database with a SQLAlchemy URI string instead
</Button>
{/* Step 2 */}
</>
)}
<Button
buttonStyle="link"
onClick={() =>
setDB({
type: ActionType.configMethodChange,
payload: {
configuration_method:
CONFIGURATION_METHOD.SQLALCHEMY_URI,
},
})
}
css={buttonLinkStyles}
>
Connect this database with a SQLAlchemy URI string instead
</Button>
{/* Step 2 */}
</>
))}
</>
)}
</Modal>
Expand Down

0 comments on commit 08571d4

Please sign in to comment.