Merge branch 'feat/calc-cleanup' of github.com:devtron-labs/dashboard…

… into feat/rb-calc-cleanup

.eslintignore

@@ -289,8 +289,6 @@ src/components/globalConfigurations/GlobalConfiguration.tsx
 src/components/globalConfigurations/GlobalConfigurationProvider.tsx
 src/components/hostURL/HostURL.tsx
 src/components/hyperion/EnvironmentSelect.tsx
-src/components/login/Login.tsx
-src/components/login/login.service.ts
 src/components/material/CreateMaterial.tsx
 src/components/material/MaterialList.tsx
 src/components/material/MaterialView.tsx

.github/workflows/pr-issue-validator.yaml

@@ -21,6 +21,7 @@ jobs:
       issues: write
       contents: read
       pull-requests: write
+      repository-projects: read
     steps:
     - name: Checkout repository
       uses: actions/checkout@v2
@@ -140,4 +141,4 @@ jobs:
           gh pr edit $PRNUM --add-label "PR:Issue-verification-failed"
           gh pr edit $PRNUM --remove-label "PR:Ready-to-Review"
           exit 1
-        fi
+        fi

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.8.2",
+        "@devtron-labs/devtron-fe-common-lib": "1.8.3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/App.tsx

@@ -350,7 +350,6 @@ export default function App() {
                                             to={window._env_.K8S_CLIENT ? '/' : `${URLS.LOGIN_SSO}${location.search}`}
                                         />
                                     </Switch>
-                                    <div id="full-screen-modal" />
                                     <div id="visible-modal" />
                                     <div id="visible-modal-2" />
                                     <div id="animated-dialog-backdrop" />

src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.tsx

@@ -68,6 +68,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
     // STATES
     const [showCannotDeleteTooltip, setShowCannotDeleteTooltip] = useState(false)
     const [reload, setReload] = useState(false)
+    const [isAppDeleting, setIsAppDeleting] = useState(false)
     const [state, setState] = useState<AppConfigState>({
         view: ViewType.LOADING,
         stageName: STAGE_NAME.LOADING,
@@ -331,8 +332,10 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
 
     const deleteAppHandler = async () => {
         try {
+            setIsAppDeleting(true)
             const response = await deleteApp(appId)
             if (response) {
+                setIsAppDeleting(false)
                 if (isJob) {
                     ToastManager.showToast({
                         variant: ToastVariantType.success,
@@ -348,6 +351,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
                 }
             }
         } catch (error) {
+            setIsAppDeleting(false)
             showError(error)
         }
     }
@@ -422,7 +426,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
                         primaryButtonConfig: {
                             text: 'Delete',
                             onClick: deleteAppHandler,
-                            isLoading: state.view === ViewType.LOADING,
+                            isLoading: state.view === ViewType.LOADING || isAppDeleting,
                         },
                     }}
                     handleClose={closeDeleteConfirmationModal}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx

@@ -23,6 +23,7 @@ import {
     ApprovalConfigDataKindType,
     getIsApprovalPolicyConfigured,
     CMSecretComponentType,
+    Button,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Next } from '@Icons/ic-arrow-forward.svg'
@@ -50,18 +51,16 @@ const NextButton: React.FC<NextButtonProps> = ({ isCiPipeline, navItems, current
     const nextUrl = navItems[index + 1].href
     if (!isCiPipeline) {
         return (
-            <div className="app-compose__next-section">
-                <button
-                    type="button"
+            <div className="app-compose__next-section flex right">
+                <Button
                     disabled={isDisabled}
-                    className="cta dc__align-right flex"
                     onClick={() => {
                         history.push(nextUrl)
                     }}
-                >
-                    <span className="mr-5">Next </span>
-                    <Next className="icon-dim-18" />
-                </button>
+                    text="Next"
+                    endIcon={<Next />}
+                    dataTestId="app-compose-next-button"
+                />
             </div>
         )
     }
@@ -103,21 +102,23 @@ const AppComposeRouter = () => {
         // currently the logic for redirection to next unlocked stage is in respondOnSuccess function can be done for MaterialList also
         <Switch>
             <Route path={`${path}/${URLS.APP_GIT_CONFIG}`}>
-                <>
-                    <MaterialList
-                        respondOnSuccess={respondOnSuccess}
-                        isWorkflowEditorUnlocked={isUnlocked.workflowEditor}
-                        toggleRepoSelectionTippy={toggleRepoSelectionTippy}
-                        setRepo={setRepoState}
-                        isJobView={isJobView}
-                    />
+                <div className="flexbox-col flex-grow-1 dc__content-space h-100 dc__overflow-hidden">
+                    <div className="flex-grow-1 dc__overflow-auto">
+                        <MaterialList
+                            respondOnSuccess={respondOnSuccess}
+                            isWorkflowEditorUnlocked={isUnlocked.workflowEditor}
+                            toggleRepoSelectionTippy={toggleRepoSelectionTippy}
+                            setRepo={setRepoState}
+                            isJobView={isJobView}
+                        />
+                    </div>
                     <NextButton
                         currentStageName={STAGE_NAME.GIT_MATERIAL}
                         navItems={navItems}
                         isDisabled={!isUnlocked.workflowEditor}
                         isCiPipeline={isCiPipeline}
                     />
-                </>
+                </div>
             </Route>
             {isUnlocked.workflowEditor && [
                 <Route
@@ -187,20 +188,22 @@ const AppComposeRouter = () => {
     const renderAppViewRoutes = (): JSX.Element => (
         <Switch>
             <Route path={`${path}/${URLS.APP_GIT_CONFIG}`}>
-                <>
-                    <MaterialList
-                        respondOnSuccess={respondOnSuccess}
-                        isWorkflowEditorUnlocked={isUnlocked.workflowEditor}
-                        toggleRepoSelectionTippy={toggleRepoSelectionTippy}
-                        setRepo={setRepoState}
-                    />
+                <div className="flexbox-col flex-grow-1 dc__content-space h-100 dc__overflow-hidden">
+                    <div className="flex-grow-1 dc__overflow-auto">
+                        <MaterialList
+                            respondOnSuccess={respondOnSuccess}
+                            isWorkflowEditorUnlocked={isUnlocked.workflowEditor}
+                            toggleRepoSelectionTippy={toggleRepoSelectionTippy}
+                            setRepo={setRepoState}
+                        />
+                    </div>
                     <NextButton
                         currentStageName={STAGE_NAME.GIT_MATERIAL}
                         navItems={navItems}
                         isDisabled={!isUnlocked.dockerBuildConfig}
                         isCiPipeline={isCiPipeline}
                     />
-                </>
+                </div>
             </Route>
 
             {isUnlocked.dockerBuildConfig && (

src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx

@@ -302,7 +302,7 @@ const EnvironmentOverrideRouter = ({
     const renderEnvsNav = (): JSX.Element => {
         if (environments.length) {
             return (
-                <div className="w-100" style={{ height: 'calc(100% - 60px)' }} data-testid="env-override-list">
+                <div className="w-100" data-testid="env-override-list">
                     {environments.map((env) => {
                         const isApprovalApplicable =
                             envIdToEnvApprovalConfigurationMap?.[env.environmentId]?.isApprovalApplicable

src/Pages/Applications/DevtronApps/Details/AppConfigurations/appConfig.scss

@@ -65,14 +65,6 @@
                 color: var(--B500);
             }
         }
-
-        .cta-delete-app {
-            bottom: 0;
-
-            .cta.delete {
-                width: calc(100% - 8px);
-            }
-        }
     }
 
     .app-compose__main {
@@ -148,14 +140,9 @@
     }
 
     .app-compose__next-section {
-        position: fixed;
-        bottom: 0;
-        width: calc(100% - 240px - 72px);
-        height: 64px;
-        padding: 12px 24px;
+        padding: 12px 20px;
         background-color: var(--bg-tertiary);
         box-shadow: inset 0 1px 0 0 var(--N200);
-        z-index: var(--index-next-section);
     }
 
     .app-compose__nav-icon {

src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx

@@ -87,15 +87,15 @@ const APITokenList = ({ tokenList, renderSearchToken, reload }: APITokenListType
                 </div>
             </div>
             <div className="api-token__list">
-                <div className="api-list__row fw-6 cn-7 fs-12 dc__border-bottom pt-8 pb-8 pl-20 pr-20 dc__uppercase">
+                <div className="api-list__row fw-6 cn-7 fs-12 dc__border-bottom pt-8 pb-8 pl-20 pr-20 dc__uppercase dc__position-sticky dc__top-0 bg__primary dc__zi-3">
                     <div />
                     <div>Name</div>
                     <div>Last Used On</div>
                     <div>Last used by Ip add.</div>
                     <div>Expires on</div>
                     <div />
                 </div>
-                <div className="dc__overflow-auto api__list__height dc__position-rel">
+                <div className="dc__overflow-auto dc__position-rel">
                     {!tokenList || tokenList.length === 0
                         ? noMatchingResults()
                         : tokenList.map((list, index) => (

src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.scss

@@ -125,7 +125,3 @@
         width: 94%;
     }
 }
-
-.api__list__height {
-    height: calc(100vh - 149px);
-}

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx

@@ -43,6 +43,7 @@ import {
     ComponentSizeType,
     ConfirmationModal,
     ConfirmationModalVariantType,
+    SSOProviderIcon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import yamlJsParser from 'yaml'
 import Check from '@Icons/ic-selected-corner.png'
@@ -72,7 +73,6 @@ import {
     SsoSecretsToHide,
 } from './constants'
 import './ssoLogin.scss'
-import { SSOTabIcons } from './utils'
 
 const AutoAssignToggleTile = importComponentFromFELibrary('AutoAssignToggleTile')
 const UserPermissionConfirmationModal = importComponentFromFELibrary('UserPermissionConfirmationModal')
@@ -89,7 +89,7 @@ const SSOLoginTab: React.FC<SSOLoginTabType> = ({ handleSSOClick, checked, lastA
         />
         <span className="dc__tertiary-tab sso-icons" data-testid={`sso-${value}-button`}>
             <aside className="login__icon-alignment">
-                <SSOTabIcons provider={value} />
+                <SSOProviderIcon provider={value} size={24} />
             </aside>
             <aside className="login__text-alignment">{SSOName}</aside>
             <label>
@@ -151,7 +151,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                 if (ssoConfig) {
                     this.setState({ sso: ssoConfig?.name, lastActiveSSO: ssoConfig })
                 } else {
-                    ssoConfig = sample.google
+                    ssoConfig = sample.google as any // TODO: Add type for sample
                     this.setState({ sso: 'google', ssoConfig: this.parseResponse(ssoConfig) })
                 }
                 // Would be undefined for OSS

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/index.ts

@@ -15,3 +15,5 @@
  */
 
 export { default } from './SSOLogin.component'
+export * from './constants'
+export * from './ssoConfig.types'

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/service.ts

@@ -15,10 +15,11 @@
  */
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { post, put, get, getUrlWithSearchParams } from '@devtron-labs/devtron-fe-common-lib'
+import { post, put, get, getUrlWithSearchParams, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../../../../config'
+import { SSOConfigDTO } from './ssoConfig.types'
 
-export function getSSOConfigList(): Promise<any> {
+export function getSSOConfigList(): Promise<ResponseType<SSOConfigDTO[]>> {
     return get(Routes.SSO_LIST)
 }
 

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/ssoConfig.types.tsx

@@ -18,23 +18,23 @@ import { RouteComponentProps } from 'react-router-dom'
 import { SSOProvider } from './constants'
 import { GlobalConfiguration } from '../../../../components/globalConfigurations/types'
 
-export interface SSOLogin {
+export interface SSOConfigDTO {
+    active: boolean
     id: number
+    globalAuthConfigType: string
     name: string
-    active: boolean
+    url: string
 }
 
-export interface SSOConfigType {
-    name?: string
-    id?: number
-    url?: string
+export interface SSOLogin extends Pick<SSOConfigDTO, 'active' | 'name' | 'id'> {}
+
+export interface SSOConfigType extends Partial<Pick<SSOConfigDTO, 'active' | 'name' | 'id' | 'url'>> {
     config: {
         type: string
         id: string
         name: string
         config: string // YAML string
     }
-    active?: boolean
 }
 
 export interface SSOLoginState {
@@ -75,7 +75,3 @@ export interface SSOLoginTabType {
 }
 
 export const OIDCType = 'oidc'
-
-export interface SSOTabIconsTypes {
-    provider: SSOProvider
-}

src/Pages/GlobalConfigurations/Authorization/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { default } from './Authorization.component'
+export * from './SSOLoginServices'

src/Pages/GlobalConfigurations/index.ts

@@ -15,3 +15,4 @@
  */
 
 export * from './BuildInfra'
+export * from './Authorization'