@digi-frontend/dgate-api-documentation 1.0.55 → 1.0.57

package/src/components/table/table.tsx

@@ -164,7 +164,12 @@ const ParamterTable = ({
                         label: capitalize(values.in),
                         value: values.in,
                       }}
-                      onChange={(item) => setFieldValue('in', item?.value?.toLowerCase())} // Updates state on selection
+                      onChange={(item) => {
+                        setFieldValue('in', item?.value?.toLowerCase())
+                        if (item?.value == 'in') {
+                          setFieldValue('required', true)
+                        }
+                      }} // Updates state on selection
                       options={[
                         {
                           list: isRequest
@@ -186,10 +191,7 @@ const ParamterTable = ({
                 </td>
 
                 <td key={'parameter schema type'}>
-                  <div
-                    data-id="TEXT_DESCRIPTION"
-                    className="tableData select-inputs"
-                  >
+                  <div data-id="TEXT_DESCRIPTION" className="tableData select-inputs">
                     <SelectGroupV2
                       disabled={readOnly}
                       clearable={false}
@@ -215,32 +217,32 @@ const ParamterTable = ({
                       withSearch={false}
                     />{' '}
                     {!!values?.schema?.type && values?.schema?.type.toLowerCase() === 'array' ? (
-                        <SelectGroupV2
-                          disabled={readOnly}
-                          clearable={false}
-                          value={{
-                            label: capitalize(values?.schema?.items?.type),
-                            value: values.schema?.items?.type,
-                          }}
-                          errorMsg={!!errors?.schema?.items?.type && errors?.schema?.items?.type}
-                          onChange={(item) =>
-                            setFieldValue('schema.items.type', item?.value?.toLowerCase())
-                          } // Updates state on selection
-                          options={[
-                            {
-                              list: [
-                                { label: 'String', value: 'string' },
-                                { label: 'Integer', value: 'integer' },
-                                { label: 'Boolean', value: 'boolean' },
-                                { label: 'Object', value: 'object' },
-                                { label: 'Array', value: 'array' },
-                                { label: 'Number', value: 'number' },
-                              ],
-                            },
-                          ]}
-                          isMultiple={false}
-                          withSearch={false}
-                        />
+                      <SelectGroupV2
+                        disabled={readOnly}
+                        clearable={false}
+                        value={{
+                          label: capitalize(values?.schema?.items?.type),
+                          value: values.schema?.items?.type,
+                        }}
+                        errorMsg={!!errors?.schema?.items?.type && errors?.schema?.items?.type}
+                        onChange={(item) =>
+                          setFieldValue('schema.items.type', item?.value?.toLowerCase())
+                        } // Updates state on selection
+                        options={[
+                          {
+                            list: [
+                              { label: 'String', value: 'string' },
+                              { label: 'Integer', value: 'integer' },
+                              { label: 'Boolean', value: 'boolean' },
+                              { label: 'Object', value: 'object' },
+                              { label: 'Array', value: 'array' },
+                              { label: 'Number', value: 'number' },
+                            ],
+                          },
+                        ]}
+                        isMultiple={false}
+                        withSearch={false}
+                      />
                     ) : (
                       ''
                     )}
@@ -362,7 +364,12 @@ const ParamterTable = ({
                       <>{values.required ? 'True' : 'False'}</>
                     ) : (
                       <Switch
-                        checked={values.required}
+                        checked={
+                          values && values.in && values.in.toLowerCase() == 'path'
+                            ? true
+                            : values.required
+                        }
+                        disabled={values && values.in && values.in.toLowerCase() == 'path'}
                         onClick={() => {
                           if (readOnly) {
                             return

package/src/components/table/tags-table.tsx

@@ -16,7 +16,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
   const [externalUrl, setExternalUrl] = useState('')
   const [tooltipRef, setTooltipRef] = useState(null)
   const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)
-  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+  const { values, errors, setFieldValue, isValid, submitForm, resetForm,dirty } = useFormik({
     validateOnMount: true,
     initialValues: {
       name: '',
@@ -307,7 +307,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                           className={_styles.deleteParamBtn}
                           variant="link"
                           color="success"
-                          disabled={!isValid}
+                          disabled={!isValid || !dirty}
                           endIcon={<SVGLoader src={AddRow} width="0.125rem" height="0.125rem" />}
                           onClick={() => {
                             setText('')

package/src/layout/docsComponents/DocsContent/DocsContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './style.scss'
-import { TagPage } from './TagPage'
+import { OverviewPage } from './OverviewPage'
 import { EndpointPage } from './EndpointPage'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 
@@ -10,6 +10,7 @@ const DocsContent = ({
   setActiveItemData,
   setActiveType,
   setExpandedSections,
+  onProductNavigate,
 }: {
   data: OverviewData | EndpointData
   activeType: 'OVERVIEW' | 'ENDPOINT'
@@ -17,15 +18,17 @@ const DocsContent = ({
   setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
   setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
   toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void
+  onProductNavigate?: (productId: number) => void
 }) => {
   return (
     <main>
       {activeType === 'OVERVIEW' ? (
-        <TagPage
+        <OverviewPage
           data={data as OverviewData}
           setActiveItemData={setActiveItemData}
           setActiveType={setActiveType}
           setExpandedSections={setExpandedSections}
+          onProductNavigate={onProductNavigate}
         />
       ) : (
         <EndpointPage data={data as EndpointData} />

package/src/layout/docsComponents/DocsContent/{TagPage → OverviewPage}/index.tsx

@@ -3,16 +3,18 @@ import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
 import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 
-export const TagPage = ({
+export const OverviewPage = ({
   data,
   setActiveItemData,
   setActiveType,
   setExpandedSections,
+  onProductNavigate,
 }: {
   data: OverviewData
   setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
   setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
   setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+  onProductNavigate?: (productId: number) => void
 }) => {
   const handleVersionClick = (verObj) => {
     if (verObj.apiSpecId === data.apiSpecId) {
@@ -72,6 +74,7 @@ export const TagPage = ({
       [`api-${data.apiSpecId}-resource-${endpoint.id}`]: true,
     }))
   }
+
   return (
     <div className="api-details-page">
       <h2 className="welcome">Welcome to</h2>
@@ -104,9 +107,19 @@ export const TagPage = ({
       </div>
 
       <p className="api-desc">API Description</p>
-      <div className="api-product-tag">
-        Product with this API <span className="product-tag">{data.associatedProduct.name}</span>
-      </div>
+      {onProductNavigate && (
+        <div className="api-product-tag">
+          Product with this API{' '}
+          <span
+            className="product-tag"
+            role="button"
+            tabIndex={-1}
+            onClick={() => onProductNavigate(data.associatedProduct.productId)}
+          >
+            {data.associatedProduct.name}
+          </span>
+        </div>
+      )}
 
       <h3 className="section-title">Endpoints</h3>
 

package/src/layout/docsComponents/DocsContent/{TagPage → OverviewPage}/style.scss

@@ -101,6 +101,7 @@
       font-size: 0.75rem;
       letter-spacing: 0px;
       margin-left: 0.5rem;
+      cursor: pointer;
     }
   }
 

package/src/layout/docsComponents/DocsHeader/DocsHeader.tsx

@@ -1,12 +1,11 @@
 import React, { useState, useRef } from 'react'
-import { Button, Size, Input, SelectGroup } from 'digitinary-ui'
+import { Button, Size, Input } from 'digitinary-ui'
 import SVGLoader from '../../../components/SVGLoader/SVGLoader'
 import {
   FilterIcon,
   BookIcon,
   ApiIcon,
   SearchIcon,
-  arrowDownGray,
   UpArrowIcon,
   DownArrowIcon,
 } from '../../../assets/icons'
@@ -25,9 +24,7 @@ const DocsHeader: React.FC = ({
   const [showSearchFilter, setShowSearchFilter] = useState<boolean>(false)
   const [apiName, setApiName] = useState<string>('')
   const [selectedMethods, setSelectedMethods] = useState<any[]>([])
-  const [methodListOpened, setMethodListOpened] = useState(false)
   const [isMethodDropdownOpen, setIsMethodDropdownOpen] = useState<boolean>(false)
-  const selectRef = useRef<any>(null)
 
   const handleOpenSearchFilter = (): void => {
     setShowSearchFilter(true)

package/src/layout/docsComponents/DocsSideMenuTree/DocsSideMenuTree.tsx

@@ -1,5 +1,5 @@
 import './style.scss'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import SVGLoader from '../../../components/SVGLoader/SVGLoader'
 import { arrowDownGray, arrowRightGray, document, eye } from '../../../assets/icons'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
@@ -16,6 +16,8 @@ const DocsSideMenuTree = ({
   setActiveType,
   toggleSection,
   canSelectFirstApi,
+  canFocusSection,
+  setCanFocusSection,
 }: {
   apis: OverviewData[]
   setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
@@ -28,6 +30,8 @@ const DocsSideMenuTree = ({
   activeType: 'OVERVIEW' | 'ENDPOINT'
   toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void
   canSelectFirstApi?: boolean
+  canFocusSection: boolean
+  setCanFocusSection: React.Dispatch<React.SetStateAction<boolean>>
 }) => {
   // Auto-expand first API only once
   useEffect(() => {
@@ -124,12 +128,19 @@ const DocsSideMenuTree = ({
       activeItemData.api.id === api.apiSpecId &&
       'path' in activeItemData &&
       'method' in activeItemData
+    const sectionRef = useRef<HTMLDivElement>(null)
+    // Scroll to the section if it's expanded
+    if (canFocusSection && sectionRef?.current) {
+      sectionRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      setCanFocusSection(false)
+    }
 
     return (
       <div
         key={api.apiSpecId}
         className="api-docs-api-tree__section"
         data-active={isEndpointActive || isOverviewExpanded}
+        ref={sectionRef}
       >
         <div
           className="api-docs-api-tree__section-header"

package/src/layout/docsLayout.tsx

@@ -8,6 +8,7 @@ import stableStringify from 'fast-json-stable-stringify'
 interface ILayoutProps {
   apis?: ApiSpecModel[]
   activeApiId?: string
+  onProductNavigate?: (productId: number) => void
 }
 
 export interface TagData {
@@ -46,7 +47,7 @@ function areEqual(prev: ILayoutProps, next: ILayoutProps): boolean {
   )
 }
 
-const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
+const DocsLayout = ({ apis, activeApiId, onProductNavigate }: ILayoutProps): JSX.Element => {
   const [transformedOpenApis, setTransformedOpenApis] = useState<OverviewData[]>([])
   const [isFirstApiExpanded, setIsFirstApiExpanded] = useState(true)
   const [activeItemData, setActiveItemData] = useState<
@@ -57,6 +58,7 @@ const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
   const allData = useRef([])
   const [pending, setPending] = useState(true)
   const [canSelectFirstApi, setCanSelectFirstApi] = useState(false)
+  const [canFocusSection, setCanFocusSection] = useState(false)
 
   const toggleSection = (
     apiId: string,
@@ -127,6 +129,7 @@ const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
       setActiveType('OVERVIEW')
       setIsFirstApiExpanded(false)
       setCanSelectFirstApi(true)
+      setCanFocusSection(true)
     }
   }, [activeApiId, transformedOpenApis])
 
@@ -154,6 +157,8 @@ const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
           setActiveType={setActiveType}
           toggleSection={toggleSection}
           canSelectFirstApi={canSelectFirstApi}
+          canFocusSection={canFocusSection}
+          setCanFocusSection={setCanFocusSection}
         />
       )}
 
@@ -165,6 +170,7 @@ const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
           setActiveType={setActiveType}
           setExpandedSections={setExpandedSections}
           toggleSection={toggleSection}
+          onProductNavigate={onProductNavigate}
         />
       )}
       {activeType === 'ENDPOINT' && <Layout.DocsAside data={activeItemData as EndpointData} />}