Add filter and sort functionality to the table (openshift#98)

* work on sorting and filtering

* add sorting and filtering functionality to the table and disable tr when bootstrapurl unavailable

* fix duplicate keys

frontend/packages/rhoas-plugin/locales/en/rhoas-plugin.json

@@ -35,8 +35,5 @@
  "Reduce operational complexity and focus on building and scaling applications that add more value.": "Reduce operational complexity and focus on building and scaling applications that add more value.",
  "Browse managed services to connect applications and microservices to other services and support services to create a full solution.": "Browse managed services to connect applications and microservices to other services and support services to create a full solution.",
  "RHOAS can include Managed Kafka, Service Registry, custom resources for Managed Kafka, and Open Data Hub.": "RHOAS can include Managed Kafka, Service Registry, custom resources for Managed Kafka, and Open Data Hub.",
- "Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:": "Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:",
- "Kafka Connect: We will add a description for Kafka Connect here": "<b>Kafka Connect:</b> We will add a description for Kafka Connect here.",
- "API Management: We will add a description for API Management here.": "<b>API Management:</b> We will add a description for API Management here.",
- "Red Hat Open Data Hub: We will add a description for Red Hat Open Data Hub here.": "<b>Red Hat Open Data Hub:</b> We will add a description for Red Hat Open Data Hub here.",
+ "Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:": "Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:"
 }

frontend/packages/rhoas-plugin/src/catalog/providers/useRhoasCatalog.tsx

@@ -45,16 +45,7 @@ const useRhoasCatalog: CatalogExtensionHook<CatalogItem[]> = (): [CatalogItem[],
  <FlexItem>
  <TextContent>
  <Text component={TextVariants.p}>
- {t('rhoas-plugin~Installed cluster-side, creates resources in specific namespaces. The RHOAS operator could include these services below:')}
- </Text>
- <Text component={TextVariants.p}>
- {t('rhoas-plugin~Kafka Connect: We will add a description for Kafka Connect here')}
- </Text>
- <Text component={TextVariants.p}>
- {t('API Management: We will add a description for API Management here.')}
- </Text>
- <Text component={TextVariants.p}>
- {t('Red Hat Open Data Hub: We will add a description for Red Hat Open Data Hub here.')}
+ TO DO: Add description
  </Text>
  </TextContent>
  </FlexItem>
@@ -125,7 +116,7 @@ const useRhoasCatalog: CatalogExtensionHook<CatalogItem[]> = (): [CatalogItem[],
  properties: [{ label: 'Type', value: 'Red Hat Managed Service' }],
  descriptions: [
  {
- value: <p>Here is where we provide the description for Red Hat OpenShift Streams for Apache Kafka</p>,
+ value: <p>TO DO: Add description</p>,
  }
  ]
  },

frontend/packages/rhoas-plugin/src/components/access-managed-services/AccessManagedServices.tsx

@@ -8,7 +8,9 @@ import { AccessTokenSecretName } from '../../const';
 import { createServiceAccountIfNeeded } from '../managed-services-kafka/resourceCreators';
 
 export const AccessManagedServices: any = () => {
- const [apiTokenValue, setApiTokenValue] = React.useState("");
+
+ const [apiTokenValue, setApiTokenValue] = React.useState<string>("");
+
  const [currentNamespace] = useActiveNamespace();
  const namespace = currentNamespace;
  const { t } = useTranslation();

frontend/packages/rhoas-plugin/src/components/empty-state/ManagedKafkaEmptyState.tsx

@@ -2,14 +2,20 @@ import * as React from 'react';
 import { 
  Button, 
  EmptyState,
- EmptyStateBody,
  EmptyStateIcon,
  Title 
 } from '@patternfly/react-core';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
 import CubesIcon from '@patternfly/react-icons/dist/js/icons/cubes-icon';
 
-export const ManagedKafkaEmptyState: any = ({ title, body, actionInfo, action, icon }) => {
+type ManagedKafkaEmptyStateProps = {
+ title: string;
+ actionInfo: string;
+ action?: () => void;
+ icon: string;
+}
+
+export const ManagedKafkaEmptyState = ({ title, actionInfo, action, icon }: ManagedKafkaEmptyStateProps) => {
 
  const renderIcon = () => {
  switch (icon) {
@@ -28,11 +34,6 @@ export const ManagedKafkaEmptyState: any = ({ title, body, actionInfo, action, i
  <Title headingLevel="h4" size="lg">
  {title}
  </Title>
- {body &&
- <EmptyStateBody>
- {body}
- </EmptyStateBody>
- }
  <Button variant="link" onClick={action && action}>{actionInfo}</Button>
  </EmptyState>
  )

frontend/packages/rhoas-plugin/src/components/managed-services-kafka/ManagedKafkas.tsx

@@ -15,13 +15,12 @@ import {
  createManagedServicesRequestIfNeeded,
  listOfCurrentKafkaConnectionsById
 } from './resourceCreators';
-import './ManagedKafkas.css';
-import { KafkaRequest } from "./types"
+import { KafkaRequest } from '../../types/rhoas-types';
 
 const ManagedKafkas = () => {
  const [currentNamespace] = useActiveNamespace();
  const [selectedKafka, setSelectedKafka] = React.useState<number>();
- const [currentKafkaConnections, setCurrentKafkaConnections] = React.useState([]);
+ const [currentKafkaConnections, setCurrentKafkaConnections] = React.useState<Array<string>>([]);
 
  const createKafkaRequestFlow = async () => {
  await createManagedServicesRequestIfNeeded(currentNamespace);
@@ -66,7 +65,7 @@ const ManagedKafkas = () => {
  history.push(`/topology/ns/${currentNamespace}`);
  };
 
- const disableCreate = () => {
+ const disableCreateButton = () => {
  if (selectedKafka === null || selectedKafka === undefined) {
  return true;
  }
@@ -83,11 +82,11 @@ const ManagedKafkas = () => {
  <NamespacedPage variant={NamespacedPageVariants.light} disabled hideApplications>
  <StreamsInstancePage
  kafkaArray={remoteKafkaInstances}
+ selectedKafka={selectedKafka}
  setSelectedKafka={setSelectedKafka}
  currentKafkaConnections={currentKafkaConnections}
- currentNamespace={currentNamespace}
  createManagedKafkaConnectionFlow={createManagedKafkaConnectionFlow}
- disableCreate={disableCreate}
+ disableCreateButton={disableCreateButton}
  />
  </NamespacedPage>
  </>

frontend/packages/rhoas-plugin/src/components/streams-list/StreamsInstanceFilter.tsx

@@ -1,66 +1,40 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
- Select,
- SelectVariant,
- SelectOption,
  TextInput,
  Toolbar,
  ToolbarContent,
  ToolbarItem,
  ToolbarGroup,
 } from '@patternfly/react-core';
+import { KEYBOARD_SHORTCUTS } from '@console/shared';
 
-const StreamsInstanceFilter = () => {
- const [isToolbarSelectOpen, setIsToolbarSelectOpen] = React.useState(false);
- const [toolbarSelections, setToolbarSelections] = React.useState("Name");
- const [textInputNameValue, setTextInputNameValue] = React.useState('');
- const { t } = useTranslation();
-
- const onToggleToolbarSelect = (isOpen) => {
- setIsToolbarSelectOpen(isOpen);
- };
-
- const onSelect = (selection) => {
- setToolbarSelections(selection);
- setIsToolbarSelectOpen(false);
- };
-
- const handleTextInputNameChange = value => {
- setTextInputNameValue(value);
- };
+type StreamsInstanceFilterProps = {
+ textInputNameValue: string;
+ handleTextInputNameChange: (textInputNameValue: string) => void;
+}
 
- const selectOptions = [
- <SelectOption key={0} value="Name" />
- ]
+const StreamsInstanceFilter = ({ textInputNameValue, handleTextInputNameChange }: StreamsInstanceFilterProps) => {
+ const { t } = useTranslation();
 
  return (
  <Toolbar id="toolbar-filter-instances">
  <ToolbarContent>
  <ToolbarGroup variant="filter-group">
  <ToolbarItem>
- <Select
- variant={SelectVariant.single}
- aria-label={t('rhoas-plugin~Select name')}
- onToggle={onToggleToolbarSelect}
- onSelect={onSelect}
- selections={toolbarSelections}
- isOpen={isToolbarSelectOpen}
- aria-labelledby=""
- >
- {selectOptions}
- </Select>
- </ToolbarItem>
- <ToolbarItem>
- {toolbarSelections === 'Name' && (
+ <div className="has-feedback">
  <TextInput
  value={textInputNameValue}
  type="text"
  onChange={handleTextInputNameChange}
  aria-label={t('rhoas-plugin~Search by name')}
  placeholder={t('rhoas-plugin~Search by name...')}
+ className="co-text-filter"
  />
- )}
+ <span className="form-control-feedback form-control-feedback--keyboard-hint">
+ <kbd>{KEYBOARD_SHORTCUTS.focusFilterInput}</kbd>
+ </span>
+ </div>
  </ToolbarItem>
  </ToolbarGroup>
  </ToolbarContent>

frontend/packages/rhoas-plugin/src/components/streams-list/StreamsInstancePage.tsx

@@ -8,21 +8,45 @@ import { PageHeading } from '@console/internal/components/utils';
 import StreamsInstanceFilter from './StreamsInstanceFilter';
 import StreamsInstanceTable from './StreamsInstanceTable';
 import { ManagedKafkaEmptyState } from './../empty-state/ManagedKafkaEmptyState';
+import { useActiveNamespace } from '@console/shared';
+import { ManagedKafka } from '../../types/rhoas-types';
 
-const StreamsInstancePage: any = ({ kafkaArray,
+type StreamsInstancePageProps = {
+ kafkaArray: ManagedKafka[];
+ selectedKafka: number;
+ setSelectedKafka: (selectedKafka: number) => void;
+ currentKafkaConnections: Array<string>;
+ createManagedKafkaConnectionFlow: () => {};
+ disableCreateButton: () => boolean;
+}
+
+const StreamsInstancePage = ({ kafkaArray,
+ selectedKafka,
  setSelectedKafka,
  currentKafkaConnections,
- currentNamespace,
  createManagedKafkaConnectionFlow,
- disableCreate }) => {
+ disableCreateButton }: StreamsInstancePageProps) => {
 
- const [allKafkasConnected, setAllKafkasConnected] = React.useState(false);
+ const [currentNamespace] = useActiveNamespace();
+ const [allKafkasConnected, setAllKafkasConnected] = React.useState<boolean>(false);
+ const [textInputNameValue, setTextInputNameValue] = React.useState<string>("");
+ const [pageKafkas, setPageKafkas] = React.useState<ManagedKafka[]>(kafkaArray);
  const { t } = useTranslation();
 
+ React.useEffect(() => {
+ setPageKafkas(kafkaArray);
+ }, [kafkaArray]);
+
  const goToTopology = () => {
  history.push(`/topology/ns/${currentNamespace}`);
  }
 
+ const handleTextInputNameChange = (value: string) => {
+ let filteredKafkas = kafkaArray.filter(kafka => kafka.name.includes(value));
+ setPageKafkas(filteredKafkas);
+ setTextInputNameValue(value);
+ };
+
  return (
  <>
  <Helmet>
@@ -35,24 +59,30 @@ const StreamsInstancePage: any = ({ kafkaArray,
  <p>{t('rhoas-plugin~The managed Kafka cluster selected below will appear on the topology view.')}</p>
  </PageHeading>
  <PageBody>
- {kafkaArray.length === 0 ? (
- <ManagedKafkaEmptyState
- title={t('rhoas-plugin~No Managed Kafka Clusters found')}
- actionInfo={t('rhoas-plugin~Go back to Managed Services Catalog')}
- icon="CubesIcon"
- />
- ) : allKafkasConnected ? (
+ { allKafkasConnected ? (
  <ManagedKafkaEmptyState
  title={t('rhoas-plugin~All Managed Kafka clusters are in use')}
  actionInfo={t('rhoas-plugin~See Managed Kafka clusters in Topology view')}
  action={() => goToTopology()}
  icon="CubesIcon"
  />
- ) : (
+ ) : kafkaArray.length === 0 ? (
+ <ManagedKafkaEmptyState
+ title={t('rhoas-plugin~No Managed Kafka Clusters found')}
+ actionInfo={t('rhoas-plugin~Go back to Managed Services Catalog')}
+ icon="CubesIcon"
+ />
+ ) : (
  <>
- <StreamsInstanceFilter />
+ <StreamsInstanceFilter
+ textInputNameValue={textInputNameValue}
+ handleTextInputNameChange={handleTextInputNameChange}
+ />
  <StreamsInstanceTable
  kafkaArray={kafkaArray}
+ pageKafkas={pageKafkas}
+ handleTextInputNameChange={handleTextInputNameChange}
+ selectedKafka={selectedKafka}
  setSelectedKafka={setSelectedKafka}
  currentKafkaConnections={currentKafkaConnections}
  allKafkasConnected={allKafkasConnected}
@@ -64,7 +94,7 @@ const StreamsInstancePage: any = ({ kafkaArray,
  isSubmitting={false}
  errorMessage=""
  submitLabel={t('rhoas-plugin~Create')}
- disableSubmit={disableCreate()}
+ disableSubmit={disableCreateButton()}
  resetLabel={t('rhoas-plugin~Reset')}
  sticky
  handleCancel={history.goBack}