From 4e489d10dbedbaec779e5802b8baa4cbb239a8cf Mon Sep 17 00:00:00 2001 From: Otto Sichert Date: Mon, 11 Apr 2022 15:38:50 +0200 Subject: [PATCH] Move GiveFeedbackAddon out of initial branch merge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Eric Peterson Co-authored-by: Anders Näsman Signed-off-by: Otto Sichert --- packages/app/package.json | 1 - packages/app/src/App.tsx | 5 - .../app/src/components/catalog/EntityPage.tsx | 24 +--- plugins/techdocs/api-report.md | 21 --- .../addons/GiveFeedback/FeedbackLink.test.tsx | 84 ----------- .../src/addons/GiveFeedback/FeedbackLink.tsx | 83 ----------- .../src/addons/GiveFeedback/GiveFeedback.tsx | 132 ------------------ .../src/addons/GiveFeedback/constants.ts | 22 --- .../techdocs/src/addons/GiveFeedback/hooks.ts | 96 ------------- .../techdocs/src/addons/GiveFeedback/index.ts | 22 --- .../techdocs/src/addons/GiveFeedback/types.ts | 38 ----- plugins/techdocs/src/addons/index.ts | 21 --- plugins/techdocs/src/index.ts | 2 - plugins/techdocs/src/plugin.ts | 19 --- yarn.lock | 5 + 15 files changed, 9 insertions(+), 566 deletions(-) delete mode 100644 plugins/techdocs/src/addons/GiveFeedback/FeedbackLink.test.tsx delete mode 100644 plugins/techdocs/src/addons/GiveFeedback/FeedbackLink.tsx delete mode 100644 plugins/techdocs/src/addons/GiveFeedback/GiveFeedback.tsx delete mode 100644 plugins/techdocs/src/addons/GiveFeedback/constants.ts delete mode 100644 plugins/techdocs/src/addons/GiveFeedback/hooks.ts delete mode 100644 plugins/techdocs/src/addons/GiveFeedback/index.ts delete mode 100644 plugins/techdocs/src/addons/GiveFeedback/types.ts delete mode 100644 plugins/techdocs/src/addons/index.ts diff --git a/packages/app/package.json b/packages/app/package.json index 0d94417ddc..4522cabaf1 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -52,7 +52,6 @@ "@backstage/plugin-shortcuts": "^0.2.5-next.0", "@backstage/plugin-tech-radar": "^0.5.11-next.1", "@backstage/plugin-techdocs": "^1.0.1-next.1", - "@backstage/techdocs-addons": "^0.0.0", "@backstage/plugin-todo": "^0.2.6-next.0", "@backstage/plugin-user-settings": "^0.4.3-next.0", "@backstage/plugin-tech-insights": "^0.1.14-next.0", diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 6a2fb7e0f6..ac0b9daa52 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -68,14 +68,12 @@ import { TechDocsIndexPage, TechDocsReaderPage, techdocsPlugin, - GiveFeedbackAddon, } from '@backstage/plugin-techdocs'; import { UserSettingsPage, UserSettingsTab, } from '@backstage/plugin-user-settings'; import { AdvancedSettings } from './components/advancedSettings'; -import { TechDocsAddons } from '@backstage/techdocs-addons'; import AlarmIcon from '@material-ui/icons/Alarm'; import React from 'react'; import { hot } from 'react-hot-loader/root'; @@ -181,9 +179,6 @@ const routes = ( element={} > {techDocsPage} - - - - - - - - + - - - - - + - - - - - + diff --git a/plugins/techdocs/api-report.md b/plugins/techdocs/api-report.md index 2e9da8a931..59ae64c0ba 100644 --- a/plugins/techdocs/api-report.md +++ b/plugins/techdocs/api-report.md @@ -9,7 +9,6 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { AsyncState } from 'react-use/lib/useAsync'; import { BackstagePlugin } from '@backstage/core-plugin-api'; import { CommonProps } from '@material-ui/core/OverridableComponent'; -import { ComponentType } from 'react'; import { CompoundEntityRef } from '@backstage/catalog-model'; import { Config } from '@backstage/config'; import { CSSProperties } from '@material-ui/styles'; @@ -158,26 +157,6 @@ export const EntityTechdocsContent: (props: { children?: ReactNode; }) => JSX.Element; -// @public -export const GiveFeedbackAddon: ComponentType; - -// @public (undocumented) -export type GiveFeedbackProps = { - debounceTime?: number; - templateBuilder?: GiveFeedbackTemplateBuilder; -}; - -// @public (undocumented) -export type GiveFeedbackTemplate = { - title: string; - body: string; -}; - -// @public (undocumented) -export type GiveFeedbackTemplateBuilder = ( - selection: Selection, -) => GiveFeedbackTemplate; - // @public export const isTechDocsAvailable: (entity: Entity) => boolean; diff --git a/plugins/techdocs/src/addons/GiveFeedback/FeedbackLink.test.tsx b/plugins/techdocs/src/addons/GiveFeedback/FeedbackLink.test.tsx deleted file mode 100644 index a3af0a09f0..0000000000 --- a/plugins/techdocs/src/addons/GiveFeedback/FeedbackLink.test.tsx +++ /dev/null @@ -1,84 +0,0 @@ -/* - * Copyright 2022 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 from 'react'; -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; - -import { analyticsApiRef } from '@backstage/core-plugin-api'; -import { - MockAnalyticsApi, - TestApiProvider, - wrapInTestApp, -} from '@backstage/test-utils'; - -import { FeedbackLink } from './FeedbackLink'; - -const defaultProps = { - repository: { - type: 'github', - name: 'backstage', - owner: 'backstage', - protocol: 'https', - resource: 'github.com', - }, - template: { - title: 'Documentation feedback', - body: '## Documentation Feedback 📝', - }, -}; - -describe('FeedbackLink', () => { - const apiSpy = new MockAnalyticsApi(); - - it('Should open new issue tab', () => { - render( - wrapInTestApp( - - - , - ), - ); - - const link = screen.getByText(/Open new Github issue/); - expect(link).toBeInTheDocument(); - expect(link).toHaveAttribute('target', '_blank'); - const encodedTitle = encodeURIComponent(defaultProps.template.title); - const encodedBody = encodeURIComponent(defaultProps.template.body); - expect(link).toHaveAttribute( - 'href', - `https://github.com/backstage/backstage/issues/new?title=${encodedTitle}&body=${encodedBody}`, - ); - }); - - it('Should track click events', async () => { - render( - wrapInTestApp( - - - , - ), - ); - - fireEvent.click(screen.getByText(/Open new Github issue/)); - - await waitFor(() => { - expect(apiSpy.getEvents()[0]).toMatchObject({ - action: 'click', - subject: 'Open new Github issue', - }); - }); - }); -}); diff --git a/plugins/techdocs/src/addons/GiveFeedback/FeedbackLink.tsx b/plugins/techdocs/src/addons/GiveFeedback/FeedbackLink.tsx deleted file mode 100644 index 51cff1324c..0000000000 --- a/plugins/techdocs/src/addons/GiveFeedback/FeedbackLink.tsx +++ /dev/null @@ -1,83 +0,0 @@ -/* - * Copyright 2022 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 from 'react'; - -import { makeStyles } from '@material-ui/core'; -import BugReportIcon from '@material-ui/icons/BugReport'; - -import { Link, GitHubIcon } from '@backstage/core-components'; - -import { GiveFeedbackTemplate, Repository } from './types'; - -const useStyles = makeStyles(theme => ({ - root: { - display: 'grid', - gridGap: theme.spacing(1), - gridAutoFlow: 'column', - justifyContent: 'center', - alignItems: 'center', - color: theme.palette.common.black, - fontSize: theme.typography.button.fontSize, - }, -})); - -type FeedbackLinkProps = { - template: GiveFeedbackTemplate; - repository: Repository; -}; - -const getIcon = ({ type }: Repository) => { - if (type === 'github') { - return GitHubIcon; - } - return BugReportIcon; -}; - -const getName = ({ type }: Repository) => { - if (type === 'github') { - return 'Github'; - } - return 'Gitlab'; -}; - -const getUrl = (repository: Repository, template: GiveFeedbackTemplate) => { - const { title, body } = template; - const encodedTitle = encodeURIComponent(title); - const encodedBody = encodeURIComponent(body); - const { protocol, resource, owner, name, type } = repository; - const encodedOwner = encodeURIComponent(owner); - const encodedName = encodeURIComponent(name); - - const url = `${protocol}://${resource}/${encodedOwner}/${encodedName}`; - if (type === 'github') { - return `${url}/issues/new?title=${encodedTitle}&body=${encodedBody}`; - } - return `${url}/issues/new?[title]=${encodedTitle}&[body]=${encodedBody}`; -}; - -export const FeedbackLink = ({ template, repository }: FeedbackLinkProps) => { - const classes = useStyles(); - - const Icon = getIcon(repository); - const url = getUrl(repository, template); - - return ( - - Open new {getName(repository)} issue - - ); -}; diff --git a/plugins/techdocs/src/addons/GiveFeedback/GiveFeedback.tsx b/plugins/techdocs/src/addons/GiveFeedback/GiveFeedback.tsx deleted file mode 100644 index e6da14a424..0000000000 --- a/plugins/techdocs/src/addons/GiveFeedback/GiveFeedback.tsx +++ /dev/null @@ -1,132 +0,0 @@ -/* - * Copyright 2022 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, { useState, useEffect } from 'react'; - -import { makeStyles, Portal, Paper } from '@material-ui/core'; - -import { useGitTemplate, useGitRepository } from './hooks'; -import { GiveFeedbackTemplateBuilder } from './types'; -import { - PAGE_MAIN_CONTENT_SELECTOR, - PAGE_FEEDBACK_LINK_SELECTOR, - ADDON_FEEDBACK_CONTAINER_ID, - ADDON_FEEDBACK_CONTAINER_SELECTOR, -} from './constants'; -import { FeedbackLink } from './FeedbackLink'; - -import { - useShadowRootElements, - useShadowRootSelection, -} from '../../reader/components/TechDocsReaderPage'; - -const useStyles = makeStyles(theme => ({ - root: { - transform: 'translate(-100%, -100%)', - position: 'absolute', - padding: theme.spacing(1), - zIndex: theme.zIndex.tooltip, - background: theme.palette.common.white, - }, -})); - -type Style = { - top: string; - left: string; -}; - -/** - * @public - */ -export type GiveFeedbackProps = { - debounceTime?: number; - templateBuilder?: GiveFeedbackTemplateBuilder; -}; - -/** - * Show give feedback button when text is highlighted - */ -export const GiveFeedback = ({ - debounceTime = 500, - templateBuilder: buildTemplate, -}: GiveFeedbackProps) => { - const classes = useStyles(); - const [style, setStyle] = useState