Merge pull request #810 from jeff-phillips-18/wizards-to-forms

Change Wizards to Forms, Use managed documents for knowledge context selection

Author: vishnoianil

package-lock.json

@@ -2,11 +2,11 @@
 'use client';
 import React from 'react';
 import { AppLayout } from '@/components/AppLayout';
-import KnowledgeWizard from '@/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard';
+import KnowledgeForm from '@/components/Contribute/Knowledge/Edit/KnowledgeForm';
 
 const AddKnowledgePage: React.FunctionComponent = () => (
   <AppLayout className="contribute-page">
-    <KnowledgeWizard />
+    <KnowledgeForm />
   </AppLayout>
 );
 

src/app/contribute/knowledge/page.tsx

@@ -2,11 +2,11 @@
 'use client';
 import React from 'react';
 import { AppLayout } from '@/components/AppLayout';
-import SkillWizard from '@/components/Contribute/Skill/SkillWizard/SkillWizard';
+import SkillForm from '@/components/Contribute/Skill/Edit/SkillForm';
 
 const AddSkillPage: React.FunctionComponent = () => (
   <AppLayout className="contribute-page">
-    <SkillWizard />
+    <SkillForm />
   </AppLayout>
 );
 

src/app/contribute/skill/page.tsx

@@ -34,9 +34,9 @@ const EndpointActions: React.FC<Props> = ({ endpoint, onToggleEnabled, onEdit, o
       >
         <DropdownList>
           <DropdownItem onClick={onEdit}>Edit</DropdownItem>
-          <Divider />
-          <DropdownItem key="delete" onClick={onDelete}>
-            <span style={{ color: 'var(--pf-t--global--color--status--danger--100)' }}>Delete endpoint</span>
+          <Divider component="li" />
+          <DropdownItem key="delete" onClick={onDelete} className="destructive-action-item">
+            <span>Delete endpoint</span>
           </DropdownItem>
         </DropdownList>
       </Dropdown>

src/app/playground/endpoints/EndpointActions.tsx

@@ -24,7 +24,11 @@ import {
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
-  Page
+  Page,
+  AlertGroup,
+  Alert,
+  AlertVariant,
+  AlertActionCloseButton
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
 import ThemePreference from '@/components/ThemePreference/ThemePreference';
@@ -33,6 +37,7 @@ import UserMenu from './UserMenu/UserMenu';
 
 import '../styles/globals.scss';
 import { useFeatureFlags } from '@/context/FeatureFlagsContext';
+import { useAlerts } from '@/context/AlertContext';
 
 interface IAppLayout {
   children: React.ReactNode;
@@ -56,6 +61,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
     loaded,
     featureFlags: { playgroundFeaturesEnabled, experimentalFeaturesEnabled }
   } = useFeatureFlags();
+  const { alerts, removeAlert } = useAlerts();
 
   const router = useRouter();
   const pathname = usePathname();
@@ -187,6 +193,17 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
       isContentFilled
     >
       {children}
+      <AlertGroup isToast isLiveRegion>
+        {alerts.map((alert) => (
+          <Alert
+            variant={alert.variant ? AlertVariant[alert.variant] : undefined}
+            title={alert.title}
+            timeout={true}
+            actionClose={<AlertActionCloseButton title={alert.title} onClose={() => removeAlert(alert.key)} />}
+            key={alert.key}
+          />
+        ))}
+      </AlertGroup>
     </Page>
   );
 };

src/components/AppLayout.tsx

@@ -6,6 +6,7 @@ import { SessionProvider } from 'next-auth/react';
 import { ThemeProvider } from '@/context/ThemeContext';
 import { EnvConfigProvider } from '@/context/EnvConfigContext';
 import { FeatureFlagsProvider } from '@/context/FeatureFlagsContext';
+import { AlertProvider } from '@/context/AlertContext';
 
 interface ClientProviderProps {
   children: ReactNode;
@@ -16,7 +17,9 @@ const ClientProvider = ({ children }: ClientProviderProps) => {
     <SessionProvider>
       <EnvConfigProvider>
         <FeatureFlagsProvider>
-          <ThemeProvider>{children}</ThemeProvider>
+          <ThemeProvider>
+            <AlertProvider>{children}</AlertProvider>
+          </ThemeProvider>
         </FeatureFlagsProvider>
       </EnvConfigProvider>
     </SessionProvider>

src/components/ClientProviders.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Content, Popover, Button, Flex, FlexItem } from '@patternfly/react-core';
+import { t_global_spacer_sm as SmallSpacerSize } from '@patternfly/react-tokens';
+import XsOutlinedQuestionCircleIcon from '@/components/Common/XsOutlinedQuestionCircleIcon';
+
+interface Props {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  helpInfo?: React.ReactNode;
+}
+const FormSectionHeader: React.FC<Props> = ({ title, description, helpInfo }) => (
+  <>
+    <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+      <FlexItem>
+        <Content component="h3">{title}</Content>
+      </FlexItem>
+      {helpInfo ? (
+        <FlexItem>
+          <Popover bodyContent={helpInfo}>
+            <Button isInline variant="link" aria-label="more info">
+              <XsOutlinedQuestionCircleIcon />
+            </Button>
+          </Popover>
+        </FlexItem>
+      ) : null}
+    </Flex>
+    {description ? (
+      <Content component="small" style={{ marginTop: SmallSpacerSize.var }}>
+        {description}
+      </Content>
+    ) : null}
+  </>
+);
+
+export default FormSectionHeader;