-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Modularize integration sections in frontend
- Loading branch information
1 parent
d410b42
commit 74d5586
Showing
5 changed files
with
132 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
frontend/components/integrations/CloudIntegrationSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from "react"; | ||
| import CloudIntegration from "./CloudIntegration"; | ||
|
|
||
| interface IntegrationOption { | ||
| name: string; | ||
| type: string; | ||
| clientId: string; | ||
| docsLink: string; | ||
| } | ||
|
|
||
| interface Props { | ||
| projectIntegrations: any; | ||
| integrations: IntegrationOption[]; | ||
| setSelectedIntegrationOption: () => void; | ||
| integrationOptionPress: () => void; | ||
| deleteIntegrationAuth: () => void; | ||
| authorizations: any; | ||
| } | ||
|
|
||
| const CloudIntegrationSection = ({ | ||
| projectIntegrations, | ||
| integrations, | ||
| setSelectedIntegrationOption, | ||
| integrationOptionPress, | ||
| deleteIntegrationAuth, | ||
| authorizations | ||
| }: Props) => { | ||
| return ( | ||
| <> | ||
| <div className={`flex flex-col justify-between items-start m-4 ${projectIntegrations.length > 0 ? 'mt-12' : 'mt-6'} text-xl max-w-5xl px-2`}> | ||
| <h1 className="font-semibold text-3xl">Cloud Integrations</h1> | ||
| <p className="text-base text-gray-400"> | ||
| Click on an integration to begin syncing secrets to it. | ||
| </p> | ||
| </div> | ||
| <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 max-w-5xl"> | ||
| {integrations.map((integration) => ( | ||
| <CloudIntegration | ||
| integration={integration} | ||
| setSelectedIntegrationOption={setSelectedIntegrationOption} | ||
| integrationOptionPress={integrationOptionPress} | ||
| deleteIntegrationAuth={deleteIntegrationAuth} | ||
| authorizations={authorizations} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default CloudIntegrationSection; |
33 changes: 33 additions & 0 deletions
33
frontend/components/integrations/FrameworkIntegrationSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React from "react"; | ||
| import FrameworkIntegration from "./FrameworkIntegration"; | ||
|
|
||
| interface Framework { | ||
| name: string; | ||
| image: string; | ||
| link: string; | ||
| } | ||
|
|
||
| interface Props { | ||
| framework: Framework | ||
| } | ||
|
|
||
| const FrameworkIntegrationSection = ({ frameworks }: Props) => { | ||
| return ( | ||
| <> | ||
| <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2"> | ||
| <h1 className="font-semibold text-3xl">Framework Integrations</h1> | ||
| <p className="text-base text-gray-400"> | ||
| Click on a framework to get the setup instructions. | ||
| </p> | ||
| </div> | ||
| <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl"> | ||
| {frameworks.map((framework) => ( | ||
| <FrameworkIntegration framework={framework} /> | ||
| ))} | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default FrameworkIntegrationSection; | ||
|
|
30 changes: 30 additions & 0 deletions
30
frontend/components/integrations/ProjectIntegrationSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from "react"; | ||
| import Integration from "./Integration"; | ||
| import guidGenerator from "~/utilities/randomId"; | ||
|
|
||
| interface Props { | ||
| projectIntegrations: any | ||
| } | ||
|
|
||
| const ProjectIntegrationSection = ({ | ||
| projectIntegrations | ||
| }: Props) => { | ||
| return ( | ||
| <> | ||
| <div className="flex flex-col justify-between items-start mx-4 mb-4 mt-6 text-xl max-w-5xl px-2"> | ||
| <h1 className="font-semibold text-3xl">Current Project Integrations</h1> | ||
| <p className="text-base text-gray-400"> | ||
| Manage your integrations of Infisical with third-party services. | ||
| </p> | ||
| </div> | ||
| {projectIntegrations.map((projectIntegration) => ( | ||
| <Integration | ||
| key={guidGenerator()} | ||
| projectIntegration={projectIntegration} | ||
| /> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default ProjectIntegrationSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters