You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2022/04/05 09:37:11 UTC
[GitHub] [superset] kgabryje opened a new pull request, #19529: feat(explore): Move chart header to top of the page
kgabryje opened a new pull request, #19529:
URL: https://github.com/apache/superset/pull/19529
### SUMMARY
<!--- Describe the change below, including rationale and design decisions -->
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
<!--- Skip this if not applicable -->
### TESTING INSTRUCTIONS
<!--- Required! What steps can be taken to manually verify the changes? -->
### ADDITIONAL INFORMATION
<!--- Check any relevant boxes with "x" -->
<!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
- [ ] Has associated issue:
- [ ] Required feature flags:
- [ ] Changes UI
- [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] codecov[bot] commented on pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
codecov[bot] commented on PR #19529:
URL: https://github.com/apache/superset/pull/19529#issuecomment-1088588343
# [Codecov](https://codecov.io/gh/apache/superset/pull/19529?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
> Merging [#19529](https://codecov.io/gh/apache/superset/pull/19529?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (31e3a28) into [master](https://codecov.io/gh/apache/superset/commit/90dbe8d340f227e3ffe374984a202516d779d5d8?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (90dbe8d) will **increase** coverage by `0.00%`.
> The diff coverage is `72.60%`.
```diff
@@ Coverage Diff @@
## master #19529 +/- ##
=======================================
Coverage 66.58% 66.59%
=======================================
Files 1677 1681 +4
Lines 64238 64280 +42
Branches 6538 6554 +16
=======================================
+ Hits 42773 42805 +32
- Misses 19766 19775 +9
- Partials 1699 1700 +1
```
| Flag | Coverage Δ | |
|---|---|---|
| javascript | `51.35% <72.60%> (+0.03%)` | :arrow_up: |
Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
| [Impacted Files](https://codecov.io/gh/apache/superset/pull/19529?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
|---|---|---|
| [...d/src/explore/components/DatasourcePanel/index.tsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9EYXRhc291cmNlUGFuZWwvaW5kZXgudHN4) | `69.23% <ø> (ø)` | |
| [.../explore/components/ExploreViewContainer/index.jsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9FeHBsb3JlVmlld0NvbnRhaW5lci9pbmRleC5qc3g=) | `54.39% <42.85%> (-2.60%)` | :arrow_down: |
| [...rc/explore/components/ExploreChartHeader/index.jsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9FeHBsb3JlQ2hhcnRIZWFkZXIvaW5kZXguanN4) | `46.87% <75.00%> (-3.13%)` | :arrow_down: |
| [...ts/ExploreChartHeader/ChartEditableTitle/index.tsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9FeHBsb3JlQ2hhcnRIZWFkZXIvQ2hhcnRFZGl0YWJsZVRpdGxlL2luZGV4LnRzeA==) | `78.43% <78.43%> (ø)` | |
| [...uperset-frontend/src/components/FaveStar/index.tsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvRmF2ZVN0YXIvaW5kZXgudHN4) | `100.00% <100.00%> (ø)` | |
| [...ntend/src/explore/components/ExploreChartPanel.jsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9FeHBsb3JlQ2hhcnRQYW5lbC5qc3g=) | `74.24% <100.00%> (+2.24%)` | :arrow_up: |
| [...re/components/controls/DatasourceControl/index.jsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2V4cGxvcmUvY29tcG9uZW50cy9jb250cm9scy9EYXRhc291cmNlQ29udHJvbC9pbmRleC5qc3g=) | `72.72% <100.00%> (+0.35%)` | :arrow_up: |
| [...t-frontend/src/components/AsyncAceEditor/index.tsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvQXN5bmNBY2VFZGl0b3IvaW5kZXgudHN4) | `90.90% <0.00%> (-0.21%)` | :arrow_down: |
| [superset-frontend/src/SqlLab/App.jsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL1NxbExhYi9BcHAuanN4) | `0.00% <0.00%> (ø)` | |
| [...ntend/src/SqlLab/components/QueryHistory/index.tsx](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL1NxbExhYi9jb21wb25lbnRzL1F1ZXJ5SGlzdG9yeS9pbmRleC50c3g=) | `66.66% <0.00%> (ø)` | |
| ... and [15 more](https://codecov.io/gh/apache/superset/pull/19529/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
------
[Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/19529?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/19529?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [90dbe8d...31e3a28](https://codecov.io/gh/apache/superset/pull/19529?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] villebro commented on a diff in pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
villebro commented on code in PR #19529:
URL: https://github.com/apache/superset/pull/19529#discussion_r842657536
##########
superset-frontend/src/explore/components/ExploreChartHeader/index.jsx:
##########
@@ -235,8 +238,18 @@ export class ExploreChartHeader extends React.PureComponent {
this.props.chart.chartStatus,
);
return (
- <StyledHeader id="slice-header" className="panel-title-large">
+ <StyledHeader id="slice-header">
<div className="title-panel">
+ <ChartEditableTitle
+ title={this.getSliceName()}
+ canEdit={
+ !slice ||
+ this.props.can_overwrite ||
Review Comment:
nit: while we're using the destructured `slice`, could we also destructure this like the others on line 224: `const { ..., can_overwrite: canOverwrite } = this.props`. Also maybe `this.props.actions.updateChartTitle`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje commented on a diff in pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
kgabryje commented on code in PR #19529:
URL: https://github.com/apache/superset/pull/19529#discussion_r842730708
##########
superset-frontend/src/explore/components/ExploreChartHeader/index.jsx:
##########
@@ -235,8 +238,18 @@ export class ExploreChartHeader extends React.PureComponent {
this.props.chart.chartStatus,
);
return (
- <StyledHeader id="slice-header" className="panel-title-large">
+ <StyledHeader id="slice-header">
<div className="title-panel">
+ <ChartEditableTitle
+ title={this.getSliceName()}
+ canEdit={
+ !slice ||
+ this.props.can_overwrite ||
Review Comment:
Done!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje commented on pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
kgabryje commented on PR #19529:
URL: https://github.com/apache/superset/pull/19529#issuecomment-1088646196
@villebro
<img width="1792" alt="image" src="https://user-images.githubusercontent.com/15073128/161754019-cdd20e34-c450-401a-a4ff-968c83d125d9.png">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] github-actions[bot] commented on pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
github-actions[bot] commented on PR #19529:
URL: https://github.com/apache/superset/pull/19529#issuecomment-1088541184
@kgabryje Ephemeral environment spinning up at http://54.201.146.200:8080. Credentials are `admin`/`admin`. Please allow several minutes for bootstrapping and startup.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje commented on pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
kgabryje commented on PR #19529:
URL: https://github.com/apache/superset/pull/19529#issuecomment-1088539482
/testenv up
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje commented on a diff in pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
kgabryje commented on code in PR #19529:
URL: https://github.com/apache/superset/pull/19529#discussion_r842617330
##########
superset-frontend/src/explore/components/ExploreChartHeader/ChartEditableTitle/index.tsx:
##########
@@ -0,0 +1,199 @@
+/**
+ * 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, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { css, styled, t } from '@superset-ui/core';
+import { Tooltip } from 'src/components/Tooltip';
+import { useResizeDetector } from 'react-resize-detector';
+
+export type ChartEditableTitleProps = {
+ title: string;
+ placeholder: string;
+ onSave: (title: string) => void;
+ canEdit: boolean;
+};
+
+const Styles = styled.div`
+ ${({ theme }) => css`
+ display: flex;
+ font-size: ${theme.typography.sizes.xl}px;
+ font-weight: ${theme.typography.weights.bold};
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ & .chart-title,
+ & .chart-title-input {
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ & .chart-title {
+ cursor: default;
+ }
+ & .chart-title-input {
+ border: none;
+ padding: 0;
+ outline: none;
+
+ &::placeholder {
+ color: ${theme.colors.grayscale.light1};
+ }
+ }
+
+ & .input-sizer {
+ position: absolute;
+ left: -9999px;
+ display: inline-block;
+ }
+ `}
+`;
+
+export const ChartEditableTitle = ({
+ title,
+ placeholder,
+ onSave,
+ canEdit,
+}: ChartEditableTitleProps) => {
+ const [isEditing, setIsEditing] = useState(false);
+ const [currentTitle, setCurrentTitle] = useState(title || '');
+ const contentRef = useRef<HTMLInputElement>(null);
+ const [showTooltip, setShowTooltip] = useState(false);
+
+ const { width: inputWidth, ref: sizerRef } = useResizeDetector();
+ const { width: containerWidth, ref: containerRef } = useResizeDetector({
+ refreshMode: 'debounce',
+ });
+
+ useEffect(() => {
+ if (isEditing && contentRef?.current) {
+ contentRef.current.focus();
+ // move cursor and scroll to the end
+ if (contentRef.current.setSelectionRange) {
+ const { length } = contentRef.current.value;
+ contentRef.current.setSelectionRange(length, length);
+ contentRef.current.scrollLeft = contentRef.current.scrollWidth;
+ }
+ }
+ }, [isEditing]);
+
+ // a trick to make the input grow when user types text
+ // we make additional span component, place it somewhere out of view and copy input
+ // then we can measure the width of that span to resize the input element
+ useLayoutEffect(() => {
+ if (sizerRef.current) {
+ sizerRef.current.innerHTML = (currentTitle || placeholder).replace(
+ /\s/g,
+ ' ',
+ );
+ }
+ }, [currentTitle, placeholder, sizerRef]);
+
+ useEffect(() => {
+ if (
+ contentRef.current &&
+ contentRef.current.scrollWidth > contentRef.current.clientWidth
+ ) {
+ setShowTooltip(true);
+ } else {
+ setShowTooltip(false);
+ }
+ }, [inputWidth, containerWidth]);
+
+ const handleClick = () => {
+ if (!canEdit || isEditing) {
+ return;
+ }
+ setIsEditing(true);
+ };
+
+ const handleBlur = () => {
+ if (!canEdit) {
+ return;
+ }
+ const formattedTitle = currentTitle.trim();
+ setCurrentTitle(formattedTitle);
+ if (title !== formattedTitle) {
+ onSave(formattedTitle);
+ }
+ setIsEditing(false);
+ };
+
+ const handleChange = (ev: any) => {
+ if (!canEdit || !isEditing) {
+ return;
+ }
+ setCurrentTitle(ev.target.value);
+ };
+
+ const handleKeyPress = (ev: any) => {
+ if (!canEdit) {
+ return;
+ }
+ if (ev.key === 'Enter') {
+ ev.preventDefault();
+ contentRef.current?.blur();
+ }
+ };
+
+ return (
+ <Styles ref={containerRef}>
+ <Tooltip
+ id="title-tooltip"
+ title={showTooltip && currentTitle && !isEditing ? currentTitle : null}
+ >
+ {canEdit ? (
+ <input
+ data-test="editable-title-input"
+ className="chart-title-input"
+ aria-label={t('Chart title')}
+ ref={contentRef}
+ onChange={handleChange}
+ onBlur={handleBlur}
+ onClick={handleClick}
+ onKeyPress={handleKeyPress}
+ placeholder={placeholder}
+ value={currentTitle}
+ css={css`
+ cursor: ${isEditing ? 'text' : 'pointer'};
+
+ ${inputWidth &&
+ inputWidth > 0 &&
+ css`
+ width: ${inputWidth}px;
+ `}
+ `}
+ />
+ ) : (
+ <span
+ className="chart-title"
+ aria-label={t('Chart title')}
+ ref={contentRef}
+ >
+ {currentTitle}
+ </span>
+ )}
+ </Tooltip>
+ <span ref={sizerRef} className="input-sizer" aria-hidden tabIndex={-1} />
Review Comment:
That span is invisible, we need it to measure text width in order to scale input's width dynamically
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje merged pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
kgabryje merged PR #19529:
URL: https://github.com/apache/superset/pull/19529
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje commented on pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
kgabryje commented on PR #19529:
URL: https://github.com/apache/superset/pull/19529#issuecomment-1088633662
> I believe some time ago it used to save it when pressing return?
It still does 🙂 I like the idea of including the title in altered table! I'll add that to this PR
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] kgabryje commented on a diff in pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
kgabryje commented on code in PR #19529:
URL: https://github.com/apache/superset/pull/19529#discussion_r842617330
##########
superset-frontend/src/explore/components/ExploreChartHeader/ChartEditableTitle/index.tsx:
##########
@@ -0,0 +1,199 @@
+/**
+ * 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, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { css, styled, t } from '@superset-ui/core';
+import { Tooltip } from 'src/components/Tooltip';
+import { useResizeDetector } from 'react-resize-detector';
+
+export type ChartEditableTitleProps = {
+ title: string;
+ placeholder: string;
+ onSave: (title: string) => void;
+ canEdit: boolean;
+};
+
+const Styles = styled.div`
+ ${({ theme }) => css`
+ display: flex;
+ font-size: ${theme.typography.sizes.xl}px;
+ font-weight: ${theme.typography.weights.bold};
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ & .chart-title,
+ & .chart-title-input {
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ & .chart-title {
+ cursor: default;
+ }
+ & .chart-title-input {
+ border: none;
+ padding: 0;
+ outline: none;
+
+ &::placeholder {
+ color: ${theme.colors.grayscale.light1};
+ }
+ }
+
+ & .input-sizer {
+ position: absolute;
+ left: -9999px;
+ display: inline-block;
+ }
+ `}
+`;
+
+export const ChartEditableTitle = ({
+ title,
+ placeholder,
+ onSave,
+ canEdit,
+}: ChartEditableTitleProps) => {
+ const [isEditing, setIsEditing] = useState(false);
+ const [currentTitle, setCurrentTitle] = useState(title || '');
+ const contentRef = useRef<HTMLInputElement>(null);
+ const [showTooltip, setShowTooltip] = useState(false);
+
+ const { width: inputWidth, ref: sizerRef } = useResizeDetector();
+ const { width: containerWidth, ref: containerRef } = useResizeDetector({
+ refreshMode: 'debounce',
+ });
+
+ useEffect(() => {
+ if (isEditing && contentRef?.current) {
+ contentRef.current.focus();
+ // move cursor and scroll to the end
+ if (contentRef.current.setSelectionRange) {
+ const { length } = contentRef.current.value;
+ contentRef.current.setSelectionRange(length, length);
+ contentRef.current.scrollLeft = contentRef.current.scrollWidth;
+ }
+ }
+ }, [isEditing]);
+
+ // a trick to make the input grow when user types text
+ // we make additional span component, place it somewhere out of view and copy input
+ // then we can measure the width of that span to resize the input element
+ useLayoutEffect(() => {
+ if (sizerRef.current) {
+ sizerRef.current.innerHTML = (currentTitle || placeholder).replace(
+ /\s/g,
+ ' ',
+ );
+ }
+ }, [currentTitle, placeholder, sizerRef]);
+
+ useEffect(() => {
+ if (
+ contentRef.current &&
+ contentRef.current.scrollWidth > contentRef.current.clientWidth
+ ) {
+ setShowTooltip(true);
+ } else {
+ setShowTooltip(false);
+ }
+ }, [inputWidth, containerWidth]);
+
+ const handleClick = () => {
+ if (!canEdit || isEditing) {
+ return;
+ }
+ setIsEditing(true);
+ };
+
+ const handleBlur = () => {
+ if (!canEdit) {
+ return;
+ }
+ const formattedTitle = currentTitle.trim();
+ setCurrentTitle(formattedTitle);
+ if (title !== formattedTitle) {
+ onSave(formattedTitle);
+ }
+ setIsEditing(false);
+ };
+
+ const handleChange = (ev: any) => {
+ if (!canEdit || !isEditing) {
+ return;
+ }
+ setCurrentTitle(ev.target.value);
+ };
+
+ const handleKeyPress = (ev: any) => {
+ if (!canEdit) {
+ return;
+ }
+ if (ev.key === 'Enter') {
+ ev.preventDefault();
+ contentRef.current?.blur();
+ }
+ };
+
+ return (
+ <Styles ref={containerRef}>
+ <Tooltip
+ id="title-tooltip"
+ title={showTooltip && currentTitle && !isEditing ? currentTitle : null}
+ >
+ {canEdit ? (
+ <input
+ data-test="editable-title-input"
+ className="chart-title-input"
+ aria-label={t('Chart title')}
+ ref={contentRef}
+ onChange={handleChange}
+ onBlur={handleBlur}
+ onClick={handleClick}
+ onKeyPress={handleKeyPress}
+ placeholder={placeholder}
+ value={currentTitle}
+ css={css`
+ cursor: ${isEditing ? 'text' : 'pointer'};
+
+ ${inputWidth &&
+ inputWidth > 0 &&
+ css`
+ width: ${inputWidth}px;
+ `}
+ `}
+ />
+ ) : (
+ <span
+ className="chart-title"
+ aria-label={t('Chart title')}
+ ref={contentRef}
+ >
+ {currentTitle}
+ </span>
+ )}
+ </Tooltip>
+ <span ref={sizerRef} className="input-sizer" aria-hidden tabIndex={-1} />
Review Comment:
That span is invisible, we need it to measure input width in order to scale it's width dynamically
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
[GitHub] [superset] github-actions[bot] commented on pull request #19529: feat(explore): Move chart header to top of the page
Posted by GitBox <gi...@apache.org>.
github-actions[bot] commented on PR #19529:
URL: https://github.com/apache/superset/pull/19529#issuecomment-1088696455
Ephemeral environment shutdown and build artifacts deleted.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org