diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index a35edbfb5..e9b2ba556 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -36,6 +36,7 @@ import { Slider } from '@@/form-components/Slider';
import { TagButton } from '@@/TagButton';
import { BETeaserButton } from '@@/BETeaserButton';
import { CodeEditor } from '@@/CodeEditor';
+import { HelpLink } from '@@/PageHeader/HelpLink';
import { fileUploadField } from './file-upload-field';
import { switchField } from './switch-field';
@@ -126,6 +127,14 @@ export const ngModule = angular
'reactQueryDevTools',
r2a(withReactQuery(ReactQueryDevtoolsWrapper), [])
)
+ .component(
+ 'helpLink',
+ r2a(withUIRouter(withReactQuery(HelpLink)), [
+ 'docLink',
+ 'target',
+ 'children',
+ ])
+ )
.component(
'dashboardItem',
r2a(DashboardItem, [
diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html
index d925bf5b9..ffd860c44 100644
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/app/portainer/views/stacks/create/createstack.html
@@ -87,7 +87,7 @@
is-force-pull-visible="true"
base-webhook-url="{{ state.baseWebhookUrl }}"
webhook-id="{{ state.webhookId }}"
- webhooks-docs="https://docs.portainer.io/user/docker/stacks/webhooks"
+ webhooks-docs="/user/docker/stacks/webhooks"
>
diff --git a/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx b/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
index f763536e9..26b44fcde 100644
--- a/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
+++ b/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
@@ -32,11 +32,11 @@ export function ContextHelp() {
);
}
-function useDocsUrl(): string {
+export function useDocsUrl(doc?: string): string {
const { state } = useCurrentStateAndParams();
const versionQuery = useSystemVersion();
- if (!state) {
+ if (!doc && !state) {
return '';
}
@@ -54,6 +54,10 @@ function useDocsUrl(): string {
}
}
+ if (doc) {
+ return url + doc;
+ }
+
const { data } = state;
if (
data &&
diff --git a/app/react/components/PageHeader/HelpLink/HelpLink.tsx b/app/react/components/PageHeader/HelpLink/HelpLink.tsx
new file mode 100644
index 000000000..1c116c56a
--- /dev/null
+++ b/app/react/components/PageHeader/HelpLink/HelpLink.tsx
@@ -0,0 +1,21 @@
+import { useDocsUrl } from '../ContextHelp/ContextHelp';
+
+type HelpLinkProps = {
+ docLink?: string;
+ target?: string;
+ children?: React.ReactNode;
+};
+
+export function HelpLink({
+ docLink,
+ target = '_blank',
+ children,
+}: HelpLinkProps) {
+ const docsUrl = useDocsUrl(docLink);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/app/react/components/PageHeader/HelpLink/index.ts b/app/react/components/PageHeader/HelpLink/index.ts
new file mode 100644
index 000000000..c3473f158
--- /dev/null
+++ b/app/react/components/PageHeader/HelpLink/index.ts
@@ -0,0 +1 @@
+export { HelpLink } from './HelpLink';
diff --git a/app/react/docker/containers/CreateView/CreateView.tsx b/app/react/docker/containers/CreateView/CreateView.tsx
index eca277ce0..6ba44dc63 100644
--- a/app/react/docker/containers/CreateView/CreateView.tsx
+++ b/app/react/docker/containers/CreateView/CreateView.tsx
@@ -17,6 +17,7 @@ import { confirmDestructive } from '@@/modals/confirm';
import { buildConfirmButton } from '@@/modals/utils';
import { InformationPanel } from '@@/InformationPanel';
import { TextTip } from '@@/Tip/TextTip';
+import { useDocsUrl } from '@@/PageHeader/ContextHelp/ContextHelp';
import { useContainers } from '../queries/containers';
import { useSystemLimits } from '../../proxy/queries/useInfo';
@@ -77,6 +78,8 @@ function CreateForm() {
isDockerhubRateLimited,
});
+ const createContDocUrl = useDocsUrl('/docker/containers/create');
+
if (!envQuery.data || !initialValuesQuery) {
return null;
}
@@ -101,11 +104,7 @@ function CreateForm() {
The new container may fail to start if the image is changed, and
settings from the previous container aren't compatible. Common
causes include entrypoint, cmd or
-
+
other settings
{' '}
set by an image.
diff --git a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
index 0a9b5bd02..f79f1ce97 100644
--- a/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
+++ b/app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/KubeConfigTeaserForm.tsx
@@ -7,6 +7,7 @@ import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
import { Input } from '@@/form-components/Input';
import { Button } from '@@/buttons';
import { TextTip } from '@@/Tip/TextTip';
+import { useDocsUrl } from '@@/PageHeader/ContextHelp/ContextHelp';
const initialValues = {
kubeConfig: '',
@@ -18,6 +19,10 @@ const initialValues = {
};
export function KubeConfigTeaserForm() {
+ const kubeConfigImportDocUrl = useDocsUrl(
+ 'admin/environments/add/kubernetes/import'
+ );
+
return (
{}} validateOnMount>
{() => (
@@ -28,7 +33,7 @@ export function KubeConfigTeaserForm() {
diff --git a/app/react/portainer/gitops/GitForm.tsx b/app/react/portainer/gitops/GitForm.tsx
index 7fe6c2f8f..3c8e42f06 100644
--- a/app/react/portainer/gitops/GitForm.tsx
+++ b/app/react/portainer/gitops/GitForm.tsx
@@ -11,6 +11,7 @@ import { TimeWindowDisplay } from '@/react/portainer/gitops/TimeWindowDisplay';
import { FormSection } from '@@/form-components/FormSection';
import { validateForm } from '@@/form-components/validate-form';
import { SwitchField } from '@@/form-components/SwitchField';
+import { useDocsUrl } from '@@/PageHeader/ContextHelp/ContextHelp';
import { GitCredential } from '../account/git-credentials/types';
@@ -50,6 +51,8 @@ export function GitForm({
webhooksDocs,
}: Props) {
const [value, setValue] = useState(initialValue); // TODO: remove this state when form is not inside angularjs
+ const webhooksDocsUrl = useDocsUrl(webhooksDocs);
+
return (
handleChange({ AutoUpdate: value })}
isForcePullVisible={isForcePullVisible}
errors={errors.AutoUpdate as FormikErrors}
- webhooksDocs={webhooksDocs}
+ webhooksDocs={webhooksDocsUrl}
/>
)}
diff --git a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
index 1e1b3b566..516b6d4bc 100644
--- a/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
+++ b/app/react/portainer/gitops/RelativePathFieldset/RelativePathFieldset.tsx
@@ -10,6 +10,7 @@ import { SwitchField } from '@@/form-components/SwitchField';
import { TextTip } from '@@/Tip/TextTip';
import { FormControl } from '@@/form-components/FormControl';
import { Input, Select } from '@@/form-components/Input';
+import { useDocsUrl } from '@@/PageHeader/ContextHelp/ContextHelp';
import { RelativePathModel, getPerDevConfigsFilterType } from './types';
@@ -37,6 +38,10 @@ export function RelativePathFieldset({
const { enableFsPath0, enableFsPath1, toggleFsPath } = useEnableFsPath(value);
+ const gitoptsEdgeConfigDocUrl = useDocsUrl(
+ '/user/edge/stacks/add#gitops-edge-configurations'
+ );
+
const pathTip0 =
'For relative path volumes use with Docker Swarm, you must have a network filesystem which all of your nodes can access.';
const pathTip1 =
@@ -279,10 +284,7 @@ export function RelativePathFieldset({
./config/${PORTAINER_EDGE_GROUP}:/myapp/groupconfig
. More documentation can be found{' '}
-
- here
-
- .
+ here.