fix(docs): make all doc links versioned [EE-6861] (#11382)

2024-03-15 16:57:51 +13:00 · 2024-03-15 16:57:51 +13:00 · 73307e164b
parent 9ea5efb6ba
commit 73307e164b
14 changed files with 66 additions and 23 deletions
--- a/app/docker/views/dashboard/dashboard.html
+++ b/app/docker/views/dashboard/dashboard.html
@ -18,7 +18,7 @@
    <p class="text-muted" ng-if="applicationState.endpoint.mode.role === 'MANAGER'">
      <pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
      Portainer is connected to a node that is part of a Swarm cluster. Some resources located on other nodes in the cluster might not be available for management, have a look at
-      <a href="https://docs.portainer.io/admin/environments/add/swarm/agent" target="_blank">our agent setup</a> for more details.
+      <help-link doc-link="'/admin/environments/add/swarm/agent'" target="'_blank'" children="'our agent setup'"></help-link> for more details.
    </p>
    <p class="text-muted" ng-if="applicationState.endpoint.mode.role === 'WORKER'">
      <pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@ -106,7 +106,7 @@
                  deploy-method="{{ ctrl.state.DeployType === ctrl.ManifestDeployTypes.COMPOSE ? 'compose' : 'manifest' }}"
                  base-webhook-url="{{ ctrl.state.baseWebhookUrl }}"
                  webhook-id="{{ ctrl.state.webhookId }}"
-                  webhooks-docs="https://docs.portainer.io/user/kubernetes/applications/webhooks"
+                  webhooks-docs="/user/kubernetes/applications/webhooks"
                ></git-form>
                <!-- !repository -->

--- a/app/portainer/components/forms/kubernetes-redeploy-app-git-form/kubernetes-redeploy-app-git-form.html
+++ b/app/portainer/components/forms/kubernetes-redeploy-app-git-form/kubernetes-redeploy-app-git-form.html
@ -12,7 +12,7 @@
    is-force-pull-visible="false"
    base-webhook-url="{{ $ctrl.state.baseWebhookUrl }}"
    webhook-id="{{ $ctrl.state.webhookId }}"
-    webhooks-docs="https://docs.portainer.io/user/kubernetes/applications/webhooks"
+    webhooks-docs="/user/kubernetes/applications/webhooks"
  ></git-form-auto-update-fieldset>
  <time-window-display></time-window-display>

--- a/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html
+++ b/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.html
@ -16,7 +16,7 @@
    is-force-pull-visible="$ctrl.stack.Type !== 3"
    base-webhook-url="{{ $ctrl.state.baseWebhookUrl }}"
    webhook-id="{{ $ctrl.state.webhookId }}"
-    webhooks-docs="https://docs.portainer.io/user/docker/stacks/webhooks"
+    webhooks-docs="/user/docker/stacks/webhooks"
  ></git-form-auto-update-fieldset>

  <div class="form-group">
--- 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, [
--- 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"
          ></git-form>

          <div ng-show="state.Method === 'template'">
--- 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 &&
--- a/app/react/components/PageHeader/HelpLink/HelpLink.tsx
+++ 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 (
+    <a href={docsUrl} target={target} rel="noreferrer">
+      {children}
+    </a>
+  );
+}
--- a/app/react/components/PageHeader/HelpLink/index.ts
+++ b/app/react/components/PageHeader/HelpLink/index.ts
@ -0,0 +1 @@
+export { HelpLink } from './HelpLink';
--- 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&apos;t compatible. Common
            causes include entrypoint, cmd or
-            <a
-              href="https://docs.portainer.io/user/docker/containers/advanced"
-              target="_blank"
-              rel="noreferrer"
-            >
+            <a href={createContDocUrl} target="_blank" rel="noreferrer">
              other settings
            </a>{' '}
            set by an image.
--- 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 (
    <Formik initialValues={initialValues} onSubmit={() => {}} validateOnMount>
      {() => (
@ -28,7 +33,7 @@ export function KubeConfigTeaserForm() {
              <TextTip color="blue">
                <span className="text-muted">
                  <a
-                    href="https://docs.portainer.io/admin/environments/add/kubernetes/import"
+                    href={kubeConfigImportDocUrl}
                    target="_blank"
                    rel="noreferrer"
                  >
--- 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 (
    <FormSection title="Git repository">
      <AuthFieldset
@ -105,7 +108,7 @@ export function GitForm({
          onChange={(value) => handleChange({ AutoUpdate: value })}
          isForcePullVisible={isForcePullVisible}
          errors={errors.AutoUpdate as FormikErrors<GitFormModel['AutoUpdate']>}
-          webhooksDocs={webhooksDocs}
+          webhooksDocs={webhooksDocsUrl}
        />
      )}

--- 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/$&#123;PORTAINER_EDGE_GROUP&#125;:/myapp/groupconfig
                      </code>
                      . More documentation can be found{' '}
-                      <a href="https://docs.portainer.io/user/edge/stacks/add#gitops-edge-configurations">
-                        here
-                      </a>
-                      .
+                      <a href={gitoptsEdgeConfigDocUrl}>here</a>.
                    </div>
                  </TextTip>
                </div>
--- a/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/TemplatesUrlSection.tsx
+++ b/app/react/portainer/settings/SettingsView/ApplicationSettingsPanel/TemplatesUrlSection.tsx
@ -3,6 +3,7 @@ import { useField, Field } from 'formik';
 import { FormControl } from '@@/form-components/FormControl';
 import { FormSection } from '@@/form-components/FormSection';
 import { Input } from '@@/form-components/Input';
+import { useDocsUrl } from '@@/PageHeader/ContextHelp/ContextHelp';

 // this value is taken from https://github.com/portainer/portainer/blob/develop/api/portainer.go#L1628
 const DEFAULT_URL =
@ -11,6 +12,8 @@ const DEFAULT_URL =
 export function TemplatesUrlSection() {
  const [{ name }, { error }] = useField<string>('templatesUrl');

+  const buildTemplateDocUrl = useDocsUrl('/advanced/app-templates/build');
+
  return (
    <FormSection title="App Templates">
      <div className="form-group">
@ -18,11 +21,7 @@ export function TemplatesUrlSection() {
          <p>
            You can specify the URL to your own template definitions file here.
            See{' '}
-            <a
-              href="https://docs.portainer.io/advanced/app-templates/build"
-              target="_blank"
-              rel="noreferrer"
-            >
+            <a href={buildTemplateDocUrl} target="_blank" rel="noreferrer">
              Portainer documentation
            </a>{' '}
            for more details.