New UI: Add Timezone select #15674
New UI: Add Timezone select #15674
Conversation
Copied the UX from the current UI on how to change timezone preferences. Working on a Chakra UI wrapper for React-Select.
|
I'm wondering if the dropdown values should have the offset values in parens after the name? Seems like there should be a correlation between the selection and what is displayed up top as the current selection e.g. (-08:00) |
ryanahamilton
left a comment
ryanahamilton
left a comment
There was a problem hiding this comment.
I'm going to have to take another look tomorrow, but this is looking really nice! The MultiSelect component is quite a feat!
airflow/ui/src/components/Select.tsx
Outdated
| RecursiveCSSObject, | ||
| CSSWithMultiValues, | ||
| } from '@chakra-ui/react'; | ||
| import { ChevronDownIcon } from '@chakra-ui/icons'; |
There was a problem hiding this comment.
We should just continue utilizing react-icons instead of adding a new dependency.
| import { ChevronDownIcon } from '@chakra-ui/icons'; | |
| import { FiChevronDown } from 'react-icons/fi'; |
| @@ -0,0 +1,259 @@ | |||
| /*! | |||
There was a problem hiding this comment.
Change this file name to MultiSelect.tsx to match the function name and differentiate from a standard <select>?
airflow/ui/src/api/index.ts
Outdated
|
|
||
| const toastDuration = 3000; | ||
| const refetchInterval = isTest ? false : 1000; | ||
| const refetchInterval = false; |
| import tz from 'dayjs/plugin/timezone'; | ||
| import Select from 'components/MultiSelect'; | ||
|
|
||
| import timezones from 'utils/timezones.json'; |
There was a problem hiding this comment.
I'd rather we used a third party library for this than having to maintain our own list.
| dateTime={now.toString()} | ||
| fontSize="md" | ||
| > | ||
| {now.format('h:mmA Z')} |
There was a problem hiding this comment.
So here's the thing about localization: the "common" way dates are displayed in about half the world is to use the 24 hour clock
This is possibly an extra feature/PR as I guess the time display is a per-user setting, not a property of what timezone is selected.
There was a problem hiding this comment.
I'll do a 12/24hr toggle as a separate pr right after this.
|
|
||
| // guess timezone on browser or default to utc and don't guess when testing | ||
| const isTest = process.env.NODE_ENV === 'test'; | ||
| const [timezone, setTimezone] = useState((!isTest && dayjs.tz.guess()) || 'UTC'); |
There was a problem hiding this comment.
| const [timezone, setTimezone] = useState((!isTest && dayjs.tz.guess()) || 'UTC'); | |
| const [timezone, setTimezone] = useState(isTest ? 'UTC' : dayjs.tz.guess()); |
|
Updated with a 3rd party timezone library.
|
| const { timezone, setTimezone } = useTimezoneContext(); | ||
| const [now, setNow] = useState(dayjs().tz(timezone)); | ||
|
|
||
| const timezones = getTimeZones(); |
There was a problem hiding this comment.
Did you see this section of the tzdb docs https://github.com/vvo/tzdb/#notes:
const value = timeZones.find((timeZone) => {
return dbData.timeZone === timeZone.name || timeZone.group.includes(dbData.timeZone);
});There was a problem hiding this comment.
Good catch. Should I include all group names in the dropdown too?
There was a problem hiding this comment.
I'll let you decide -- but I think that might be a bit noisy/large?
There was a problem hiding this comment.
That's what I thought too. I'll leave it as-is
ashb
left a comment
ashb
left a comment
There was a problem hiding this comment.
Looks good to me, but React is not my strong suit :D
3 participants
Add a timezone select dropdown to the new UI. Closes #14807
This is a frontend only toggle, it does not change any backend Airflow config.
Also includes a custom implementation of
react-selectthat uses the Chakra theme and component library.^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code change, Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in UPDATING.md.