Signed-off-by Lmejbar : Added SearchBar and ScrollBar on Techradar

Signed-off-by: lmejbar <42239917+lmejbar@users.noreply.github.com>

packages/core-components/src/components/InputTextFilter/InputTextFilter.tsx

@@ -1,60 +0,0 @@
-/*
- * 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 from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-
-const useStyles = makeStyles(() => ({
-  root: {
-    '& > *': {
-      width: '50ch',
-      'margin-right': '40ch',
-      'margin-bottom': '1ch',
-    },
-  },
-}));
-
-export const InputTextFilter = ({
-  searchCategory,
-}: {
-  searchCategory: any;
-}) => {
-  const classes = useStyles();
-
-  const [, setSearchCategory] = React.useState('');
-
-  const setSearchCategoryValue = (event: any) => {
-    setSearchCategory(event.target.value);
-  };
-
-  return (
-    <>
-      <div>
-        <form className={classes.root} noValidate autoComplete="off">
-          <TextField
-            id="standard-basic"
-            label="Search"
-            onChange={e => {
-              searchCategory(e);
-              setSearchCategoryValue(e);
-            }}
-          />
-        </form>
-      </div>
-    </>
-  );
-};

packages/core-components/src/components/InputTextFilter/index.ts

@@ -1,17 +0,0 @@
-/*
- * 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.
- */
-
-export { InputTextFilter } from './InputTextFilter';

packages/core-components/src/components/index.ts

@@ -28,7 +28,6 @@ export * from './ResponseErrorPanel';
 export * from './FeatureDiscovery';
 export * from './HeaderIconLinkRow';
 export * from './HorizontalScrollGrid';
-export * from './InputTextFilter';
 export * from './Lifecycle';
 export * from './Link';
 export * from './MarkdownContent';

packages/core-components/src/layout/Content/Content.tsx

@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   root: {
     gridArea: 'pageContent',
     minWidth: 0,
-    paddingTop: theme.spacing(1),
+    paddingTop: theme.spacing(3),
     paddingBottom: theme.spacing(3),
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),

packages/core-components/src/layout/ContentHeader/ContentHeader.tsx

@@ -53,7 +53,6 @@ const useStyles = (props: ContentHeaderProps) =>
     title: {
       display: 'inline-flex',
       marginBottom: 0,
-      color: '#0082C3',
     },
   }));
 

plugins/tech-radar/api-report.md

@@ -107,6 +107,8 @@ export interface TechRadarComponentProps {
   // (undocumented)
   id?: string;
   // (undocumented)
+  searchText?: string;
+  // (undocumented)
   svgProps?: object;
   // (undocumented)
   width: number;

plugins/tech-radar/src/components/RadarComponent.tsx

@@ -52,7 +52,7 @@ const RadarComponent = (props: TechRadarComponentProps): JSX.Element => {
     loaderResponse: TechRadarLoaderResponse | undefined,
   ): Array<Entry> => {
     let filteredArray = loaderResponse!.entries;
-    if (!(props.searchText === '')) {
+    if (props.searchText) {
       // Compare the name or the description with the search input text
       filteredArray = loaderResponse!.entries.filter(
         element =>

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -33,13 +33,21 @@ export type Props = {
 
 const useStyles = makeStyles<Theme>(theme => ({
   foreignObject: {
-    overflowY: 'visible',
+    overflow: 'scroll',
+    scrollbarWidth: 0 as any, // hide in FF
+    '&::-webkit-scrollbar': {
+      display: 'none', // hide in Chrome
+    },
   },
   quadrant: {
     height: '100%',
     width: '100%',
-    overflowY: 'visible',
-    pointerEvents: 'none',
+    overflow: 'scroll',
+    scrollbarWidth: 0 as any, // hide in FF
+    '&::-webkit-scrollbar': {
+      display: 'none', // hide in Chrome
+    },
+    // pointerEvents: 'none',
   },
   quadrantHeading: {
     pointerEvents: 'none',
@@ -70,9 +78,6 @@ const useStyles = makeStyles<Theme>(theme => ({
     listStylePosition: 'inside',
     marginTop: 0,
     paddingLeft: 0,
-    height: '100%',
-    width: '100%',
-    overflow: 'scroll',
     fontVariantNumeric: 'proportional-nums',
     '-moz-font-feature-settings': 'pnum',
     '-webkit-font-feature-settings': 'pnum',

plugins/tech-radar/src/components/RadarPage.tsx

@@ -15,16 +15,15 @@
  */
 
 import React from 'react';
-import { Grid, makeStyles } from '@material-ui/core';
+import { Grid, makeStyles, TextField } from '@material-ui/core';
 import RadarComponent from '../components/RadarComponent';
 import { TechRadarComponentProps } from '../api';
 import {
   Content,
   ContentHeader,
   Page,
-  // Header,
+  Header,
   SupportButton,
-  InputTextFilter,
 } from '@backstage/core-components';
 
 const useStyles = makeStyles(() => ({
@@ -48,16 +47,25 @@ export const RadarPage = ({
   const classes = useStyles();
   const [searchText, setSearchText] = React.useState('');
 
-  const searchInput = (event: any) => {
+  const searchInput = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     setSearchText(event.target.value);
   };
 
   return (
     <Page themeId="tool">
-      {/* <Header title={title} subtitle={subtitle} /> */}
+      <Header title={title} subtitle={subtitle} />
       <Content className={classes.overflowXScroll}>
         <ContentHeader title={pageTitle}>
-          <InputTextFilter searchCategory={searchInput} />
+          <TextField
+            id="standard-search"
+            label="Search field"
+            type="search"
+            onChange={e => {
+              searchInput(e);
+            }}
+          />
           <SupportButton>
             This is used for visualizing the official guidelines of different
             areas of software development such as languages, frameworks,