mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-11-14 18:03:38 +00:00
revamp(ui): whats new alert box popup (#13835)
* revamp whats new popup alert box * changes as per comments * added await for whats-new-alert in cypress and slow down gif loader * changes as per comments * minor changes
This commit is contained in:
Ashish Gupta
GitHub
parent
6dc630b685
commit
797eed5138
@ -23,6 +23,7 @@
|
||||
/docker
|
||||
|
||||
# Assets
|
||||
*.gif
|
||||
*.svg
|
||||
*.png
|
||||
*.ico
|
||||
|
||||
@ -50,6 +50,7 @@ src/generated/
|
||||
|
||||
|
||||
# Assets
|
||||
*.gif
|
||||
*.svg
|
||||
*.png
|
||||
*.ico
|
||||
|
||||
@ -81,7 +81,9 @@ Cypress.Commands.add('goToHomePage', (doNotNavigate) => {
|
||||
interceptURL('GET', '/api/v1/feed*', 'feed');
|
||||
interceptURL('GET', '/api/v1/users/*?fields=*', 'userProfile');
|
||||
!doNotNavigate && cy.visit('/');
|
||||
cy.get('[data-testid="whats-new-alert-card"]').should('be.visible');
|
||||
cy.get('[data-testid="whats-new-alert-card"]', {
|
||||
timeout: 500, // need to add timeout as alert pop-oup card has an 1s of animation to appear on screen
|
||||
}).should('be.visible');
|
||||
cy.get('[data-testid="close-whats-new-alert"]').click();
|
||||
cy.get('[data-testid="whats-new-alert-card"]').should('not.exist');
|
||||
// verifyResponseStatusCode('@feed', 200);
|
||||
|
||||
15
openmetadata-ui/src/main/resources/ui/src/@types/gif.d.ts
vendored
Normal file
15
openmetadata-ui/src/main/resources/ui/src/@types/gif.d.ts
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
/*
|
||||
* Copyright 2022 Collate.
|
||||
* Licensed 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.
|
||||
*/
|
||||
|
||||
// Module declaration to allow importing PNG files
|
||||
declare module '*.gif';
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
@ -0,0 +1,5 @@
|
||||
|
||||
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.54175 10C3.54175 9.65482 3.82157 9.375 4.16675 9.375H15.8334C16.1786 9.375 16.4584 9.65482 16.4584 10C16.4584 10.3452 16.1786 10.625 15.8334 10.625H4.16675C3.82157 10.625 3.54175 10.3452 3.54175 10Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.55806 3.72481C9.80214 3.48073 10.1979 3.48073 10.4419 3.72481L16.2753 9.55814C16.5194 9.80222 16.5194 10.1979 16.2753 10.442L10.4419 16.2754C10.1979 16.5194 9.80214 16.5194 9.55806 16.2754C9.31398 16.0313 9.31398 15.6356 9.55806 15.3915L14.9495 10.0001L9.55806 4.60869C9.31398 4.36461 9.31398 3.96888 9.55806 3.72481Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 748 B |
@ -0,0 +1,11 @@
|
||||
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_6666_145577)">
|
||||
<path d="M15.4 1H4.6C2.61177 1 1 2.79086 1 5V15C1 17.2091 2.61177 19 4.6 19H15.4C17.3882 19 19 17.2091 19 15V5C19 2.79086 17.3882 1 15.4 1Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.06667 7.03634C7.15836 7.36134 7 9.10297 7 10.3696C7 11.6363 7.15836 13.3363 8.06667 13.703C8.975 14.0696 12.8333 11.7946 12.8333 10.3696C12.8333 8.94464 9.03333 6.68634 8.06667 7.03634Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6666_145577">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 711 B |
@ -1,6 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_635_4922)">
|
||||
<path d="M12.0781 0.0499983C11.0063 0.284373 10.1344 1.17187 9.91875 2.24687C9.84688 2.60312 9.87188 3.25937 9.96563 3.59062C10.0031 3.71562 10.0281 3.825 10.025 3.82812C10.0188 3.83437 8.98125 4.45625 7.71875 5.21562L5.425 6.59375L5.26875 6.43437C5.07188 6.23437 4.80938 6.05625 4.4875 5.90625C4.0625 5.70625 3.89688 5.67187 3.3125 5.67187C2.72813 5.67187 2.5625 5.70625 2.1375 5.90625C1.49063 6.20625 1.05 6.64687 0.75 7.29375C0.55 7.71875 0.515625 7.88437 0.515625 8.46875C0.515625 9.05312 0.55 9.21875 0.75 9.64375C1.05 10.2906 1.49063 10.7312 2.1375 11.0312C2.55938 11.2281 2.73125 11.2625 3.29688 11.2656C3.90313 11.2656 4.1625 11.2062 4.64063 10.9594C4.90625 10.8219 5.00313 10.7469 5.2875 10.4656L5.62188 10.1375L7.7875 11.2437C8.97813 11.8531 9.95938 12.3562 9.9625 12.3594C9.96875 12.3656 9.95 12.4781 9.92188 12.6094C9.87813 12.8 9.87188 12.9437 9.88438 13.2937C9.90313 13.7906 9.94688 13.9844 10.125 14.3625C10.425 15.0094 10.8656 15.45 11.5125 15.75C11.9375 15.95 12.1031 15.9844 12.6875 15.9844C13.2719 15.9844 13.4375 15.95 13.8625 15.75C14.5094 15.45 14.95 15.0094 15.25 14.3625C15.45 13.9375 15.4844 13.7719 15.4844 13.1875C15.4844 12.6031 15.45 12.4375 15.25 12.0125C14.95 11.3656 14.5094 10.925 13.8625 10.625C13.4375 10.425 13.2719 10.3906 12.6875 10.3906C12.2344 10.3906 12.1406 10.4 11.9219 10.4656C11.3781 10.625 10.8188 10.9937 10.5 11.3969L10.4219 11.4969L8.25 10.3844C7.05625 9.775 6.06875 9.26562 6.05625 9.25312C6.04375 9.24375 6.05625 9.14375 6.08125 9.03125C6.15625 8.72187 6.125 8.00312 6.025 7.67187L5.95 7.41875L8.24688 6.0375L10.5438 4.65625L10.7156 4.83125C11.025 5.14375 11.5156 5.425 11.9688 5.55312C12.2594 5.63125 13.1156 5.63125 13.4063 5.55312C14.0406 5.375 14.6563 4.94375 15.0063 4.42812C15.1656 4.19062 15.3531 3.79375 15.4281 3.53125C15.5063 3.24062 15.5063 2.38437 15.4281 2.09375C15.25 1.45937 14.8188 0.843749 14.3031 0.493749C14.0719 0.337499 13.6719 0.146873 13.4219 0.078124C13.1531 0.00312328 12.3688 -0.0156269 12.0781 0.0499983ZM13.1406 1.01562C13.4688 1.1 13.7125 1.24375 13.9844 1.51562C14.3719 1.9 14.5313 2.28125 14.5313 2.8125C14.5313 3.34375 14.3719 3.725 13.9844 4.10937C13.6 4.49687 13.2188 4.65625 12.6875 4.65625C12.1563 4.65625 11.775 4.49687 11.3906 4.10937C11.0031 3.725 10.8438 3.34375 10.8438 2.8125C10.8438 2.28125 11.0031 1.9 11.3906 1.51562C11.6563 1.24687 11.9031 1.1 12.2188 1.01875C12.4469 0.959373 12.9094 0.956248 13.1406 1.01562ZM3.76563 6.67187C4.09375 6.75625 4.3375 6.9 4.60938 7.17187C4.99688 7.55625 5.15625 7.9375 5.15625 8.46875C5.15625 9 4.99688 9.38125 4.60938 9.76562C4.225 10.1531 3.84375 10.3125 3.3125 10.3125C2.78125 10.3125 2.4 10.1531 2.01563 9.76562C1.62813 9.38125 1.46875 9 1.46875 8.46875C1.46875 7.9375 1.62813 7.55625 2.01563 7.17187C2.28125 6.90312 2.52813 6.75625 2.84375 6.675C3.07188 6.61562 3.53438 6.6125 3.76563 6.67187ZM13.1406 11.3906C13.4688 11.475 13.7125 11.6187 13.9844 11.8906C14.3719 12.275 14.5313 12.6562 14.5313 13.1875C14.5313 13.7187 14.3719 14.1 13.9844 14.4844C13.6 14.8719 13.2188 15.0312 12.6875 15.0312C12.1563 15.0312 11.775 14.8719 11.3906 14.4844C11.0031 14.1 10.8438 13.7187 10.8438 13.1875C10.8438 12.6562 11.0031 12.275 11.3906 11.8906C11.6563 11.6219 11.9031 11.475 12.2188 11.3937C12.4469 11.3344 12.9094 11.3312 13.1406 11.3906Z" fill="#currentColor"/>
|
||||
<path d="M12.0781 0.0499983C11.0063 0.284373 10.1344 1.17187 9.91875 2.24687C9.84688 2.60312 9.87188 3.25937 9.96563 3.59062C10.0031 3.71562 10.0281 3.825 10.025 3.82812C10.0188 3.83437 8.98125 4.45625 7.71875 5.21562L5.425 6.59375L5.26875 6.43437C5.07188 6.23437 4.80938 6.05625 4.4875 5.90625C4.0625 5.70625 3.89688 5.67187 3.3125 5.67187C2.72813 5.67187 2.5625 5.70625 2.1375 5.90625C1.49063 6.20625 1.05 6.64687 0.75 7.29375C0.55 7.71875 0.515625 7.88437 0.515625 8.46875C0.515625 9.05312 0.55 9.21875 0.75 9.64375C1.05 10.2906 1.49063 10.7312 2.1375 11.0312C2.55938 11.2281 2.73125 11.2625 3.29688 11.2656C3.90313 11.2656 4.1625 11.2062 4.64063 10.9594C4.90625 10.8219 5.00313 10.7469 5.2875 10.4656L5.62188 10.1375L7.7875 11.2437C8.97813 11.8531 9.95938 12.3562 9.9625 12.3594C9.96875 12.3656 9.95 12.4781 9.92188 12.6094C9.87813 12.8 9.87188 12.9437 9.88438 13.2937C9.90313 13.7906 9.94688 13.9844 10.125 14.3625C10.425 15.0094 10.8656 15.45 11.5125 15.75C11.9375 15.95 12.1031 15.9844 12.6875 15.9844C13.2719 15.9844 13.4375 15.95 13.8625 15.75C14.5094 15.45 14.95 15.0094 15.25 14.3625C15.45 13.9375 15.4844 13.7719 15.4844 13.1875C15.4844 12.6031 15.45 12.4375 15.25 12.0125C14.95 11.3656 14.5094 10.925 13.8625 10.625C13.4375 10.425 13.2719 10.3906 12.6875 10.3906C12.2344 10.3906 12.1406 10.4 11.9219 10.4656C11.3781 10.625 10.8188 10.9937 10.5 11.3969L10.4219 11.4969L8.25 10.3844C7.05625 9.775 6.06875 9.26562 6.05625 9.25312C6.04375 9.24375 6.05625 9.14375 6.08125 9.03125C6.15625 8.72187 6.125 8.00312 6.025 7.67187L5.95 7.41875L8.24688 6.0375L10.5438 4.65625L10.7156 4.83125C11.025 5.14375 11.5156 5.425 11.9688 5.55312C12.2594 5.63125 13.1156 5.63125 13.4063 5.55312C14.0406 5.375 14.6563 4.94375 15.0063 4.42812C15.1656 4.19062 15.3531 3.79375 15.4281 3.53125C15.5063 3.24062 15.5063 2.38437 15.4281 2.09375C15.25 1.45937 14.8188 0.843749 14.3031 0.493749C14.0719 0.337499 13.6719 0.146873 13.4219 0.078124C13.1531 0.00312328 12.3688 -0.0156269 12.0781 0.0499983ZM13.1406 1.01562C13.4688 1.1 13.7125 1.24375 13.9844 1.51562C14.3719 1.9 14.5313 2.28125 14.5313 2.8125C14.5313 3.34375 14.3719 3.725 13.9844 4.10937C13.6 4.49687 13.2188 4.65625 12.6875 4.65625C12.1563 4.65625 11.775 4.49687 11.3906 4.10937C11.0031 3.725 10.8438 3.34375 10.8438 2.8125C10.8438 2.28125 11.0031 1.9 11.3906 1.51562C11.6563 1.24687 11.9031 1.1 12.2188 1.01875C12.4469 0.959373 12.9094 0.956248 13.1406 1.01562ZM3.76563 6.67187C4.09375 6.75625 4.3375 6.9 4.60938 7.17187C4.99688 7.55625 5.15625 7.9375 5.15625 8.46875C5.15625 9 4.99688 9.38125 4.60938 9.76562C4.225 10.1531 3.84375 10.3125 3.3125 10.3125C2.78125 10.3125 2.4 10.1531 2.01563 9.76562C1.62813 9.38125 1.46875 9 1.46875 8.46875C1.46875 7.9375 1.62813 7.55625 2.01563 7.17187C2.28125 6.90312 2.52813 6.75625 2.84375 6.675C3.07188 6.61562 3.53438 6.6125 3.76563 6.67187ZM13.1406 11.3906C13.4688 11.475 13.7125 11.6187 13.9844 11.8906C14.3719 12.275 14.5313 12.6562 14.5313 13.1875C14.5313 13.7187 14.3719 14.1 13.9844 14.4844C13.6 14.8719 13.2188 15.0312 12.6875 15.0312C12.1563 15.0312 11.775 14.8719 11.3906 14.4844C11.0031 14.1 10.8438 13.7187 10.8438 13.1875C10.8438 12.6562 11.0031 12.275 11.3906 11.8906C11.6563 11.6219 11.9031 11.475 12.2188 11.3937C12.4469 11.3344 12.9094 11.3312 13.1406 11.3906Z" fill="currentColor"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_635_4922">
|
||||
|
||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="#7147e8"><path d="M10.272 12.99c-.166 0-.33-.04-.476-.118l-2.727-1.434a.146.146 0 0 0-.138 0l-2.726 1.434a1.023 1.023 0 0 1-1.485-1.079l.521-3.036a.148.148 0 0 0-.044-.13L.993 6.474a1.023 1.023 0 0 1 .569-1.745l3.046-.443a.147.147 0 0 0 .111-.08l1.362-2.763a1.022 1.022 0 0 1 1.835 0l1.363 2.762a.149.149 0 0 0 .11.08l3.05.443a1.023 1.023 0 0 1 .568 1.746l-2.206 2.15a.148.148 0 0 0-.044.13l.52 3.036a1.024 1.024 0 0 1-1.005 1.197v.002ZM7 10.546c.166 0 .33.04.476.118l2.727 1.433a.14.14 0 0 0 .155-.011.142.142 0 0 0 .06-.145l-.522-3.036A1.025 1.025 0 0 1 10.19 8l2.207-2.15a.148.148 0 0 0-.083-.253l-3.048-.443a1.022 1.022 0 0 1-.77-.56L7.13 1.833a.148.148 0 0 0-.265 0L5.504 4.594a1.022 1.022 0 0 1-.77.56l-3.048.443a.147.147 0 0 0-.082.252L3.81 8a1.025 1.025 0 0 1 .294.906l-.521 3.036a.148.148 0 0 0 .215.156l2.726-1.433c.147-.078.31-.118.476-.118Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 927 B |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none"><path fill="#37352F" d="M10.272 12.99c-.166 0-.33-.04-.476-.118l-2.727-1.434a.146.146 0 0 0-.138 0l-2.726 1.434a1.023 1.023 0 0 1-1.485-1.079l.521-3.036a.148.148 0 0 0-.044-.13L.993 6.474a1.023 1.023 0 0 1 .569-1.745l3.046-.443a.147.147 0 0 0 .111-.08l1.362-2.763a1.022 1.022 0 0 1 1.835 0l1.363 2.762a.149.149 0 0 0 .11.08l3.05.443a1.023 1.023 0 0 1 .568 1.746l-2.206 2.15a.148.148 0 0 0-.044.13l.52 3.036a1.024 1.024 0 0 1-1.005 1.197v.002ZM7 10.546c.166 0 .33.04.476.118l2.727 1.433a.14.14 0 0 0 .155-.011.142.142 0 0 0 .06-.145l-.522-3.036A1.025 1.025 0 0 1 10.19 8l2.207-2.15a.148.148 0 0 0-.083-.253l-3.048-.443a1.022 1.022 0 0 1-.77-.56L7.13 1.833a.148.148 0 0 0-.265 0L5.504 4.594a1.022 1.022 0 0 1-.77.56l-3.048.443a.147.147 0 0 0-.082.252L3.81 8a1.025 1.025 0 0 1 .294.906l-.521 3.036a.148.148 0 0 0 .215.156l2.726-1.433c.147-.078.31-.118.476-.118Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none"><path fill="currentColor" d="M10.272 12.99c-.166 0-.33-.04-.476-.118l-2.727-1.434a.146.146 0 0 0-.138 0l-2.726 1.434a1.023 1.023 0 0 1-1.485-1.079l.521-3.036a.148.148 0 0 0-.044-.13L.993 6.474a1.023 1.023 0 0 1 .569-1.745l3.046-.443a.147.147 0 0 0 .111-.08l1.362-2.763a1.022 1.022 0 0 1 1.835 0l1.363 2.762a.149.149 0 0 0 .11.08l3.05.443a1.023 1.023 0 0 1 .568 1.746l-2.206 2.15a.148.148 0 0 0-.044.13l.52 3.036a1.024 1.024 0 0 1-1.005 1.197v.002ZM7 10.546c.166 0 .33.04.476.118l2.727 1.433a.14.14 0 0 0 .155-.011.142.142 0 0 0 .06-.145l-.522-3.036A1.025 1.025 0 0 1 10.19 8l2.207-2.15a.148.148 0 0 0-.083-.253l-3.048-.443a1.022 1.022 0 0 1-.77-.56L7.13 1.833a.148.148 0 0 0-.265 0L5.504 4.594a1.022 1.022 0 0 1-.77.56l-3.048.443a.147.147 0 0 0-.082.252L3.81 8a1.025 1.025 0 0 1 .294.906l-.521 3.036a.148.148 0 0 0 .215.156l2.726-1.433c.147-.078.31-.118.476-.118Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 939 B After Width: | Height: | Size: 944 B |
@ -373,7 +373,7 @@ export const ActivityFeedTab = ({
|
||||
}}>
|
||||
{' '}
|
||||
<CheckIcon className="m-r-xss" width={14} /> {closedTasks}{' '}
|
||||
{t('label.close')}
|
||||
{t('label.closed')}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -10,16 +10,18 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Affix, Button, Card, Space, Typography } from 'antd';
|
||||
import { Affix, Button, Card, Col, Row, Space, Typography } from 'antd';
|
||||
import { CookieStorage } from 'cookie-storage';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import UpdateLoaderGif from '../../../../assets/gif/whats-new-loader.gif';
|
||||
import { ReactComponent as CloseIcon } from '../../../../assets/svg/close.svg';
|
||||
import { ReactComponent as RocketIcon } from '../../../../assets/svg/rocket.svg';
|
||||
import { ROUTES } from '../../../../constants/constants';
|
||||
import { ReactComponent as RightArrowIcon } from '../../../../assets/svg/ic-arrow-right-full.svg';
|
||||
import { ReactComponent as PlayIcon } from '../../../../assets/svg/ic-play-button.svg';
|
||||
import { ReactComponent as StarIcon } from '../../../../assets/svg/ic-star.svg';
|
||||
import { BLACK_COLOR, ROUTES } from '../../../../constants/constants';
|
||||
import { useAuth } from '../../../../hooks/authHooks';
|
||||
import { Transi18next } from '../../../../utils/CommonUtils';
|
||||
import { COOKIE_VERSION, LATEST_VERSION_ID, WHATS_NEW } from '../whatsNewData';
|
||||
import WhatsNewModal from '../WhatsNewModal';
|
||||
import '../WhatsNewModal.styles.less';
|
||||
@ -45,6 +47,31 @@ const WhatsNewAlert = () => {
|
||||
[location.pathname]
|
||||
);
|
||||
|
||||
const onAlertCardClick = useCallback(
|
||||
() =>
|
||||
setShowWhatsNew({
|
||||
alert: false,
|
||||
modal: true,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const onModalCancel = useCallback(
|
||||
() =>
|
||||
setShowWhatsNew({
|
||||
alert: false,
|
||||
modal: false,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
cookieStorage.setItem(COOKIE_VERSION, 'true', {
|
||||
expires: getReleaseVersionExpiry(),
|
||||
});
|
||||
onModalCancel();
|
||||
}, [cookieStorage, onModalCancel, getReleaseVersionExpiry]);
|
||||
|
||||
useEffect(() => {
|
||||
setShowWhatsNew({
|
||||
alert: cookieStorage.getItem(COOKIE_VERSION) !== 'true',
|
||||
@ -52,66 +79,64 @@ const WhatsNewAlert = () => {
|
||||
});
|
||||
}, [isFirstTimeUser]);
|
||||
|
||||
const onAlertCardClick = () => {
|
||||
setShowWhatsNew({
|
||||
alert: false,
|
||||
modal: true,
|
||||
});
|
||||
};
|
||||
const onModalCancel = () => {
|
||||
setShowWhatsNew({
|
||||
alert: false,
|
||||
modal: false,
|
||||
});
|
||||
};
|
||||
const handleCancel = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
cookieStorage.setItem(COOKIE_VERSION, 'true', {
|
||||
expires: getReleaseVersionExpiry(),
|
||||
});
|
||||
onModalCancel();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showWhatsNew.alert && isHomePage && (
|
||||
<Affix className="whats-new-alert-container">
|
||||
<Card
|
||||
className="cursor-pointer"
|
||||
data-testid="whats-new-alert-card"
|
||||
onClick={onAlertCardClick}>
|
||||
<Card className="cursor-pointer" data-testid="whats-new-alert-card">
|
||||
<Space align="start" className="d-flex justify-between">
|
||||
<Space size={14}>
|
||||
<RocketIcon color="#fff" height={42} width={42} />
|
||||
<Typography.Text className="whats-new-alert-header">
|
||||
<Transi18next
|
||||
i18nKey="message.version-released-try-now"
|
||||
renderElement={<div />}
|
||||
values={{
|
||||
version: latestVersion.version,
|
||||
}}
|
||||
/>
|
||||
{t('label.open-metadata-updated')}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
<Button
|
||||
className="flex-center m--t-xss"
|
||||
data-testid="close-whats-new-alert"
|
||||
icon={<CloseIcon color="#fff" height={12} width={12} />}
|
||||
icon={<CloseIcon color={BLACK_COLOR} height={12} width={12} />}
|
||||
type="text"
|
||||
onClick={handleCancel}
|
||||
/>
|
||||
</Space>
|
||||
|
||||
{latestVersion?.shortSummary ? (
|
||||
<Typography.Paragraph
|
||||
className="whats-new-alert-description"
|
||||
style={{ marginBottom: 0, marginTop: '8px' }}>
|
||||
{latestVersion?.shortSummary}
|
||||
</Typography.Paragraph>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<Row className="m-t-sm" gutter={[0, 12]}>
|
||||
<Col className="whats-new-alert-content" span={24}>
|
||||
<Space align="center" size={12} onClick={onAlertCardClick}>
|
||||
<div className="whats-new-alert-content-icon-container">
|
||||
<PlayIcon className="whats-new-alert-content-icon" />
|
||||
</div>
|
||||
|
||||
<Typography.Text className="whats-new-alert-sub-header">
|
||||
{t('label.whats-new-version', {
|
||||
version: latestVersion.version,
|
||||
})}
|
||||
</Typography.Text>
|
||||
|
||||
<RightArrowIcon className="whats-new-alert-content-icon-arrow" />
|
||||
</Space>
|
||||
</Col>
|
||||
|
||||
<Col className="whats-new-alert-content" span={24}>
|
||||
<Space align="center" size={12}>
|
||||
<div className="whats-new-alert-content-icon-container">
|
||||
<StarIcon className="whats-new-alert-content-icon" />
|
||||
</div>
|
||||
<Link
|
||||
className="whats-new-alert-sub-header"
|
||||
component={Typography.Link}
|
||||
target="_blank"
|
||||
to={{
|
||||
pathname: 'https://github.com/open-metadata/OpenMetadata',
|
||||
}}>
|
||||
{t('label.star-open-metadata')}
|
||||
</Link>
|
||||
|
||||
<RightArrowIcon className="whats-new-alert-content-icon-arrow" />
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div className="update-icon-container">
|
||||
<img className="update-icon" src={UpdateLoaderGif} />
|
||||
</div>
|
||||
</Card>
|
||||
</Affix>
|
||||
)}
|
||||
|
||||
@ -37,27 +37,96 @@
|
||||
background: @white;
|
||||
}
|
||||
|
||||
@keyframes scrollIn {
|
||||
to {
|
||||
bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.whats-new-alert-container {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
bottom: -100%;
|
||||
right: 30px;
|
||||
z-index: 1;
|
||||
background: @white;
|
||||
animation: scrollIn 2s normal forwards ease-in-out;
|
||||
animation-delay: 1s;
|
||||
|
||||
.ant-card {
|
||||
position: relative;
|
||||
width: 338px;
|
||||
}
|
||||
.ant-card-body {
|
||||
background-color: @primary-color;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: 0 0 20px rgba(117, 117, 117, 0.3);
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid @primary-color;
|
||||
background: linear-gradient(
|
||||
0.9turn,
|
||||
rgba(9, 80, 197, 0.2),
|
||||
rgba(255, 255, 255) 40%
|
||||
);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.whats-new-alert-header {
|
||||
color: @white;
|
||||
color: @primary-color;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
.whats-new-alert-description {
|
||||
color: @white;
|
||||
|
||||
.whats-new-alert-content {
|
||||
.whats-new-alert-sub-header {
|
||||
color: @black;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.whats-new-alert-content-icon-container {
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
.whats-new-alert-content-icon {
|
||||
color: @primary-color;
|
||||
vertical-align: middle;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.whats-new-alert-content-icon-arrow {
|
||||
display: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: @text-grey-muted;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.whats-new-alert-sub-header {
|
||||
text-decoration: underline;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.whats-new-alert-content-icon-container {
|
||||
background-color: rgba(9, 80, 197, 0.1);
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.whats-new-alert-content-icon-arrow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.update-icon-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translate(35%, 45%) scaleX(-1);
|
||||
opacity: 0.1;
|
||||
|
||||
.update-icon {
|
||||
transform: rotate(180deg);
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -40,6 +40,7 @@ export const GRAYED_OUT_COLOR = '#CCCCCC';
|
||||
export const GREEN_COLOR = '#28A745';
|
||||
export const GREEN_COLOR_OPACITY_30 = '#28A74530';
|
||||
export const BORDER_COLOR = '#0000001a';
|
||||
export const BLACK_COLOR = '#000000';
|
||||
|
||||
export const DEFAULT_CHART_OPACITY = 1;
|
||||
export const HOVER_CHART_OPACITY = 0.3;
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
"client-x509-certificate-url": "URL des X509-Zertifikats des Clients",
|
||||
"close": "Schließen",
|
||||
"close-with-comment": "Mit Kommentar schließen",
|
||||
"closed": "Closed",
|
||||
"closed-lowercase": "geschlossen",
|
||||
"closed-task-plural": "Geschlossene Aufgaben",
|
||||
"closed-this-task-lowercase": "diese Aufgabe schließen",
|
||||
@ -689,6 +690,7 @@
|
||||
"open-lowercase": "öffnen",
|
||||
"open-metadata": "OpenMetadata",
|
||||
"open-metadata-logo": "OpenMetadata-Logo",
|
||||
"open-metadata-updated": "OpenMetadata Updated!",
|
||||
"open-metadata-url": "OpenMetadata-URL",
|
||||
"operation-plural": "Operationen",
|
||||
"option": "Option",
|
||||
@ -940,6 +942,7 @@
|
||||
"sql-uppercase-query": "SQL-Abfrage",
|
||||
"sso-uppercase": "SSO",
|
||||
"stage-file-location": "Speicherort der Bühnendatei",
|
||||
"star-open-metadata": "Star OpenMetadata",
|
||||
"star-us-on-github": "Sterne uns auf Github",
|
||||
"start-date-time-zone": "Startdatum ({{timeZone}})",
|
||||
"start-elasticsearch-docker": "Elasticsearch Docker starten",
|
||||
@ -1133,6 +1136,7 @@
|
||||
"week": "Woche",
|
||||
"weekly-usage": "Wöchentliche Verwendung",
|
||||
"whats-new": "Neuigkeiten",
|
||||
"whats-new-version": "What's New ({{version}})",
|
||||
"widget": "Widget",
|
||||
"widget-lowercase": "widget",
|
||||
"workflow-plural": "Workflows",
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
"client-x509-certificate-url": "Client x509 Certificate URL",
|
||||
"close": "Close",
|
||||
"close-with-comment": "Close with Comment",
|
||||
"closed": "Closed",
|
||||
"closed-lowercase": "closed",
|
||||
"closed-task-plural": "Closed Tasks",
|
||||
"closed-this-task-lowercase": "closed this task",
|
||||
@ -689,6 +690,7 @@
|
||||
"open-lowercase": "open",
|
||||
"open-metadata": "OpenMetadata",
|
||||
"open-metadata-logo": "OpenMetadata Logo",
|
||||
"open-metadata-updated": "OpenMetadata Updated!",
|
||||
"open-metadata-url": "OpenMetadata URL",
|
||||
"operation-plural": "Operations",
|
||||
"option": "Option",
|
||||
@ -940,6 +942,7 @@
|
||||
"sql-uppercase-query": "SQL Query",
|
||||
"sso-uppercase": "SSO",
|
||||
"stage-file-location": "Stage File Location",
|
||||
"star-open-metadata": "Star OpenMetadata",
|
||||
"star-us-on-github": "Star us on Github",
|
||||
"start-date-time-zone": "Start Date: ({{timeZone}})",
|
||||
"start-elasticsearch-docker": "Start Elasticsearch Docker",
|
||||
@ -1133,6 +1136,7 @@
|
||||
"week": "Week",
|
||||
"weekly-usage": "Weekly Usage",
|
||||
"whats-new": "What's New",
|
||||
"whats-new-version": "What's New ({{version}})",
|
||||
"widget": "Widget",
|
||||
"widget-lowercase": "widget",
|
||||
"workflow-plural": "Workflows",
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
"client-x509-certificate-url": "URL de certificado x509 de cliente",
|
||||
"close": "Cerrar",
|
||||
"close-with-comment": "Cerrar con comentario",
|
||||
"closed": "Closed",
|
||||
"closed-lowercase": "cerrado",
|
||||
"closed-task-plural": "Tareas cerradas",
|
||||
"closed-this-task-lowercase": "cerró esta tarea",
|
||||
@ -689,6 +690,7 @@
|
||||
"open-lowercase": "abrir",
|
||||
"open-metadata": "OpenMetadata",
|
||||
"open-metadata-logo": "Logo de OpenMetadata",
|
||||
"open-metadata-updated": "OpenMetadata Updated!",
|
||||
"open-metadata-url": "OpenMetadata URL",
|
||||
"operation-plural": "Operaciones",
|
||||
"option": "Opción",
|
||||
@ -940,6 +942,7 @@
|
||||
"sql-uppercase-query": "Consulta SQL",
|
||||
"sso-uppercase": "SSO",
|
||||
"stage-file-location": "Ubicación del Archivo de Etapa",
|
||||
"star-open-metadata": "Star OpenMetadata",
|
||||
"star-us-on-github": "Danos una Estrella en Github",
|
||||
"start-date-time-zone": "Fecha de Inicio: ({{timeZone}})",
|
||||
"start-elasticsearch-docker": "Iniciar Elasticsearch Docker",
|
||||
@ -1133,6 +1136,7 @@
|
||||
"week": "Semana",
|
||||
"weekly-usage": "Uso semanal",
|
||||
"whats-new": "Novedades",
|
||||
"whats-new-version": "What's New ({{version}})",
|
||||
"widget": "Widget",
|
||||
"widget-lowercase": "widget",
|
||||
"workflow-plural": "Workflows",
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
"client-x509-certificate-url": "URL du Certificat X509 du Client",
|
||||
"close": "Fermer",
|
||||
"close-with-comment": "Fermer avec un Commentaire",
|
||||
"closed": "Closed",
|
||||
"closed-lowercase": "fermé",
|
||||
"closed-task-plural": "Tâches Clôturées",
|
||||
"closed-this-task-lowercase": "fermer cette tâche",
|
||||
@ -689,6 +690,7 @@
|
||||
"open-lowercase": "ouvrir",
|
||||
"open-metadata": "OpenMetadata",
|
||||
"open-metadata-logo": "Logo OpenMetadata",
|
||||
"open-metadata-updated": "OpenMetadata Updated!",
|
||||
"open-metadata-url": "URL OpenMetadata",
|
||||
"operation-plural": "Opérations",
|
||||
"option": "Option",
|
||||
@ -940,6 +942,7 @@
|
||||
"sql-uppercase-query": "Requête SQL",
|
||||
"sso-uppercase": "SSO",
|
||||
"stage-file-location": "Emplacement du Fichier de Staging",
|
||||
"star-open-metadata": "Star OpenMetadata",
|
||||
"star-us-on-github": "Étoilez-nous sur Github",
|
||||
"start-date-time-zone": "Date de Début ({{timeZone}})",
|
||||
"start-elasticsearch-docker": "Démarrer Docker Elasticsearch",
|
||||
@ -1133,6 +1136,7 @@
|
||||
"week": "Semaine",
|
||||
"weekly-usage": "Utilisation Hebdomadaire",
|
||||
"whats-new": "Nouveautés",
|
||||
"whats-new-version": "What's New ({{version}})",
|
||||
"widget": "Widget",
|
||||
"widget-lowercase": "widget",
|
||||
"workflow-plural": "Workflows",
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
"client-x509-certificate-url": "Client x509 Certificate URL",
|
||||
"close": "閉じる",
|
||||
"close-with-comment": "コメントして閉じる",
|
||||
"closed": "Closed",
|
||||
"closed-lowercase": "closed",
|
||||
"closed-task-plural": "終了したタスク",
|
||||
"closed-this-task-lowercase": "このタスクを終了する",
|
||||
@ -689,6 +690,7 @@
|
||||
"open-lowercase": "開く",
|
||||
"open-metadata": "OpenMetadata",
|
||||
"open-metadata-logo": "OpenMetadataのロゴ",
|
||||
"open-metadata-updated": "OpenMetadata Updated!",
|
||||
"open-metadata-url": "OpenMetadata URL",
|
||||
"operation-plural": "操作",
|
||||
"option": "オプション",
|
||||
@ -940,6 +942,7 @@
|
||||
"sql-uppercase-query": "SQL Query",
|
||||
"sso-uppercase": "SSO",
|
||||
"stage-file-location": "Stage File Location",
|
||||
"star-open-metadata": "Star OpenMetadata",
|
||||
"star-us-on-github": "Githubプロジェクトにスターを付ける",
|
||||
"start-date-time-zone": "開始日: ({{timeZone}})",
|
||||
"start-elasticsearch-docker": "Elasticsearch Docker をスタート",
|
||||
@ -1133,6 +1136,7 @@
|
||||
"week": "週",
|
||||
"weekly-usage": "Weekly Usage",
|
||||
"whats-new": "最新情報",
|
||||
"whats-new-version": "What's New ({{version}})",
|
||||
"widget": "Widget",
|
||||
"widget-lowercase": "widget",
|
||||
"workflow-plural": "Workflows",
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
"client-x509-certificate-url": "URL do certificado x509 do cliente",
|
||||
"close": "Fechar",
|
||||
"close-with-comment": "Fechar com comentário",
|
||||
"closed": "Closed",
|
||||
"closed-lowercase": "fechado",
|
||||
"closed-task-plural": "Tarefas fechadas",
|
||||
"closed-this-task-lowercase": "esta tarefa foi fechada",
|
||||
@ -689,6 +690,7 @@
|
||||
"open-lowercase": "abrir",
|
||||
"open-metadata": "OpenMetadata",
|
||||
"open-metadata-logo": "Logo do OpenMetadata",
|
||||
"open-metadata-updated": "OpenMetadata Updated!",
|
||||
"open-metadata-url": "OpenMetadata URL",
|
||||
"operation-plural": "Operações",
|
||||
"option": "Opção",
|
||||
@ -940,6 +942,7 @@
|
||||
"sql-uppercase-query": "Consulta SQL",
|
||||
"sso-uppercase": "SSO",
|
||||
"stage-file-location": "Localização de Arquivo de Estágio",
|
||||
"star-open-metadata": "Star OpenMetadata",
|
||||
"star-us-on-github": "Nos avalie no Github",
|
||||
"start-date-time-zone": "Data de Início: ({{timeZone}})",
|
||||
"start-elasticsearch-docker": "Iniciar Elasticsearch Docker",
|
||||
@ -1133,6 +1136,7 @@
|
||||
"week": "Semana",
|
||||
"weekly-usage": "Uso semanal",
|
||||
"whats-new": "O que há de novo",
|
||||
"whats-new-version": "What's New ({{version}})",
|
||||
"widget": "Widget",
|
||||
"widget-lowercase": "widget",
|
||||
"workflow-plural": "Workflows",
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
"client-x509-certificate-url": "URL-адрес сертификата клиента x509",
|
||||
"close": "Закрыто",
|
||||
"close-with-comment": "Закрыть с комментарием",
|
||||
"closed": "Closed",
|
||||
"closed-lowercase": "закрыто",
|
||||
"closed-task-plural": "Закрытые задачи",
|
||||
"closed-this-task-lowercase": "закрыть задачу",
|
||||
@ -689,6 +690,7 @@
|
||||
"open-lowercase": "открыть",
|
||||
"open-metadata": "OpenMetadata",
|
||||
"open-metadata-logo": "OpenMetadata Logo",
|
||||
"open-metadata-updated": "OpenMetadata Updated!",
|
||||
"open-metadata-url": "OpenMetadata URL",
|
||||
"operation-plural": "Операции",
|
||||
"option": "Вариант",
|
||||
@ -940,6 +942,7 @@
|
||||
"sql-uppercase-query": "SQL Запрос",
|
||||
"sso-uppercase": "SSO",
|
||||
"stage-file-location": "Расположение файла",
|
||||
"star-open-metadata": "Star OpenMetadata",
|
||||
"star-us-on-github": "Пометить на Github",
|
||||
"start-date-time-zone": "Дата начала: ({{timeZone}})",
|
||||
"start-elasticsearch-docker": "Запустить Elasticsearch Docker",
|
||||
@ -1133,6 +1136,7 @@
|
||||
"week": "Неделя",
|
||||
"weekly-usage": "Еженедельное использование",
|
||||
"whats-new": "Новости",
|
||||
"whats-new-version": "What's New ({{version}})",
|
||||
"widget": "Widget",
|
||||
"widget-lowercase": "widget",
|
||||
"workflow-plural": "Workflows",
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
"client-x509-certificate-url": "客户端 x509 证书 URL",
|
||||
"close": "关闭",
|
||||
"close-with-comment": "加注释关闭",
|
||||
"closed": "Closed",
|
||||
"closed-lowercase": "关闭",
|
||||
"closed-task-plural": "已关闭任务",
|
||||
"closed-this-task-lowercase": "关闭此任务",
|
||||
@ -689,6 +690,7 @@
|
||||
"open-lowercase": "打开",
|
||||
"open-metadata": "OpenMetadata",
|
||||
"open-metadata-logo": "OpenMetadata Logo",
|
||||
"open-metadata-updated": "OpenMetadata Updated!",
|
||||
"open-metadata-url": "OpenMetadata URL",
|
||||
"operation-plural": "操作",
|
||||
"option": "选项",
|
||||
@ -940,6 +942,7 @@
|
||||
"sql-uppercase-query": "SQL查询",
|
||||
"sso-uppercase": "SSO",
|
||||
"stage-file-location": "临时文件位置",
|
||||
"star-open-metadata": "Star OpenMetadata",
|
||||
"star-us-on-github": "在 Github 上给我们点赞",
|
||||
"start-date-time-zone": "开始日期：({{timeZone}})",
|
||||
"start-elasticsearch-docker": "启动 Elasticsearch 容器",
|
||||
@ -1133,6 +1136,7 @@
|
||||
"week": "周",
|
||||
"weekly-usage": "周使用率",
|
||||
"whats-new": "最新消息",
|
||||
"whats-new-version": "What's New ({{version}})",
|
||||
"widget": "Widget",
|
||||
"widget-lowercase": "widget",
|
||||
"workflow-plural": "Workflows",
|
||||
|
||||
@ -84,13 +84,9 @@ p {
|
||||
padding: 4px 16px 16px;
|
||||
}
|
||||
|
||||
.show-more,
|
||||
a[href]:not(.button-comp):not(.no-underline):not(.link-text-info),
|
||||
.link-text {
|
||||
color: @link-color;
|
||||
|
||||
a,
|
||||
a.ant-typography {
|
||||
&:hover {
|
||||
color: @link-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -340,7 +336,9 @@ a[href].link-text-grey,
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.z-5 {
|
||||
|
||||
@ -115,7 +115,6 @@ import IconSettingGray from '../assets/svg/ic-settings-gray.svg';
|
||||
import IconSettingPrimery from '../assets/svg/ic-settings-primery.svg';
|
||||
import IconSettings from '../assets/svg/ic-settings.svg';
|
||||
import IconSQLBuilder from '../assets/svg/ic-sql-builder.svg';
|
||||
import IconStarPrimary from '../assets/svg/ic-star-primary.svg';
|
||||
import IconStar from '../assets/svg/ic-star.svg';
|
||||
import IconContainer from '../assets/svg/ic-storage.svg';
|
||||
import IconStore from '../assets/svg/ic-store.svg';
|
||||
@ -1017,10 +1016,7 @@ const SVGIcons: FunctionComponent<Props> = ({ icon, ...props }: Props) => {
|
||||
IconComponent = IconStar;
|
||||
|
||||
break;
|
||||
case Icons.STAR_PRIMARY:
|
||||
IconComponent = IconStarPrimary;
|
||||
|
||||
break;
|
||||
case Icons.MENTIONS:
|
||||
IconComponent = IconMentions;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user