(null);
+ useEffect(() => {
+ setIsTruncated(
+ ref.current ? ref.current.offsetWidth < ref.current.scrollWidth : false,
+ );
+ }, [children]);
+
+ const div = (
+
+ {children}
+
+ );
+
+ return isTruncated ? {div} : div;
+};
+
+const MetadataItem: React.FC<{
+ label: ReactNode;
+ value: ReactNode;
+}> = ({ label, value }) => (
+ css`
+ font-size: ${theme.typography.sizes.s}px;
+ display: flex;
+ justify-content: space-between;
+
+ &:not(:last-child) {
+ margin-bottom: ${theme.gridUnit}px;
+ }
+ `}
+ >
+ css`
+ margin-right: ${theme.gridUnit * 4}px;
+ color: ${theme.colors.grayscale.base};
+ `}
+ >
+ {label}
+
+
+ {value}
+
+
+);
+
+const SliceAddedBadgePlaceholder: React.FC<{
+ showThumbnails?: boolean;
+ placeholderRef: (element: HTMLDivElement) => void;
+}> = ({ showThumbnails, placeholderRef }) => (
+ css`
+ /* Display styles */
+ border: 1px solid ${theme.colors.primary.dark1};
+ border-radius: ${theme.gridUnit}px;
+ color: ${theme.colors.primary.dark1};
+ font-size: ${theme.typography.sizes.xs}px;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+ padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
+ margin-left: ${theme.gridUnit * 4}px;
+ pointer-events: none;
+
+ /* Position styles */
+ visibility: hidden;
+ position: ${showThumbnails ? 'absolute' : 'unset'};
+ top: ${showThumbnails ? '72px' : 'unset'};
+ left: ${showThumbnails ? '84px' : 'unset'};
+ `}
+ >
+ {t('Added')}
+
+);
+
+const SliceAddedBadge: React.FC<{ placeholder?: HTMLDivElement }> = ({
+ placeholder,
+}) => (
+ css`
+ /* Display styles */
+ border: 1px solid ${theme.colors.primary.dark1};
+ border-radius: ${theme.gridUnit}px;
+ color: ${theme.colors.primary.dark1};
+ font-size: ${theme.typography.sizes.xs}px;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+ padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
+ margin-left: ${theme.gridUnit * 4}px;
+ pointer-events: none;
+
+ /* Position styles */
+ display: ${placeholder ? 'unset' : 'none'};
+ position: absolute;
+ top: ${placeholder ? `${placeholder.offsetTop}px` : 'unset'};
+ left: ${placeholder ? `${placeholder.offsetLeft - 2}px` : 'unset'};
+ `}
+ >
+ {t('Added')}
+
+);
+
+const AddSliceCard: React.FC<{
+ datasourceUrl?: string;
+ datasourceName?: string;
+ innerRef?: React.RefObject;
+ isSelected?: boolean;
+ lastModified?: string;
+ sliceName: string;
+ style?: CSSProperties;
+ thumbnailUrl?: string;
+ visType: string;
+}> = ({
+ datasourceUrl,
+ datasourceName = '-',
+ innerRef,
+ isSelected = false,
+ lastModified,
+ sliceName,
+ style = {},
+ thumbnailUrl,
+ visType,
+}) => {
+ const showThumbnails = isFeatureEnabled(FeatureFlag.THUMBNAILS);
+ const [sliceAddedBadge, setSliceAddedBadge] = useState();
+ const { mountedPluginMetadata } = usePluginContext();
+ const vizName = useMemo(
+ () => mountedPluginMetadata[visType].name,
+ [mountedPluginMetadata, visType],
+ );
+
+ return (
+
+
css`
+ border: 1px solid ${theme.colors.grayscale.light2};
+ border-radius: ${theme.gridUnit}px;
+ background: ${theme.colors.grayscale.light5};
+ padding: ${theme.gridUnit * 4}px;
+ margin: 0 ${theme.gridUnit * 3}px
+ ${theme.gridUnit * 3}px
+ ${theme.gridUnit * 3}px;
+ position: relative;
+ cursor: ${isSelected ? 'not-allowed' : 'move'};
+ white-space: nowrap;
+ overflow: hidden;
+ line-height: 1.3;
+ color: ${theme.colors.grayscale.dark1}
+
+ &:hover {
+ background: ${theme.colors.grayscale.light4};
+ }
+
+ opacity: ${isSelected ? 0.4 : 'unset'};
+ `}
+ >
+
+ {showThumbnails ? (
+
+
+ {isSelected && showThumbnails ? (
+
+ ) : null}
+
+ ) : null}
+
+
css`
+ margin-bottom: ${theme.gridUnit * 2}px;
+ font-weight: ${theme.typography.weights.bold};
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ `}
+ >
+ {sliceName}
+ {isSelected && !showThumbnails ? (
+
+ ) : null}
+
+
+
+ {datasourceName}}
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default AddSliceCard;
diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/index.ts b/superset-frontend/src/dashboard/components/AddSliceCard/index.ts
new file mode 100644
index 0000000000..c3736da122
--- /dev/null
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/index.ts
@@ -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.
+ */
+
+import AddSliceCard from './AddSliceCard';
+
+export default AddSliceCard;
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.jsx b/superset-frontend/src/dashboard/components/SliceAdder.jsx
index 95f9180a33..0766bd11f1 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.jsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.jsx
@@ -83,7 +83,7 @@ const DEFAULT_SORT_KEY = 'changed_on';
const MARGIN_BOTTOM = 16;
const SIDEPANE_HEADER_HEIGHT = 30;
const SLICE_ADDER_CONTROL_HEIGHT = 64;
-const DEFAULT_CELL_HEIGHT = 112;
+const DEFAULT_CELL_HEIGHT = 128;
const Controls = styled.div`
display: flex;
@@ -273,6 +273,7 @@ class SliceAdder extends React.Component {
visType={cellData.viz_type}
datasourceUrl={cellData.datasource_url}
datasourceName={cellData.datasource_name}
+ thumbnailUrl={cellData.thumbnail_url}
isSelected={isSelected}
/>
)}