github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(UI): update icons for beta and experimental features EE-5435 (#8952)

pull/8967/head
Prabhat Khera 2023-05-18 10:19:37 +12:00 committed by GitHub
parent 75ed19b20e
commit a35e18a904
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 54 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/ico/beta.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="auto" height="auto" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 14.3223V3.49792C1 2.11836 2.11832 1 3.49792 1C4.87753 1 5.99585 2.11836 5.99585 3.49792C5.99585 4.87749 4.87753 5.99585 3.49792 5.99585L3.91425 5.99609C5.52374 5.99609 6.82849 7.30084 6.82849 8.91034C6.82849 10.5198 5.52374 11.8246 3.91425 11.8246C2.30475 11.8246 1 10.5198 1 8.91034" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 493 B

15
app/kubernetes/components/helm/helm-templates/helm-templates.html
View File

@ -1,16 +1,11 @@
<page-header title="'Helm'" breadcrumbs="['Charts']" reload="true"></page-header>
<information-panel title-text="Information" ng-if="!$ctrl.state.chart">
<beta-alert
is-html="true"
message="'Beta feature - initial version of Helm charts functionality, for more information see this <a href=\'https://www.portainer.io/blog/portainer-now-with-helm-support\' target=\'_blank\' class=\'hyperlink\'>blog post</a>.'"
></beta-alert>
<span class="small text-muted">
<p class="inline-flex flex-row items-center">
<pr-icon icon="'info'" class="vertical-center mr-1" mode="'primary'"></pr-icon>
This is a first version for Helm charts, for more information see this&nbsp;<a
class="hyperlink"
href="https://www.portainer.io/blog/portainer-now-with-helm-support"
target="_blank"
>blog post</a
>.</p
>
<p ng-if="$ctrl.state.globalRepository === ''" class="inline-flex items-center">
<pr-icon icon="'info'"></pr-icon>
<span>The Global Helm Repository is not configured.</span>
@ -23,7 +18,7 @@
<!-- helmchart-form -->
<div class="col-sm-12" ng-if="$ctrl.state.chart">
<rd-widget>
<div class="toolBarTitle vertical-center text-muted px-5 pt-5">
<div class="toolBarTitle vertical-center px-5 pt-5 text-[16px] font-medium">
<fallback-image src="$ctrl.state.chart.icon" fallback-icon="'svg-helm'" class-name="'h-8 w-8'" size="'lg'"></fallback-image>
{{ $ctrl.state.chart.name }}
</div>

9
app/kubernetes/views/applications/helm/helm.html
View File

@ -20,10 +20,11 @@
Release
</div>
</div>
<div class="toolBarTitle text-muted small vertical-center !gap-0 px-5">
<pr-icon icon="'info'" mode="'primary'" class-name="'!mr-1'" class="vertical-center"></pr-icon>
This is a first version for Helm charts, for more information see this&nbsp;
<a href="https://www.portainer.io/blog/portainer-now-with-helm-support" target="_blank" class="hyperlink">blog post</a>.
<div class="toolBarTitle vertical-center !gap-0 px-5">
<beta-alert
is-html="true"
message="'Beta feature - initial version of Helm charts functionality, for more information see this <a href=\'https://www.portainer.io/blog/portainer-now-with-helm-support\' target=\'_blank\' class=\'hyperlink\'>blog post</a>.'"
></beta-alert>
</div>
<rd-widget-body>
<table class="table">

8
app/portainer/components/beta-panel/betaPanel.html
View File

@ -1,8 +0,0 @@
<information-panel title-text="Information">
<span class="small">
<p class="text-muted">
<pr-icon icon="'flask-conical'" mode="'warning'"></pr-icon>
This is a beta feature.
</p>
</span>
</information-panel>

3
app/portainer/components/beta-panel/betaPanel.js
View File

@ -1,3 +0,0 @@
angular.module('portainer.app').component('betaPanel', {
templateUrl: './betaPanel.html',
});

5
app/portainer/components/theme/theme-settings.html
View File

@ -4,11 +4,6 @@
<rd-widget-body>
<form class="form-horizontal">
<box-selector radio-name="'theme'" value="$ctrl.state.themeColor" options="$ctrl.state.availableThemes" on-change="($ctrl.setThemeColor)"></box-selector>
<p class="vertical-center mt-2">
<pr-icon icon="'alert-circle'" class-name="'icon-primary'"></pr-icon>
<span class="small">Dark and High-contrast theme are experimental. Some UI components might not display properly.</span>
</p>
</form>
</rd-widget-body>
</rd-widget>

2
app/react/components/Svg.tsx
View File

@ -36,6 +36,7 @@ import nomadicon from '@/assets/ico/vendor/nomad-icon.svg?c';
import openldap from '@/assets/ico/vendor/openldap.svg?c';
import proget from '@/assets/ico/vendor/proget.svg?c';
import quay from '@/assets/ico/vendor/quay.svg?c';
import beta from '@/assets/ico/beta.svg?c';
const placeholder = Placeholder;
@ -76,6 +77,7 @@ export const SvgIcons = {
proget,
quay,
kube,
beta,
};
interface SvgProps {

9
app/react/components/Tip/TextTip/TextTip.tsx
View File

@ -10,6 +10,7 @@ export interface Props {
icon?: React.ReactNode;
color?: Color;
className?: string;
childrenWrapperClassName?: string;
}
export function TextTip({
@ -17,11 +18,13 @@ export function TextTip({
icon = AlertCircle,
className,
children,
childrenWrapperClassName = 'text-muted',
}: PropsWithChildren<Props>) {
return (
<div className={clsx('small inline-flex items-center gap-1', className)}>
<Icon icon={icon} mode={getMode(color)} className="shrink-0" />
<span className="text-muted">{children}</span>
<div className={clsx('small inline-flex gap-1', className)}>
<Icon icon={icon} mode={getMode(color)} className="!mt-[2px]" />
<span className={childrenWrapperClassName}>{children}</span>
</div>
);
}

5
app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx
View File

@ -55,7 +55,10 @@ function CreateView() {
breadcrumbs="Edge agent update and rollback"
/>
<BetaAlert />
<BetaAlert
className="ml-[15px] mb-2"
message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
/>
<div className="row">
<div className="col-sm-12">

5
app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx
View File

@ -77,7 +77,10 @@ function ItemView() {
]}
/>
<BetaAlert />
<BetaAlert
className="ml-[15px] mb-2"
message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
/>
<div className="row">
<div className="col-sm-12">

5
app/react/portainer/environments/update-schedules/ListView/ListView.tsx
View File

@ -42,7 +42,10 @@ export function ListView() {
breadcrumbs="Update and rollback"
/>
<BetaAlert />
<BetaAlert
className="ml-[15px] mb-2"
message="Beta feature - currently limited to standalone Linux and Nomad edge devices."
/>
<Datatable
dataset={listQuery.data}

27
app/react/portainer/environments/update-schedules/common/BetaAlert.tsx
View File

@ -1,13 +1,24 @@
import { InformationPanel } from '@@/InformationPanel';
import { TextTip } from '@@/Tip/TextTip';
export function BetaAlert() {
interface Props {
message: string;
className?: string;
isHtml?: boolean;
}
export function BetaAlert({ message, className, isHtml }: Props) {
return (
<InformationPanel title="Limited Feature">
<TextTip>
This feature is currently in beta and is limited to standalone linux
edge devices.
</TextTip>
</InformationPanel>
<TextTip
icon="svg-beta"
className={className}
childrenWrapperClassName="text-warning"
>
{!isHtml ? (
message
) : (
// eslint-disable-next-line react/no-danger
<span dangerouslySetInnerHTML={{ __html: message }} />
)}
</TextTip>
);
}

4
app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { Formik, Field, Form } from 'formik';
import { Laptop } from 'lucide-react';
import { FlaskConical, Laptop } from 'lucide-react';
import { FDOConfiguration } from '@/portainer/hostmanagement/fdo/model';
import {
@ -38,7 +38,7 @@ export function SettingsFDO({ settings, onSubmit }: Props) {
return (
<Widget>
<Widget.Body>
<TextTip color="blue">
<TextTip color="blue" icon={FlaskConical}>
Since FDO is still an experimental feature that requires additional
infrastructure, it has been temporarily hidden in the UI.
</TextTip>