feat(explore): UI changes in dataset panel on Explore page (#19394)
* feat(explore): Implement new design for dataset panel * Fixes * Replace drag handle in dashboard builder * Add missing types * Type fix * Fix tests * Fix non-dnd version * Fix test * Replace margin with height
This commit is contained in:
Kamil Gabryjelski
GitHub
parent
a619cb4ea9
commit
a076ae6d99
|
|
@ -58471,6 +58471,7 @@
|
|||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ant-design/icons": "^4.2.2",
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@superset-ui/core": "*",
|
||||
"@testing-library/dom": "^7.29.4",
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ant-design/icons": "^4.2.2",
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@superset-ui/core": "*",
|
||||
"@testing-library/dom": "^7.29.4",
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@ function CertifiedIconWithTooltip({
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
enableBackground="new 0 0 24 24"
|
||||
height="16"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
width="14"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React, { useState, ReactNode, useLayoutEffect } from 'react';
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { css, styled, SupersetTheme } from '@superset-ui/core';
|
||||
import { Tooltip } from './Tooltip';
|
||||
import { ColumnTypeLabel } from './ColumnTypeLabel';
|
||||
import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel';
|
||||
import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
|
||||
import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
|
||||
import { ColumnMeta } from '../types';
|
||||
|
|
@ -32,6 +32,8 @@ export type ColumnOptionProps = {
|
|||
};
|
||||
|
||||
const StyleOverrides = styled.span`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
svg {
|
||||
margin-right: ${({ theme }) => theme.gridUnit}px;
|
||||
}
|
||||
|
|
@ -54,15 +56,16 @@ export function ColumnOption({
|
|||
return (
|
||||
<StyleOverrides>
|
||||
{showType && type !== undefined && <ColumnTypeLabel type={type} />}
|
||||
{column.is_certified && (
|
||||
<CertifiedIconWithTooltip
|
||||
metricName={column.metric_name}
|
||||
certifiedBy={column.certified_by}
|
||||
details={column.certification_details}
|
||||
/>
|
||||
)}
|
||||
<Tooltip id="metric-name-tooltip" title={tooltipText}>
|
||||
<span className="m-r-5 option-label column-option-label" ref={labelRef}>
|
||||
<span
|
||||
className="option-label column-option-label"
|
||||
css={(theme: SupersetTheme) =>
|
||||
css`
|
||||
margin-right: ${theme.gridUnit}px;
|
||||
`
|
||||
}
|
||||
ref={labelRef}
|
||||
>
|
||||
{getColumnLabelText(column)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
|
@ -76,6 +79,14 @@ export function ColumnOption({
|
|||
placement="top"
|
||||
/>
|
||||
)}
|
||||
|
||||
{column.is_certified && (
|
||||
<CertifiedIconWithTooltip
|
||||
metricName={column.metric_name}
|
||||
certifiedBy={column.certified_by}
|
||||
details={column.certification_details}
|
||||
/>
|
||||
)}
|
||||
</StyleOverrides>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
/* eslint-disable no-nested-ternary */
|
||||
/**
|
||||
* 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 { GenericDataType } from '@superset-ui/core';
|
||||
import React from 'react';
|
||||
|
||||
type StringIcon = '?' | 'ƒ' | 'AGG' | 'ABC' | '#' | 'T/F' | 'time';
|
||||
|
||||
export type ColumnLabelExtendedType = 'expression' | 'aggregate' | '';
|
||||
|
||||
export type ColumnTypeLabelProps = {
|
||||
type?: ColumnLabelExtendedType | GenericDataType;
|
||||
};
|
||||
|
||||
export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) {
|
||||
let stringIcon: StringIcon = '?';
|
||||
|
||||
if (type === '' || type === 'expression') {
|
||||
stringIcon = 'ƒ';
|
||||
} else if (type === 'aggregate') {
|
||||
stringIcon = 'AGG';
|
||||
} else if (type === GenericDataType.STRING) {
|
||||
stringIcon = 'ABC';
|
||||
} else if (type === GenericDataType.NUMERIC) {
|
||||
stringIcon = '#';
|
||||
} else if (type === GenericDataType.BOOLEAN) {
|
||||
stringIcon = 'T/F';
|
||||
} else if (type === GenericDataType.TEMPORAL) {
|
||||
stringIcon = 'time';
|
||||
}
|
||||
|
||||
const typeIcon =
|
||||
stringIcon === 'time' ? (
|
||||
<i className="fa fa-clock-o type-label" />
|
||||
) : (
|
||||
<div className="type-label">{stringIcon}</div>
|
||||
);
|
||||
|
||||
return <span>{typeIcon}</span>;
|
||||
}
|
||||
|
||||
export default ColumnTypeLabel;
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/* eslint-disable no-nested-ternary */
|
||||
/**
|
||||
* 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, { ReactNode } from 'react';
|
||||
import { css, GenericDataType, styled, t } from '@superset-ui/core';
|
||||
import { ClockCircleOutlined, QuestionOutlined } from '@ant-design/icons';
|
||||
// TODO: move all icons to superset-ui/core
|
||||
import FunctionSvg from './type-icons/field_derived.svg';
|
||||
import BooleanSvg from './type-icons/field_boolean.svg';
|
||||
import StringSvg from './type-icons/field_abc.svg';
|
||||
import NumSvg from './type-icons/field_num.svg';
|
||||
|
||||
export type ColumnLabelExtendedType = 'expression' | '';
|
||||
|
||||
export type ColumnTypeLabelProps = {
|
||||
type?: ColumnLabelExtendedType | GenericDataType;
|
||||
};
|
||||
|
||||
const TypeIconWrapper = styled.div`
|
||||
${({ theme }) => css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: ${theme.gridUnit * 6}px;
|
||||
height: ${theme.gridUnit * 6}px;
|
||||
margin-right: ${theme.gridUnit}px;
|
||||
|
||||
&& svg {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) {
|
||||
let typeIcon: ReactNode = (
|
||||
<QuestionOutlined aria-label={t('unknown type icon')} />
|
||||
);
|
||||
|
||||
if (type === '' || type === 'expression') {
|
||||
typeIcon = <FunctionSvg aria-label={t('function type icon')} />;
|
||||
} else if (type === GenericDataType.STRING) {
|
||||
typeIcon = <StringSvg aria-label={t('string type icon')} />;
|
||||
} else if (type === GenericDataType.NUMERIC) {
|
||||
typeIcon = <NumSvg aria-label={t('numeric type icon')} />;
|
||||
} else if (type === GenericDataType.BOOLEAN) {
|
||||
typeIcon = <BooleanSvg aria-label={t('boolean type icon')} />;
|
||||
} else if (type === GenericDataType.TEMPORAL) {
|
||||
typeIcon = <ClockCircleOutlined aria-label={t('temporal type icon')} />;
|
||||
}
|
||||
|
||||
return <TypeIconWrapper>{typeIcon}</TypeIconWrapper>;
|
||||
}
|
||||
|
||||
export default ColumnTypeLabel;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.91015 16.1406C4.76953 16.1406 3.86328 15.4687 3.86328 14.2969C3.86328 12.9219 5.07812 12.6758 6.1914 12.5312C7.28515 12.3906 7.73828 12.4141 7.73828 11.9687C7.73828 11.1914 7.32812 10.7344 6.47265 10.7344C5.59375 10.7344 5.11328 11.2031 4.91016 11.6406L4.03516 11.3281C4.50391 10.2344 5.53515 9.92187 6.4414 9.92187C7.20703 9.92187 8.66015 10.1406 8.66015 12.0469V16H7.73828V15.1875H7.6914C7.5039 15.5781 6.95703 16.1406 5.91015 16.1406ZM6.05078 15.3125C7.14453 15.3125 7.73828 14.5781 7.73828 13.8281V12.9844C7.58203 13.1719 6.53515 13.2812 6.14453 13.3281C5.42578 13.4219 4.78516 13.6406 4.78516 14.3437C4.78516 14.9844 5.3164 15.3125 6.05078 15.3125ZM9.79766 16V8H10.7195V10.9531H10.7977C11.0008 10.6406 11.3602 9.92187 12.532 9.92187C14.0477 9.92187 15.0945 11.125 15.0945 13.0156C15.0945 14.9219 14.0477 16.125 12.5477 16.125C11.3914 16.125 11.0008 15.4062 10.7977 15.0781H10.6883V16H9.79766ZM10.7039 13C10.7039 14.3594 11.3133 15.2969 12.4227 15.2969C13.5789 15.2969 14.1727 14.2812 14.1727 13C14.1727 11.7344 13.5945 10.75 12.4227 10.75C11.2977 10.75 10.7039 11.6562 10.7039 13ZM18.3883 16.125C16.7008 16.125 15.6695 14.8281 15.6695 13.0312C15.6695 11.2031 16.7477 9.92187 18.3727 9.92187C19.6383 9.92187 20.5914 10.6719 20.7477 11.7969H19.8258C19.6852 11.25 19.2008 10.75 18.3883 10.75C17.3102 10.75 16.5914 11.6406 16.5914 13C16.5914 14.3906 17.2945 15.2969 18.3883 15.2969C19.107 15.2969 19.6539 14.9062 19.8258 14.25H20.7477C20.5914 15.3125 19.7164 16.125 18.3883 16.125Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0005 4H11.0005V20H12.0005V4ZM15.248 12.4746C15.248 14.8184 16.1611 16.166 17.748 16.166C19.3301 16.166 20.2383 14.8281 20.2383 12.4893C20.2383 10.1553 19.3154 8.78809 17.748 8.78809C16.1709 8.78809 15.248 10.1504 15.248 12.4746ZM5.5791 9.93066V16H6.45801V8.9541H5.58398L3.70898 10.3018V11.2295L5.50098 9.93066H5.5791ZM17.748 15.3994C18.7881 15.3994 19.3545 14.3643 19.3545 12.4746C19.3545 10.6045 18.7783 9.55957 17.748 9.55957C16.7178 9.55957 16.1318 10.6143 16.1318 12.4746C16.1318 14.3594 16.708 15.3994 17.748 15.3994Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 7H9V7.5C9 7.77614 8.77614 8 8.5 8C8.22386 8 8 7.77614 8 7.5V7H6.5C5.67157 7 5 7.67157 5 8.5V11H19V8.5C19 7.67157 18.3284 7 17.5 7H16V7.5C16 7.77614 15.7761 8 15.5 8C15.2239 8 15 7.77614 15 7.5V7ZM16 6H17.5C18.8807 6 20 7.11929 20 8.5V16.5074C20 17.8881 18.8807 19.0074 17.5 19.0074H6.5C5.11929 19.0074 4 17.8881 4 16.5074V8.5C4 7.11929 5.11929 6 6.5 6H8V5.5C8 5.22386 8.22386 5 8.5 5C8.77614 5 9 5.22386 9 5.5V6H15V5.5C15 5.22386 15.2239 5 15.5 5C15.7761 5 16 5.22386 16 5.5V6ZM5 12V16.5074C5 17.3358 5.67157 18.0074 6.5 18.0074H17.5C18.3284 18.0074 19 17.3358 19 16.5074V12H5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.98828 10.8086L5.95703 15.6484C5.77344 16.5156 5.38672 17.2246 4.79688 17.7754C4.20703 18.3262 3.59961 18.6016 2.97461 18.6016C2.63086 18.6016 2.37793 18.5361 2.21582 18.4053C2.05371 18.2744 1.97266 18.1094 1.97266 17.9102C1.97266 17.7422 2.02344 17.5938 2.125 17.4648C2.22656 17.3359 2.37305 17.2715 2.56445 17.2715C2.68555 17.2715 2.79199 17.2988 2.88379 17.3535C2.97559 17.4082 3.05664 17.4766 3.12695 17.5586C3.18164 17.625 3.24316 17.7148 3.31152 17.8281C3.37988 17.9414 3.43945 18.0391 3.49023 18.1211C3.79102 18.0977 4.04785 17.8945 4.26074 17.5117C4.47363 17.1289 4.6582 16.582 4.81445 15.8711L5.89258 10.8086H4.75L4.87305 10.2754H6.00391L6.08594 9.87695C6.17969 9.42383 6.32812 9.01563 6.53125 8.65234C6.73438 8.28906 6.96484 7.98047 7.22266 7.72656C7.47656 7.47656 7.76465 7.28027 8.08691 7.1377C8.40918 6.99512 8.71875 6.92383 9.01562 6.92383C9.35938 6.92383 9.6123 6.98926 9.77441 7.12012C9.93652 7.25098 10.0176 7.41601 10.0176 7.61523C10.0176 7.7832 9.96973 7.93164 9.87402 8.06055C9.77832 8.18945 9.62891 8.25391 9.42578 8.25391C9.30469 8.25391 9.19922 8.22754 9.10938 8.1748C9.01953 8.12207 8.93945 8.05273 8.86914 7.9668C8.79102 7.86914 8.72852 7.77734 8.68164 7.69141C8.63477 7.60547 8.57617 7.50977 8.50586 7.4043C8.23633 7.41602 7.99805 7.59375 7.79102 7.9375C7.58398 8.28125 7.39649 8.85351 7.22852 9.6543L7.09961 10.2754H8.57031L8.44727 10.8086H6.98828ZM9.21289 13.0703C9.21289 11.3125 9.66211 9.88672 10.5996 8.64648H11.3125C10.6191 9.53516 10.0771 11.4199 10.0771 13.0703C10.0771 14.7305 10.6143 16.6104 11.3125 17.499H10.5996C9.66211 16.2588 9.21289 14.833 9.21289 13.0703ZM14.501 14.0273H14.4229L13.1729 16.0146H12.2207L14.0225 13.3828L12.2012 10.751H13.2021L14.4521 12.709H14.5303L15.7656 10.751H16.7178L14.9307 13.3486L16.7422 16.0146H15.7461L14.501 14.0273ZM19.7305 13.0752C19.7305 14.833 19.2812 16.2588 18.3438 17.499H17.6309C18.3242 16.6104 18.8662 14.7256 18.8662 13.0752C18.8662 11.415 18.3291 9.53516 17.6309 8.64648H18.3438C19.2812 9.88672 19.7305 11.3125 19.7305 13.0752Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<!--
|
||||
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.
|
||||
-->
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 8H11V10H13V8H14V10H16V11H14V13H16V14H14V16H13V14H11V16H10V14H8V13H10V11H8V10H10V8ZM13 13V11H11V13H13Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
* 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.
|
||||
*/
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { kebabCase } from 'lodash';
|
||||
import { TooltipPlacement } from 'antd/lib/tooltip';
|
||||
import { t } from '@superset-ui/core';
|
||||
|
|
@ -30,6 +30,7 @@ export interface InfoTooltipWithTriggerProps {
|
|||
placement?: TooltipPlacement;
|
||||
bsStyle?: string;
|
||||
className?: string;
|
||||
iconsStyle?: CSSProperties;
|
||||
}
|
||||
|
||||
export function InfoTooltipWithTrigger({
|
||||
|
|
@ -40,6 +41,7 @@ export function InfoTooltipWithTrigger({
|
|||
icon = 'info-circle',
|
||||
className = 'text-muted',
|
||||
placement = 'right',
|
||||
iconsStyle = {},
|
||||
}: InfoTooltipWithTriggerProps) {
|
||||
const iconClass = `fa fa-${icon} ${className} ${
|
||||
bsStyle ? `text-${bsStyle}` : ''
|
||||
|
|
@ -50,7 +52,7 @@ export function InfoTooltipWithTrigger({
|
|||
aria-label={t('Show info tooltip')}
|
||||
tabIndex={0}
|
||||
className={iconClass}
|
||||
style={{ cursor: onClick ? 'pointer' : undefined }}
|
||||
style={{ cursor: onClick ? 'pointer' : undefined, ...iconsStyle }}
|
||||
onClick={onClick}
|
||||
onKeyPress={
|
||||
onClick &&
|
||||
|
|
|
|||
|
|
@ -17,9 +17,15 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React, { useState, ReactNode, useLayoutEffect } from 'react';
|
||||
import { styled, Metric, SafeMarkdown } from '@superset-ui/core';
|
||||
import {
|
||||
css,
|
||||
styled,
|
||||
Metric,
|
||||
SafeMarkdown,
|
||||
SupersetTheme,
|
||||
} from '@superset-ui/core';
|
||||
import InfoTooltipWithTrigger from './InfoTooltipWithTrigger';
|
||||
import { ColumnTypeLabel } from './ColumnTypeLabel';
|
||||
import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel';
|
||||
import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
|
||||
import Tooltip from './Tooltip';
|
||||
import { getMetricTooltipNode } from './labelUtils';
|
||||
|
|
@ -70,32 +76,41 @@ export function MetricOption({
|
|||
return (
|
||||
<FlexRowContainer className="metric-option">
|
||||
{showType && <ColumnTypeLabel type="expression" />}
|
||||
{metric.is_certified && (
|
||||
<CertifiedIconWithTooltip
|
||||
metricName={metric.metric_name}
|
||||
certifiedBy={metric.certified_by}
|
||||
details={metric.certification_details}
|
||||
/>
|
||||
)}
|
||||
<Tooltip id="metric-name-tooltip" title={tooltipText}>
|
||||
<span className="option-label metric-option-label" ref={labelRef}>
|
||||
<span
|
||||
className="option-label metric-option-label"
|
||||
css={(theme: SupersetTheme) =>
|
||||
css`
|
||||
margin-right: ${theme.gridUnit}px;
|
||||
`
|
||||
}
|
||||
ref={labelRef}
|
||||
>
|
||||
{link}
|
||||
</span>
|
||||
</Tooltip>
|
||||
{showFormula && (
|
||||
<InfoTooltipWithTrigger
|
||||
className="text-muted"
|
||||
className="text-muted m-r-5"
|
||||
icon="question-circle-o"
|
||||
tooltip={metric.expression}
|
||||
label={`expr-${metric.metric_name}`}
|
||||
/>
|
||||
)}
|
||||
{metric.is_certified && (
|
||||
<CertifiedIconWithTooltip
|
||||
metricName={metric.metric_name}
|
||||
certifiedBy={metric.certified_by}
|
||||
details={metric.certification_details}
|
||||
/>
|
||||
)}
|
||||
{warningMarkdown && (
|
||||
<InfoTooltipWithTrigger
|
||||
className="text-warning"
|
||||
icon="warning"
|
||||
tooltip={<SafeMarkdown source={warningMarkdown} />}
|
||||
label={`warn-${metric.metric_name}`}
|
||||
iconsStyle={{ marginLeft: 0 }}
|
||||
/>
|
||||
)}
|
||||
</FlexRowContainer>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const sections = sectionsModule;
|
|||
|
||||
export * from './components/InfoTooltipWithTrigger';
|
||||
export * from './components/ColumnOption';
|
||||
export * from './components/ColumnTypeLabel';
|
||||
export * from './components/ColumnTypeLabel/ColumnTypeLabel';
|
||||
export * from './components/MetricOption';
|
||||
|
||||
// React control components
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
import React from 'react';
|
||||
import { useTheme } from '@superset-ui/core';
|
||||
import { Popover } from 'antd';
|
||||
import ColumnTypeLabel from '../../../components/ColumnTypeLabel';
|
||||
import ColumnTypeLabel from '../../../components/ColumnTypeLabel/ColumnTypeLabel';
|
||||
import ColumnConfigPopover, {
|
||||
ColumnConfigPopoverProps,
|
||||
} from './ColumnConfigPopover';
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import { GenericDataType } from '@superset-ui/core';
|
||||
|
||||
import { ColumnTypeLabel, ColumnTypeLabelProps } from '../../src';
|
||||
|
|
@ -29,9 +30,8 @@ describe('ColumnOption', () => {
|
|||
|
||||
const props = { ...defaultProps };
|
||||
|
||||
function getWrapper(overrides: Partial<ColumnTypeLabelProps>) {
|
||||
const wrapper = shallow(<ColumnTypeLabel {...props} {...overrides} />);
|
||||
return wrapper;
|
||||
function renderColumnTypeLabel(overrides: Partial<ColumnTypeLabelProps>) {
|
||||
render(<ColumnTypeLabel {...props} {...overrides} />);
|
||||
}
|
||||
|
||||
it('is a valid element', () => {
|
||||
|
|
@ -40,40 +40,27 @@ describe('ColumnOption', () => {
|
|||
);
|
||||
});
|
||||
it('string type shows ABC icon', () => {
|
||||
const lbl = getWrapper({ type: GenericDataType.STRING }).find(
|
||||
'.type-label',
|
||||
);
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(lbl.first().text()).toBe('ABC');
|
||||
renderColumnTypeLabel({ type: GenericDataType.STRING });
|
||||
expect(screen.getByLabelText('string type icon')).toBeVisible();
|
||||
});
|
||||
it('int type shows # icon', () => {
|
||||
const lbl = getWrapper({ type: GenericDataType.NUMERIC }).find(
|
||||
'.type-label',
|
||||
);
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(lbl.first().text()).toBe('#');
|
||||
renderColumnTypeLabel({ type: GenericDataType.NUMERIC });
|
||||
expect(screen.getByLabelText('numeric type icon')).toBeVisible();
|
||||
});
|
||||
it('bool type shows T/F icon', () => {
|
||||
const lbl = getWrapper({ type: GenericDataType.BOOLEAN }).find(
|
||||
'.type-label',
|
||||
);
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(lbl.first().text()).toBe('T/F');
|
||||
it('bool type shows 1|0 icon', () => {
|
||||
renderColumnTypeLabel({ type: GenericDataType.BOOLEAN });
|
||||
expect(screen.getByLabelText('boolean type icon')).toBeVisible();
|
||||
});
|
||||
it('expression type shows function icon', () => {
|
||||
const lbl = getWrapper({ type: 'expression' }).find('.type-label');
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(lbl.first().text()).toBe('ƒ');
|
||||
renderColumnTypeLabel({ type: 'expression' });
|
||||
expect(screen.getByLabelText('function type icon')).toBeVisible();
|
||||
});
|
||||
it('unknown type shows question mark', () => {
|
||||
const lbl = getWrapper({ type: undefined }).find('.type-label');
|
||||
expect(lbl).toHaveLength(1);
|
||||
expect(lbl.first().text()).toBe('?');
|
||||
renderColumnTypeLabel({ type: undefined });
|
||||
expect(screen.getByLabelText('unknown type icon')).toBeVisible();
|
||||
});
|
||||
it('datetime type displays', () => {
|
||||
const lbl = getWrapper({ type: GenericDataType.TEMPORAL }).find(
|
||||
'.fa-clock-o',
|
||||
);
|
||||
expect(lbl).toHaveLength(1);
|
||||
renderColumnTypeLabel({ type: GenericDataType.TEMPORAL });
|
||||
expect(screen.getByLabelText('temporal type icon')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the
|
|||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
|
||||
<path style=" stroke:none;fill-rule:evenodd;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 9.5 5.152344 C 9.5 6.34375 8.605469 7.308594 7.5 7.308594 C 6.394531 7.308594 5.5 6.34375 5.5 5.152344 C 5.5 3.964844 6.394531 3 7.5 3 C 8.605469 3 9.5 3.964844 9.5 5.152344 Z M 7.5 14.308594 C 8.605469 14.308594 9.5 13.34375 9.5 12.152344 C 9.5 10.964844 8.605469 10 7.5 10 C 6.394531 10 5.5 10.964844 5.5 12.152344 C 5.5 13.34375 6.394531 14.308594 7.5 14.308594 Z M 7.5 21.308594 C 8.605469 21.308594 9.5 20.34375 9.5 19.152344 C 9.5 17.964844 8.605469 17 7.5 17 C 6.394531 17 5.5 17.964844 5.5 19.152344 C 5.5 20.34375 6.394531 21.308594 7.5 21.308594 Z M 7.5 21.308594 "/>
|
||||
<path style=" stroke:none;fill-rule:evenodd;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 18.5 5.152344 C 18.5 6.34375 17.605469 7.308594 16.5 7.308594 C 15.394531 7.308594 14.5 6.34375 14.5 5.152344 C 14.5 3.964844 15.394531 3 16.5 3 C 17.605469 3 18.5 3.964844 18.5 5.152344 Z M 16.5 14.308594 C 17.605469 14.308594 18.5 13.34375 18.5 12.152344 C 18.5 10.964844 17.605469 10 16.5 10 C 15.394531 10 14.5 10.964844 14.5 12.152344 C 14.5 13.34375 15.394531 14.308594 16.5 14.308594 Z M 16.5 21.308594 C 17.605469 21.308594 18.5 20.34375 18.5 19.152344 C 18.5 17.964844 17.605469 17 16.5 17 C 15.394531 17 14.5 17.964844 14.5 19.152344 C 14.5 20.34375 15.394531 21.308594 16.5 21.308594 Z M 16.5 21.308594 "/>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.66602 12.0002C8.66602 12.7365 9.26297 13.3335 9.99935 13.3335C10.7357 13.3335 11.3327 12.7365 11.3327 12.0002C11.3327 11.2638 10.7357 10.6668 9.99935 10.6668C9.26297 10.6668 8.66602 11.2638 8.66602 12.0002ZM8.66602 16.6667C8.66602 17.403 9.26297 18 9.99935 18C10.7357 18 11.3327 17.403 11.3327 16.6667C11.3327 15.9303 10.7357 15.3333 9.99935 15.3333C9.26297 15.3333 8.66602 15.9303 8.66602 16.6667ZM8.66602 7.33317C8.66602 8.06955 9.26297 8.6665 9.99935 8.6665C10.7357 8.6665 11.3327 8.06955 11.3327 7.33317C11.3327 6.59679 10.7357 5.99984 9.99935 5.99984C9.26297 5.99984 8.66602 6.59679 8.66602 7.33317Z" fill="#B2B2B2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.666 12.0002C12.666 12.7365 13.263 13.3335 13.9993 13.3335C14.7357 13.3335 15.3327 12.7365 15.3327 12.0002C15.3327 11.2638 14.7357 10.6668 13.9993 10.6668C13.263 10.6668 12.666 11.2638 12.666 12.0002ZM12.666 16.6667C12.666 17.403 13.263 18 13.9993 18C14.7357 18 15.3327 17.403 15.3327 16.6667C15.3327 15.9303 14.7357 15.3333 13.9993 15.3333C13.263 15.3333 12.666 15.9303 12.666 16.6667ZM12.666 7.33317C12.666 8.06955 13.263 8.6665 13.9993 8.6665C14.7357 8.6665 15.3327 8.06955 15.3327 7.33317C15.3327 6.59679 14.7357 5.99984 13.9993 5.99984C13.263 5.99984 12.666 6.59679 12.666 7.33317Z" fill="#B2B2B2"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -17,33 +17,35 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React, { LegacyRef } from 'react';
|
||||
import cx from 'classnames';
|
||||
import { css, styled } from '@superset-ui/core';
|
||||
import Icons from 'src/components/Icons';
|
||||
|
||||
interface DragHandleProps {
|
||||
position: 'left' | 'top';
|
||||
innerRef: LegacyRef<HTMLDivElement> | undefined;
|
||||
dotCount: number;
|
||||
innerRef?: LegacyRef<HTMLDivElement> | undefined;
|
||||
}
|
||||
|
||||
const DragHandleContainer = styled.div<{ position: 'left' | 'top' }>`
|
||||
${({ theme, position }) => css`
|
||||
height: ${theme.gridUnit * 5}px;
|
||||
overflow: hidden;
|
||||
cursor: move;
|
||||
${position === 'top' &&
|
||||
css`
|
||||
transform: rotate(90deg);
|
||||
`}
|
||||
& path {
|
||||
fill: ${theme.colors.grayscale.base};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
export default function DragHandle({
|
||||
position = 'left',
|
||||
innerRef = null,
|
||||
dotCount = 8,
|
||||
}: DragHandleProps) {
|
||||
return (
|
||||
<div
|
||||
ref={innerRef}
|
||||
className={cx(
|
||||
'drag-handle',
|
||||
position === 'left' && 'drag-handle--left',
|
||||
position === 'top' && 'drag-handle--top',
|
||||
)}
|
||||
>
|
||||
{Array(dotCount)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<div key={`handle-dot-${i}`} className="drag-handle-dot" />
|
||||
))}
|
||||
</div>
|
||||
<DragHandleContainer ref={innerRef} position={position}>
|
||||
<Icons.Drag />
|
||||
</DragHandleContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,7 +132,12 @@ export const DraggableFilter: React.FC<FilterTabTitleProps> = ({
|
|||
drag(drop(ref));
|
||||
return (
|
||||
<Container ref={ref} isDragging={isDragging}>
|
||||
<DragIcon isDragging={isDragging} alt="Move icon" className="dragIcon" />
|
||||
<DragIcon
|
||||
isDragging={isDragging}
|
||||
alt="Move icon"
|
||||
className="dragIcon"
|
||||
viewBox="4 4 16 16"
|
||||
/>
|
||||
<div css={{ flex: 1 }}>{children}</div>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -91,33 +91,6 @@
|
|||
min-height: 16px;
|
||||
}
|
||||
|
||||
/* drag handles */
|
||||
.drag-handle {
|
||||
overflow: hidden;
|
||||
width: 16px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.drag-handle--left {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.drag-handle-dot {
|
||||
float: left;
|
||||
height: 2px;
|
||||
margin: 1px;
|
||||
width: 2px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: @gray;
|
||||
float: left;
|
||||
height: 2px;
|
||||
margin: -1px;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* empty drop targets */
|
||||
.dashboard-component-tabs-content {
|
||||
& > .empty-droptarget {
|
||||
|
|
|
|||
|
|
@ -18,29 +18,36 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import { useDrag } from 'react-dnd';
|
||||
import { Metric, styled } from '@superset-ui/core';
|
||||
import { css, Metric, styled } from '@superset-ui/core';
|
||||
import { ColumnMeta } from '@superset-ui/chart-controls';
|
||||
import { DndItemType } from 'src/explore/components/DndItemType';
|
||||
import {
|
||||
StyledColumnOption,
|
||||
StyledMetricOption,
|
||||
} from 'src/explore/components/optionRenderers';
|
||||
import { ColumnMeta } from '@superset-ui/chart-controls';
|
||||
import Icons from 'src/components/Icons';
|
||||
|
||||
import { DatasourcePanelDndItem } from '../types';
|
||||
|
||||
const DatasourceItemContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: ${({ theme }) => theme.gridUnit * 6}px;
|
||||
cursor: pointer;
|
||||
|
||||
> div {
|
||||
${({ theme }) => css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
height: ${theme.gridUnit * 6}px;
|
||||
padding: 0 ${theme.gridUnit}px;
|
||||
|
||||
:hover {
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light2};
|
||||
}
|
||||
// hack to make the drag preview image corners rounded
|
||||
transform: translate(0, 0);
|
||||
background-color: inherit;
|
||||
border-radius: 4px;
|
||||
|
||||
> div {
|
||||
min-width: 0;
|
||||
margin-right: ${theme.gridUnit * 2}px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
interface DatasourcePanelDragOptionProps extends DatasourcePanelDndItem {
|
||||
|
|
@ -79,6 +86,7 @@ export default function DatasourcePanelDragOption(
|
|||
) : (
|
||||
<StyledMetricOption metric={value as MetricOption} {...optionProps} />
|
||||
)}
|
||||
<Icons.Drag />
|
||||
</DatasourceItemContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { css, styled, t } from '@superset-ui/core';
|
||||
import {
|
||||
ControlConfig,
|
||||
DatasourceMeta,
|
||||
|
|
@ -24,7 +25,6 @@ import {
|
|||
} from '@superset-ui/chart-controls';
|
||||
import { debounce } from 'lodash';
|
||||
import { matchSorter, rankings } from 'match-sorter';
|
||||
import { css, styled, t } from '@superset-ui/core';
|
||||
import Collapse from 'src/components/Collapse';
|
||||
import { Input } from 'src/components/Input';
|
||||
import { FAST_DEBOUNCE } from 'src/constants';
|
||||
|
|
@ -49,6 +49,10 @@ export interface Props {
|
|||
shouldForceUpdate?: number;
|
||||
}
|
||||
|
||||
const enableExploreDnd = isFeatureEnabled(
|
||||
FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP,
|
||||
);
|
||||
|
||||
const Button = styled.button`
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
@ -63,7 +67,7 @@ const ButtonContainer = styled.div`
|
|||
|
||||
const DatasourceContainer = styled.div`
|
||||
${({ theme }) => css`
|
||||
background-color: ${theme.colors.grayscale.light4};
|
||||
background-color: ${theme.colors.grayscale.light5};
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -97,26 +101,55 @@ const DatasourceContainer = styled.div`
|
|||
`;
|
||||
|
||||
const LabelWrapper = styled.div`
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
${({ theme }) => css`
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
background-color: ${theme.colors.grayscale.light4};
|
||||
margin: ${theme.gridUnit * 2}px 0;
|
||||
border-radius: 4px;
|
||||
padding: 0 ${theme.gridUnit}px;
|
||||
|
||||
& > span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.metric-option {
|
||||
& > svg {
|
||||
min-width: ${({ theme }) => `${theme.gridUnit * 4}px`};
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
& > .option-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
${enableExploreDnd &&
|
||||
css`
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: ${theme.colors.grayscale.light3};
|
||||
}
|
||||
`}
|
||||
|
||||
& > span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.metric-option {
|
||||
& > svg {
|
||||
min-width: ${theme.gridUnit * 4}px;
|
||||
}
|
||||
& > .option-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const SectionHeader = styled.span`
|
||||
${({ theme }) => css`
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
`}
|
||||
`;
|
||||
|
||||
const LabelContainer = (props: {
|
||||
|
|
@ -134,10 +167,6 @@ const LabelContainer = (props: {
|
|||
);
|
||||
};
|
||||
|
||||
const enableExploreDnd = isFeatureEnabled(
|
||||
FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP,
|
||||
);
|
||||
|
||||
export default function DataSourcePanel({
|
||||
datasource,
|
||||
controls: { datasource: datasourceControl },
|
||||
|
|
@ -273,13 +302,12 @@ export default function DataSourcePanel({
|
|||
/>
|
||||
<div className="field-selections">
|
||||
<Collapse
|
||||
bordered
|
||||
defaultActiveKey={['metrics', 'column']}
|
||||
expandIconPosition="right"
|
||||
ghost
|
||||
>
|
||||
<Collapse.Panel
|
||||
header={<span className="header">{t('Metrics')}</span>}
|
||||
header={<SectionHeader>{t('Metrics')}</SectionHeader>}
|
||||
key="metrics"
|
||||
>
|
||||
<div className="field-length">
|
||||
|
|
@ -315,7 +343,7 @@ export default function DataSourcePanel({
|
|||
)}
|
||||
</Collapse.Panel>
|
||||
<Collapse.Panel
|
||||
header={<span className="header">{t('Columns')}</span>}
|
||||
header={<SectionHeader>{t('Columns')}</SectionHeader>}
|
||||
key="column"
|
||||
>
|
||||
<div className="field-length">
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ const Styles = styled.div`
|
|||
max-height: 100%;
|
||||
}
|
||||
.data-source-selection {
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light4};
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light5};
|
||||
padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
|
||||
border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,14 +18,12 @@
|
|||
*/
|
||||
/* eslint-disable no-unused-expressions */
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import FilterDefinitionOption from 'src/explore/components/controls/MetricControl/FilterDefinitionOption';
|
||||
import { AGGREGATES } from 'src/explore/constants';
|
||||
import AdhocMetric, {
|
||||
EXPRESSION_TYPES,
|
||||
} from 'src/explore/components/controls/MetricControl/AdhocMetric';
|
||||
import { StyledColumnOption } from 'src/explore/components/optionRenderers';
|
||||
|
||||
const sumValueAdhocMetric = new AdhocMetric({
|
||||
expressionType: EXPRESSION_TYPES.SIMPLE,
|
||||
|
|
@ -35,25 +33,21 @@ const sumValueAdhocMetric = new AdhocMetric({
|
|||
|
||||
describe('FilterDefinitionOption', () => {
|
||||
it('renders a StyledColumnOption given a column', () => {
|
||||
const wrapper = shallow(
|
||||
<FilterDefinitionOption option={{ column_name: 'a_column' }} />,
|
||||
);
|
||||
expect(wrapper.find(StyledColumnOption)).toExist();
|
||||
render(<FilterDefinitionOption option={{ column_name: 'a_column' }} />);
|
||||
expect(screen.getByText('a_column')).toBeVisible();
|
||||
});
|
||||
|
||||
it('renders a StyledColumnOption given an adhoc metric', () => {
|
||||
const wrapper = shallow(
|
||||
<FilterDefinitionOption option={sumValueAdhocMetric} />,
|
||||
);
|
||||
expect(wrapper.find(StyledColumnOption)).toExist();
|
||||
render(<FilterDefinitionOption option={sumValueAdhocMetric} />);
|
||||
expect(screen.getByText('SUM(source)')).toBeVisible();
|
||||
});
|
||||
|
||||
it('renders the metric name given a saved metric', () => {
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<FilterDefinitionOption
|
||||
option={{ saved_metric_name: 'my_custom_metric' }}
|
||||
/>,
|
||||
);
|
||||
expect(wrapper.find('.option-label').text()).toBe('my_custom_metric');
|
||||
expect(screen.getByText('my_custom_metric')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@ export const Label = styled.div`
|
|||
padding-left: ${theme.gridUnit}px;
|
||||
svg {
|
||||
margin-right: ${theme.gridUnit}px;
|
||||
margin-left: ${theme.gridUnit}px;
|
||||
}
|
||||
.type-label {
|
||||
margin-right: ${theme.gridUnit * 2}px;
|
||||
|
|
@ -306,7 +305,7 @@ export const OptionControlLabel = ({
|
|||
<Icons.XSmall iconColor={theme.colors.grayscale.light1} />
|
||||
</CloseContainer>
|
||||
<Label data-test="control-label">
|
||||
{isFunction && <Icons.FunctionX viewBox="0 0 16 11" iconSize="l" />}
|
||||
{isFunction && <Icons.FieldDerived />}
|
||||
{getLabelContent()}
|
||||
</Label>
|
||||
{isExtra && (
|
||||
|
|
|
|||
|
|
@ -414,6 +414,7 @@ const config = {
|
|||
svgoConfig: {
|
||||
plugins: {
|
||||
removeViewBox: false,
|
||||
icon: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue