From 5098f4a7c99b0ccecbca889bd0413be5eaec2469 Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Wed, 29 Sep 2021 20:06:36 +0200
Subject: [PATCH] use legacy techdocs page as fallback

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 .../reader/components/LegacyTechDocsPage.tsx  | 77 +++++++++++++++++++
 .../src/reader/components/TechDocsPage.tsx    |  3 +-
 2 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 plugins/techdocs/src/reader/components/LegacyTechDocsPage.tsx

diff --git a/plugins/techdocs/src/reader/components/LegacyTechDocsPage.tsx b/plugins/techdocs/src/reader/components/LegacyTechDocsPage.tsx
new file mode 100644
index 0000000000..48444ec4bf
--- /dev/null
+++ b/plugins/techdocs/src/reader/components/LegacyTechDocsPage.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * 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.
+ */
+
+import React, { useCallback, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useAsync } from 'react-use';
+import { techdocsApiRef } from '../../api';
+import { TechDocsNotFound } from './TechDocsNotFound';
+import { useApi } from '@backstage/core-plugin-api';
+import { Page, Content } from '@backstage/core-components';
+import { Reader } from './Reader';
+import { TechDocsPageHeader } from './TechDocsPageHeader';
+
+export const LegacyTechDocsPage = () => {
+  const [documentReady, setDocumentReady] = useState<boolean>(false);
+  const { namespace, kind, name } = useParams();
+
+  const techdocsApi = useApi(techdocsApiRef);
+
+  const { value: techdocsMetadataValue } = useAsync(() => {
+    if (documentReady) {
+      return techdocsApi.getTechDocsMetadata({ kind, namespace, name });
+    }
+
+    return Promise.resolve(undefined);
+  }, [kind, namespace, name, techdocsApi, documentReady]);
+
+  const { value: entityMetadataValue, error: entityMetadataError } =
+    useAsync(() => {
+      return techdocsApi.getEntityMetadata({ kind, namespace, name });
+    }, [kind, namespace, name, techdocsApi]);
+
+  const onReady = useCallback(() => {
+    setDocumentReady(true);
+  }, [setDocumentReady]);
+
+  if (entityMetadataError) {
+    return <TechDocsNotFound errorMessage={entityMetadataError.message} />;
+  }
+
+  return (
+    <Page themeId="documentation">
+      <TechDocsPageHeader
+        techDocsMetadata={techdocsMetadataValue}
+        entityMetadata={entityMetadataValue}
+        entityId={{
+          kind,
+          namespace,
+          name,
+        }}
+      />
+      <Content data-testid="techdocs-content">
+        <Reader
+          onReady={onReady}
+          entityId={{
+            kind,
+            namespace,
+            name,
+          }}
+        />
+      </Content>
+    </Page>
+  );
+};
diff --git a/plugins/techdocs/src/reader/components/TechDocsPage.tsx b/plugins/techdocs/src/reader/components/TechDocsPage.tsx
index 7872f60b0a..7755900b96 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPage.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPage.tsx
@@ -20,6 +20,7 @@ import { useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import { techdocsApiRef } from '../../api';
 import { TechDocsNotFound } from './TechDocsNotFound';
+import { LegacyTechDocsPage } from './LegacyTechDocsPage';
 import { TechDocsEntityMetadata, TechDocsMetadata } from '../../types';
 import { EntityName } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
@@ -69,7 +70,7 @@ export const TechDocsPage = ({ children }: Props) => {
     return <TechDocsNotFound errorMessage={entityMetadataError.message} />;
   }
 
-  if (!children) return outlet;
+  if (!children) return outlet || <LegacyTechDocsPage />;
 
   return (
     <Page themeId="documentation">